OKLab Explained: The Modern Perceptual Color Space
In 2020 Björn Ottosson published OKLab — a color space with CIELAB's shape (L, a, b opponent axes) but numerically optimized against modern perception data. The name means what it says: it's LAB, but OK. Its two killer improvements: hue linearity (darkening a blue keeps it blue instead of drifting purple) and better lightness prediction. Within three years it was in the CSS specification and every major browser.
Where OKLab shines
Gradients and mixing: interpolating in OKLab avoids the gray "dead zone" that sRGB gradients produce between complementary colors — color-mix(in oklab, …) and linear-gradient(in oklab, …) give clean, even transitions. Programmatic manipulation: lighten/darken operations preserve hue. Uniform scales: steps of equal ΔL genuinely look equal.
| Channel | Range (sRGB) | Meaning |
|---|---|---|
| L | 0–1 | Perceived lightness |
| a | ≈ −0.23 to +0.28 | Green ↔ red |
| b | ≈ −0.31 to +0.20 | Blue ↔ yellow |
OKLab in practice
.smooth { background: linear-gradient(in oklab, #6C5CE7, #00B8D9); }
.mixed { color: color-mix(in oklab, red 40%, blue); }For hand-editing, use its polar twin OKLCH. Convert anything with RGB to OKLAB and OKLAB to RGB.