What Is OKLCH? The Colour Model Quietly Taking Over CSS

A few years ago, telling a developer you picked colours in oklch() would have earned a blank look. Now it's shipping in every major browser and quietly rewriting how design systems handle colour. So what is it, and why the sudden love?

What it was born to fix

Start with a complaint about HSL, because OKLCH is the answer to it.

HSL promises that its lightness number means brightness. It doesn't. Set a yellow and a blue to the same HSL lightness and the yellow will look far brighter — sometimes twice as bright to your eye. The format treats all hues as equal at a given lightness, but human vision doesn't work that way. We're wildly more sensitive to yellow-green light than to deep blue.

For a single colour, who cares. For a system — a row of coloured buttons, a set of status badges, a data-viz palette — it's a daily headache. You want them to carry equal visual weight, and HSL keeps betraying you.

What OKLCH actually measures

OKLCH describes a colour with three values, and they sound a lot like HSL's on purpose:

• L — Lightness, from 0 (black) to 1 (white). Except this L is perceptual: 0.6 looks the same brightness whether the hue is lemon or navy.
• C — Chroma, roughly how vivid the colour is. Zero is grey; higher is more intense. Unlike HSL saturation, it isn't capped at a tidy 100% — how far you can push depends on the hue and the screen.
• H — Hue, an angle from 0 to 360, same as the colour wheel you already know.

So oklch(0.7 0.15 25) reads as: fairly light, moderately vivid, in the red-orange range. The grammar is familiar. What changed is that the L is finally telling the truth.

Why designers switched

Three things won people over.

Even lightness makes systems easy. Pick one L, spin the hue around, and you get a family of colours that all feel equally bright. Colour scales, dark-mode variants and hover states stop being a fight.

Predictable adjustments. Nudge the lightness and only the brightness moves — the hue doesn't drift the way it can in other spaces. That predictability is gold when you're generating shades by formula rather than by hand.

Bigger colours. OKLCH can point at colours outside the old sRGB box — the punchier reds and greens that modern wide-gamut displays can actually show. Older formats simply can't name them.

One catch, and how small it is

Its one honest downside is age. Browsers only settled support recently, so if you must serve someone on a decade-old browser, you'll want a plain hex fallback underneath. In practice that's a one-line safety net, and the pool of browsers that need it shrinks every month.

The other adjustment is mental: chroma has no fixed ceiling, so it takes a little playing to build intuition. The fastest way to get that intuition is to watch a colour you know translate into OKLCH and back. Paste any hex into the Converter and read off its OKLCH values; do it a dozen times and the numbers start to feel like yours.

Common questions

Is OKLCH the same as LCH?

Close cousins. Both aim for perceptual lightness, but OKLCH is built on a newer, better-behaved model (Oklab) that avoids some odd hue shifts the older LCH could produce. When in doubt, reach for OKLCH.

Can I use it in production today?

Yes, with a hex fallback for stragglers. Most teams already do.

Do I need to hand-write the numbers?

Not at all. Pick visually and let a tool report the OKLCH values, or blend in OKLCH with the Mixer so your colour steps stay perceptually even.

OKLCH isn't a trend for its own sake. It's the first widely available colour format that lines up with how you actually see — which is exactly what you want when colours have to work together. Try translating a few favourites in the Converter and you'll get why people stopped fighting HSL.