HSL has a critical flaw: equal lightness values in HSL do not appear equally bright to the human eye. For example, hsl(240, 100%, 50%) (blue) appears much darker than hsl(60, 100%, 50%) (yellow) despite having the same "50%" lightness. OKLCH solves this with perceptual uniformity — colors with the same L value appear equally light, making it far superior for creating harmonious palettes and accessible color contrasts.

OKLCH is supported in all modern browsers as of 2023–2024: Chrome 111+, Firefox 113+, Safari 15.4+, and Edge 111+. It's part of the Interop 2023 initiative. You can use it in CSS with oklch(L C H) or color(oklch L C H). For older browsers, provide a fallback using @supports or a HEX/RGB value before the OKLCH declaration.

Within the sRGB color gamut, Chroma (C) typically ranges from 0 to ~0.37, though the exact maximum depends on Lightness and Hue. At L≈0.5, certain hues can reach C≈0.37. Near black (L≈0) or white (L≈1), the maximum chroma shrinks significantly. Values above ~0.37 may fall outside sRGB and require gamut mapping. Wide-gamut displays (Display P3) support higher chroma values up to ~0.5 for some hues.

You can use OKLCH directly in CSS with the oklch() functional notation: background: oklch(0.6 0.18 255); — where 0.6 is lightness, 0.18 is chroma, and 255 is the hue angle in degrees. You can also use percentages for lightness: oklch(60% 0.18 255). For alpha transparency, append a slash: oklch(0.6 0.18 255 / 0.8). The color() function alternative is: color(oklch 0.6 0.18 255).

Perceptual uniformity means that a small change in any color component produces a proportionally similar change in perceived color, regardless of where you are in the color space. This is crucial for: 1) Creating smooth, natural-looking gradients without dead zones, 2) Generating accessible color palettes where each step feels equidistant, 3) Programmatic color manipulation that behaves predictably, and 4) Design tokens that scale consistently across themes.

OKLab and OKLCH represent the same color space but use different coordinate systems. OKLab uses Cartesian coordinates (L, a, b) — similar to CIELAB. OKLCH converts the a and b axes into polar coordinates: Chroma (C = √(a² + b²)) and Hue (H = atan2(b, a)). OKLCH is more intuitive for humans because Hue maps directly to the color wheel we're familiar with, while Chroma controls vividness. Both are equally precise; OKLCH is simply more designer-friendly.