OKLCH Color Explorer - Online Perceptually Uniform Space

OKLCH is a perceptually uniform color space defined in CSS Color Level 4. It uses three components: L (Lightness, 0–100%), C (Chroma, color intensity), and H (Hue angle, 0–360°). Unlike HSL, OKLCH's lightness is perceptually accurate—colors with the same L value appear equally bright to the human eye regardless of hue.

HSL has a major flaw: its Lightness component is not perceptually uniform. For example, HSL(240, 100%, 50%) blue appears much darker than HSL(60, 100%, 50%) yellow, even though both claim 50% lightness. OKLCH fixes this by using the Oklab perceptual model, ensuring uniform perceived brightness across all hues. This makes OKLCH vastly superior for design systems and accessible color palettes.

A perceptually uniform color space means that equal numerical changes in values correspond to equal perceived visual changes. In OKLCH, increasing L by 10% looks like the same brightness shift whether you're working with red, blue, or green. This predictability makes color manipulation intuitive—designers can adjust lightness without accidentally changing perceived contrast.

OKLCH can represent colors beyond the sRGB gamut—colors that standard monitors cannot display. When Chroma (C) is too high for a given Lightness and Hue, the color falls outside sRGB and gets clipped to the nearest displayable color. Our L-C Gamut Map above visually shows which combinations are safe. For web use, keep an eye on the gamut warning indicator to ensure your colors display correctly across all devices.

OKLCH is supported in all modern browsers including Chrome 111+, Firefox 113+, Safari 15.4+, and Edge 111+. It's part of the CSS Color Level 4 specification. As of 2024, global browser support exceeds 90%. For older browsers, provide a fallback using @supports (color: oklch(0 0 0)) in your CSS.

Simply use the oklch() function: color: oklch(0.6 0.2 250); or with percentages: color: oklch(60% 0.2 250deg);. You can also use it in gradients, backgrounds, borders, and anywhere CSS accepts a color value. The L value can be 0–1 (or 0%–100%), C is typically 0–0.4, and H is 0–360 (degrees).

The maximum achievable Chroma depends on both Lightness and Hue due to the shape of the sRGB color gamut. For example, yellows (H≈90°) can achieve higher Chroma values than blues (H≈260°) before leaving the sRGB gamut. This is a physical limitation of display technology, not a flaw in OKLCH. Use the Gamut Map above to explore the safe Chroma range for any hue.

Yes! Because OKLCH's L value directly correlates with perceived brightness, it's easier to predict contrast ratios. Two colors with L values of 0.8 and 0.3 will have roughly the same contrast regardless of their hues. This makes OKLCH an excellent tool for building accessible color systems that meet WCAG AA (4.5:1) or AAA (7:1) contrast requirements.