Explore perceptual lightness, chroma, and hue. Convert colors, check gamut boundaries, create tonal scales, and export CSS without leaving your browser.
Fine-tune OKLCH colors, explore the sRGB and Display P3 gamuts, build beautifully balanced tonal scales, and export real CSS. Move the canvas marker or change a value to watch everything respond.
Hatched regions are outside sRGB. The canvas shows the nearest lower-chroma color at the same lightness and hue; the actual requested OKLCH value is preserved.
Supports 3/4/6/8-digit HEX, rgb(), and oklch().
Click a swatch to load its precise OKLCH coordinates.
Eleven light-to-dark tones preserve hue and stay inside sRGB.
Lighter tones naturally support less chroma. Each tone uses the selected hue and a chroma value capped to its sRGB gamut boundary. Click a tone to explore it, or copy all generated CSS variables.
All harmonies retain your starting lightness and seek the nearest in-gamut chroma. Angles are OKLCH hue angles (not HSL hue angles).
The quick brown fox jumps over the lazy dog.
How the colors behave when swapped.
Contrast uses the opaque sRGB fallback composited over the chosen background. AA thresholds: 4.5:1 for normal text and 3:1 for large text.
See your color as a button, accent, and component highlight.
This sample interface uses your current OKLCH color to style a button, label, chart and highlight. Contrast-aware text is chosen for the button.
The interface composites the mapped sRGB fallback onto its surface when opacity is below 100%, for consistent rendering on ordinary displays. Preview colors are for experimentation, not a full design accessibility audit.
Standard fallback CSS plus native OKLCH where supported.
We've spent years choosing colors by dragging around RGB sliders, guessing HEX values, and adjusting HSL lightness until something finally looks right.
OKLCH changes how we approach color. Instead of starting with red, green, and blue channels, it separates color into three intuitive dimensions: perceived lightness, chroma, and hue.
UtilityGlen's OKLCH Color Explorer turns those dimensions into a practical color laboratory. Discover new colors, build tonal palettes, check display gamuts, convert to HEX, experiment with harmonies, and generate CSS for your next website.
Artistic illustration of color dimensions, not a measured gamut boundary.
OKLCH is a cylindrical representation of the Oklab color space. It gives you separate controls for how light a color appears, how colorful it is, and which hue family it belongs to. Understanding these three dimensions makes experimenting with color more intentional.
Controls perceived lightness. At 0%, the result is black; at 100%, it is white. Adjust this value to build lighter and darker versions of a color.
Unlike HSL lightness, OKLCH lightness is designed to follow human visual perception more closely.
Controls how colorful a shade appears. Low chroma produces subdued colors; higher chroma produces more vivid results. A chroma of zero gives a neutral gray at the selected lightness.
Maximum usable chroma varies with hue, lightness, and the target display gamut.
Selects a direction around the OKLCH hue circle. Rotate the hue while keeping lightness and chroma fixed to explore related levels of colorfulness.
OKLCH hue angles are not identical to HSL angles. The same number can refer to a different-looking hue.
The alpha value after the slash is optional. It controls opacity, with 0 meaning fully transparent and 1 meaning fully opaque.
The UtilityGlen OKLCH Explorer is more than a three-slider color picker. Its tools work together to help you create, compare, understand, and export colors for real website designs.
Drag across the lightness/chroma canvas to explore color visually. Use the hue strip, numeric inputs, and opacity controls for more precise changes.
Convert your selected color into familiar formats for CSS and design workflows. For out-of-sRGB colors, the HEX, RGB, and HSL values represent a fitted fallback.
Discover whether your selected OKLCH color fits inside sRGB or Display P3. If necessary, the tool computes an sRGB-safe version while preserving the requested OKLCH coordinates.
Generate eleven light-to-dark colors that retain your chosen hue. Chroma is adjusted where necessary to keep the exported tonal scale within sRGB.
Explore analogous, complementary, triadic, split-complementary, and tetradic color relationships using OKLCH hue angles.
Check how your selected foreground compares with a chosen background. View calculated contrast ratios and AA text-size indicators.
Preview your selected color on buttons, labels, charts, and interface highlights. Switch between light and dark examples before applying the color to a real design.
Copy modern OKLCH CSS with sRGB fallbacks, download color variables, export a swatch as SVG, or generate a shareable link to your chosen color.
OKLCH can describe colors that ordinary sRGB displays cannot reproduce. This is known as being outside the sRGB gamut.
Display P3 supports a wider range of colors than sRGB, but not every OKLCH color fits inside Display P3 either.
UtilityGlen checks both color spaces. When a requested color is outside sRGB, the explorer keeps its original OKLCH value and calculates a separate fallback by reducing chroma while retaining lightness and hue.
That means you can keep an expressive wide-gamut color in modern CSS while also providing a usable fallback for displays that rely on sRGB.
HSL remains a convenient way to describe colors, especially when working with familiar CSS values. OKLCH provides a different advantage: a lightness dimension designed to correspond more closely with perceived lightness.
Familiar CSS color model
HSL is intuitive for hue selection and basic color adjustments, but equal HSL lightness values do not necessarily look equally bright across different hues.
Perceptually oriented color model
OKLCH is useful for tonal scales, systematic color adjustments, and exploring vivid colors, including colors beyond sRGB. Gamut limits still need attention.
Neither format automatically guarantees accessible text contrast. Both require evaluating actual foreground and background color combinations.
OKLCH isn't just a design theory.
You can use oklch()
directly in modern CSS for backgrounds,
text, borders, gradients, and design tokens.
Here are two practical patterns.
Use OKLCH directly as a CSS color value. Provide a conventional fallback before the modern declaration for older browsers. The fallback below is illustrative.
.color-button {
background: #6366f1;
background: oklch(58% 0.20 275);
color: white;
padding: 14px 22px;
border-radius: 14px;
}Define related colors with a shared hue, then vary lightness and chroma. The explorer can generate eleven fitted shades and export their exact CSS values for your own design.
:root {
--brand-light: oklch(94% .025 280);
--brand-base: oklch(60% .14 280);
--brand-dark: oklch(35% .09 280);
}
.my-card {
background: var(--brand-light);
color: var(--brand-dark);
border-color: var(--brand-base);
}Production tip: CSS color support and display gamuts vary. The examples above teach the syntax. For a practical export using your selected color, use the Explorer's generated CSS , which includes fitted sRGB fallbacks.
The easiest way to understand OKLCH is to change a single coordinate while holding the others steady. Try these small exercises in the live color explorer.
Keep hue and chroma fixed. Move lightness from dark to light. Notice how the same hue changes character.
Try lightnessHold lightness and hue steady. Increase chroma and watch for the moment your color exceeds sRGB.
Try chromaRotate the hue through 360 degrees. Compare the colors and observe how gamut limits change across hues.
Try huePlace the same color against a light and dark background. Compare WCAG ratios instead of relying on intuition.
Test contrastFrom CSS syntax and conversions to display compatibility and accessibility, these answers cover the practical questions that arise when working with the OKLCH color space.
OKLCH is a perceptually oriented color representation based on Oklab. It describes colors using lightness, chroma, and hue.
In CSS, write colors using the
oklch() function,
for example:
oklch(65% 0.19 265).
You can also add an optional alpha
value using a slash.
OKLCH refers to the cylindrical Lightness–Chroma–Hue form of the Oklab color space. L controls perceived lightness, C controls chroma (colorfulness), and H represents the hue angle.
Enter an OKLCH value or adjust the editor's lightness, chroma, and hue. The explorer calculates a HEX color representing the selected color in sRGB.
If the requested color is outside sRGB, it reduces chroma at the same lightness and hue to create a displayable fallback. The original OKLCH value is retained.
OKLCH is particularly useful when building systematic tonal scales because its lightness coordinate is designed to better correspond with human perception.
HSL is still useful and widely understood, but equal HSL lightness values can appear noticeably different across different hues. Neither model eliminates the need for contrast and gamut testing.
Chroma represents how colorful a color is relative to a neutral gray. At zero chroma, an OKLCH color is neutral at the chosen lightness.
Increasing chroma generally makes the color more vivid, but not every combination of lightness, chroma, and hue fits within sRGB or Display P3.
HEX normally describes an sRGB color, while OKLCH can specify colors outside the sRGB gamut.
A wide-gamut OKLCH color may require gamut mapping before it can be represented in HEX. UtilityGlen creates its fallback by reducing chroma when necessary.
sRGB is a widely used standard color space for web content. Display P3 covers a wider range of colors, allowing compatible devices to display some more vivid colors that sRGB cannot represent.
Neither gamut covers every possible OKLCH color. The explorer checks whether your selected color fits inside each one.
Yes. CSS supports an optional alpha
component after a slash.
For example,
oklch(65% 0.19 265 / 0.5)
uses 50% opacity.
UtilityGlen includes an opacity control and a transparent swatch preview so you can experiment with layered colors.
Yes. The UtilityGlen OKLCH Explorer generates eleven light-to-dark tonal colors using your selected hue.
The generated values are adjusted to remain within sRGB where necessary. You can copy the color scale or download CSS variables for use in a design system.
Yes. Modern browsers support
the CSS oklch() color function.
For example:
color: oklch(45% 0.12 270);.
For broader compatibility, provide a conventional sRGB fallback, and test rendering across the browsers and display environments you support.
Use OKLCH to adjust your color's lightness and chroma, then test the resulting foreground and background colors with a contrast checker.
Under WCAG 2.x Level AA, the commonly applicable minimums are 4.5:1 for normal text and 3:1 for large text. Contrast compliance is not guaranteed simply because a color uses OKLCH.
Yes. UtilityGlen's OKLCH Color Explorer is a free, browser-based color tool. You can adjust color coordinates, compare gamuts, generate tonal palettes, examine harmonies, check contrast, and export CSS without creating an account.
The color conversion and preview calculations run in your browser. The tool also provides shareable color links for revisiting selected color coordinates.
Further reading: Explore the official MDN documentation for CSS oklch() to learn more about the syntax, browser support, and color-space behavior.
Shape lightness, refine chroma, rotate hue, explore the wider color gamut, and discover how your colors behave in a real interface. Turn your experiments into reusable CSS.
Handy web tools for daily use. Everything runs right in your browser—no sign-ups, no cloud uploads, and your data stays entirely on your device.