On this page
The problem OKLCH solves
HSL looks like it should make lightness and saturation predictable, but it doesn't — because HSL is a simple geometric transformation of RGB, not a model of how the human eye actually perceives brightness. Two colors with identical HSL lightness values can look dramatically different in actual perceived brightness: pure yellow (hsl(60, 100%, 50%)) looks far lighter than pure blue (hsl(240, 100%, 50%)) at the "same" 50% lightness. That mismatch is why programmatically generating shades or tints from HSL often produces uneven, sometimes muddy results.
OKLab and OKLCH, briefly
OKLab is a color space (published by Björn Ottosson in 2020) explicitly designed so that equal numeric distances correspond to roughly equal perceived differences — a property HSL and even the older, more established LAB space don't fully deliver. OKLCH is simply OKLab expressed in polar coordinates: Lightness, Chroma (roughly "how far from gray"), and Hue in degrees — the same L/C/H structure as the older LCH space, but built on the more accurate OKLab foundation.
Where this actually matters in practice
Generating a set of shades (darker) or tints (lighter) of a base color is far more even in OKLCH than in HSL, because "lightness" in OKLCH tracks perceived brightness rather than a raw geometric value. The same is true for blending two colors: averaging in OKLab space avoids the muddy, grayish middle step that naive RGB averaging produces when mixing, say, a saturated red and a saturated green.
Why Tailwind CSS moved its whole palette to OKLCH
As of Tailwind CSS v4, every default color — from slate-50 to rose-950 — is defined in OKLCH rather than hex. This lets the framework guarantee more perceptually consistent lightness steps across all 22+ color families and every shade from 50 to 950, something that was harder to keep consistent when each family's hex values were tuned by hand.
Browser support
oklch() and oklab() are supported natively in CSS in all major browsers as of 2023–2024, meaning you can write color: oklch(70% 0.15 250) directly — no preprocessing or JavaScript required, with the browser converting to display-appropriate RGB automatically.