A color scale often looks uneven when shades share an HSL lightness value but do not look equally bright. OKLCH addresses that problem by describing color in perceptual terms: lightness, chroma, and hue. It keeps hue-based color selection intuitive while making changes more consistent to the eye. section 7.1.4 section 7.8
OKLCH is a polar coordinate system with three components. L is perceived brightness, from 0 or 0% (black) to 1 or 100% (white). C is chroma: distance from neutral gray, where 0 is grayscale and roughly 0.4–0.5 can be highly saturated depending on hue and lightness. H is hue, an angle from 0 to 359 degrees. Unlike HSL, rotating OKLCH hue maintains perceived brightness. section 7.1.4
Set a heading color
Use CSS oklch() as oklch(lightness chroma hue). An optional slash adds alpha. h1 { color: oklch(0.42 0.2 328); } A half-transparent version is oklch(0.42 0.2 328 / 0.5). section 7.1.4
For a predictable scale, hold chroma and hue constant while varying lightness. This produces lighter and darker versions of one color identity. Conversely, hold lightness and hue constant while varying chroma to create subtle, vibrant, and highly intense variants. section 7.1.4 section 7.8
Listing 7.1 Creating a color scale by varying lightness in the OKLCH color space
.brand-light { background: oklch(0.8 0.15 350); }
.brand-medium { background: oklch(0.6 0.15 350); }
.brand-dark { background: oklch(0.4 0.15 350); }
Compare three brand shades that retain the same chroma and hue while lightness changes. section 7.1.4
OKLCH is also useful for dark-mode transformations. Invert lightness with 1 − L while preserving chroma and hue for a perceptually consistent opposite brightness; a fuller palette transformation can then reduce chroma, apply a small hue shift, and test contrast against the new background. section 7.5.2 section 7.5.4
Check results on regular monitors when broad compatibility matters. Some OKLCH colors are available on wide-gamut Display P3 screens but may fail on less capable displays. section 7.1.4
