Oklab and Oklch: Modern Perceptual Color Spaces

Oklch is more than a nicer color picker. In production it becomes a decision surface: which chroma can survive the target gamut, how much lightness can move before contrast breaks, whether a gradient should travel through Oklab or Oklch, and how stable a palette remains when you ask for many steps. This lab turns those hidden decisions into live data.

There are two families of color space, and until recently you had to pick a side. The intuitive family - HSL, HSV - lets a human reason in plain words but is just sRGB twisted into a cylinder, so its numbers do not match perception. The perceptual family - CIELAB and friends - is built on real vision science but is awkward to author in and has well-known weak spots, especially a hue that drifts in the blues.

Three failures show up again and again when the wrong tool is used. First, lightness lies: a blue at HSL L = 50% looks far darker than a yellow at the same number. Second, lightening shifts hue: push a blue lighter in sRGB or HSL and it slides toward purple. Third, gradients misbehave: blend blue to yellow in sRGB and the midpoint goes a muddy gray. Each of these is a perceptual-uniformity problem, and each is exactly what Oklab was built to fix.

Oklab was published in December 2020 by Björn Ottosson, who set out to build "a better Lab" optimized specifically for the kinds of operations software performs on color: blending, lightening, generating palettes. Rather than starting from the 1931 CIE machinery, he started from an approximation of the cone responses (the L, M, S signals the eye actually produces), applied a cube-root nonlinearity to model the compressive response of vision, and then fit a final linear transform so that hue lines stayed straight and lightness matched perception.

The result keeps the shape of CIELAB - an opponent space with a lightness axis and two color axes - but corrects CIELAB's biggest practical flaw: it does not bend hue as colors get lighter or more saturated. And because the whole transform is two small matrix multiplies with a cube root in between, it is cheap enough to run per pixel, in shaders, and live in a browser.

Oklab describes a color with three Cartesian numbers, mirroring CIELAB's structure but on its own, better-tuned scale:

Neutral grays sit at a = b = 0 for every lightness, exactly as in an opponent model of vision. The further (a, b) gets from the origin, the more colorful the result. That distance has a name - chroma - and turning the Cartesian (a, b) into a radius and angle is precisely what gives us Oklch.

Oklch is Oklab in polar coordinates. The lightness L is unchanged; the two color axes become a radius and an angle:

This is the same trick that turns CIELAB into LCh, or that turns the RGB cube into HSL - but here the axes are perceptual, so the three dials finally mean what you expect. Raising L makes it lighter without changing the color. Raising C makes it more colorful without changing the hue. Spinning h rotates through hues that feel evenly spaced. It is the ergonomics of HSL with the integrity of a perceptual space.

The single most quoted reason to use Oklch is hue constancy. Take any color and make a row of lighter and darker versions. In HSL - and in naive sRGB - the hue wanders: blues drift toward purple as they lighten, and the steps look uneven, bunching up at the dark end. In Oklch, the hue stays put and the steps feel evenly spaced. That is the difference between a tonal ramp that looks designed and one that looks broken.

Getting from an sRGB byte triple to Oklab is a fixed four-step pipeline. Nothing in it is tuned per color - it is the same constants every time.

The inverse simply runs backward: Oklab → cube (the inverse of the cube root) → inverse matrices → delinearize. Because every step is invertible, the round trip is exact up to floating-point and the final 8-bit rounding.

Interpolation is where the space you choose becomes visible to everyone, not just color nerds. Blend two colors by walking a straight line between them - the question is which space the line lives in. sRGB interpolation dips dark and muddy through the middle. HSL interpolation swings through unwanted hues. Oklab interpolation keeps lightness and colorfulness sensible the whole way across.

This is exactly why CSS Color 4 lets you name the interpolation space: linear-gradient(in oklab, …) and color-mix(in oklch, …) produce the clean blends by default in modern browsers.

Because Oklab's L tracks perceived lightness, it is the natural engine for a tonal scale - the 50-to-900 ramp every design system needs. Fix the hue and chroma, step lightness in even increments, and you get a scale whose steps look even and whose endpoints behave. It also makes accessible contrast far more predictable: two colors with a sensible gap in Oklab lightness will usually have a sensible contrast ratio, because both are anchored in perception.

Oklab and Oklch are first-class CSS color functions, shipping in every major browser since 2023. The syntax mirrors the model directly:

That last line - relative color syntax - is the payoff. You can derive a hover or disabled variant by nudging only L, confident the hue and chroma stay put. The whole "lighten by 8%" intent becomes a single, honest expression that would have been a hue-shifting mess in HSL.

Each space is the right answer to a different question. The converter below shows one color in all of them at once; the table sums up when to reach for which.

Six questions on Oklab and Oklch. Instant feedback, no scores recorded - a wrong answer comes with a short explanation pointing you back to the right section.

These articles sit directly around Oklab - the spaces it improves on and the ones it works alongside. The numbers reflect each article's position in the editorial roadmap of 113.