The OKLCH Mathematical Manifesto

1. The Non-Linear Lie of sRGB & HSL

For three decades, digital interfaces were forced to compute color through models invented for cathode-ray tubes rather than human biology. In HSL, setting Lightness to 50% across different hues produces wild, disorienting variations in actual perceived brightness: an HSL blue (#0000ff, L=50%) has a relative luminance of roughly 0.07, while an HSL yellow (#ffff00, L=50%) emits a relative luminance of 0.93. When design systems automate dark mode themes by inverting HSL lightness, their accessibility promises immediately collapse: yellow text on a light ground blazes into illegibility, while blue text on a dark ground disappears into ink.

Björn Ottosson's 2020 development of Oklab and its cylindrical coordinate format OKLCH solved this historic defect. In OKLCH, L models human perceptual lightness: an L of 0.65 in cobalt blue and an L of 0.65 in amber gold share the same perceived lightness to human cone photoreceptors. This predictability makes programmatic palette generation possible without manual per-hue micro-tweaks.

☞

In OKLCH, a lightness step is calibrated to human photoreceptors, not cathode-ray tube voltages.

2. The Nuance: Perceptual Lightness is Not a Contrast Score

Because OKLCH is so elegant, designers have begun to overstate what it guarantees—claiming that OKLCH lightness is a 'photometric invariant' or that a constant ΔL guarantees deterministic accessibility. It does not.

Perceptual lightness (L) describes how bright an isolated color appears to human vision. Photometric luminance (Y), by contrast, measures emitted light energy weighted by the luminous efficiency function of the human eye. More importantly, contrast—the legibility of text against a substrate—is an interactive phenomenon governed by spatial frequency, polarity (light text on dark vs. dark text on light), and surrounding glare, as modeled by the Advanced Perceptual Contrast Algorithm (APCA).

A ΔL of 0.60 between text and background in OKLCH gives you a dependable starting point, but it does not exempt you from checking actual contrast scores or testing with human readers. The strength of OKLCH is not that it magically solves contrast; its strength is that it gives us an orthogonal coordinate system where lightness, chroma, and hue can be manipulated independently without warping each other.

3. Display P3 and the Physics of Gamut Mapping

Standard sRGB monitors display only about 35% of the colors visible to the human eye. Modern OLED and Liquid Retina screens support Display P3, covering roughly 50% of the visible spectrum. For years, CSS had no mechanism to express colors beyond sRGB without proprietary vendor prefixes.

OKLCH natively addresses the entire visible spectrum. But with wide gamut comes the challenge of gamut mapping: what happens when a design token asks for a vibrant chroma (C > 0.22) that a standard sRGB office monitor cannot physically display? Naive clipping simply clamps values to the nearest RGB boundary, distorting hue and causing ugly clipping artifacts. Graceful gamut mapping reduces chroma along a constant hue and lightness line, preserving the chromatic identity of the palette on legacy displays while letting it sing on modern hardware.