OKLCH Is Here. Is OKHSL Next?
If you have ever built a colour palette in hsl(), you have been lied to. Set yellow and blue to the same 50% lightness and look at them side by side. The yellow glows. The blue is nearly navy. HSL’s “lightness” is maths on RGB channels, not a measure of what your eyes see.
oklch() fixes that, it works in every modern browser today, and it is the best thing to happen to CSS colour in years. And there is a cousin, OKHSL, that some of us would love to see next.
What OKLCH actually is
OKLCH is the polar form of Oklab, a colour space Björn Ottosson published in 2020 and CSS adopted in Color Level 4. It takes three values plus optional alpha:
- L: perceived lightness, 0 to 1 (or 0% to 100%). “Perceived” is the key word: two colours with the same L look equally light.
- C: chroma, how colourful it is, from 0 (grey) up to roughly 0.37 for the most vivid colours a screen can show.
- H: hue angle, 0 to 360.
:root {
--brand: oklch(0.62 0.19 255); /* a confident blue */
--brand-muted: oklch(0.62 0.06 255); /* same lightness, less colour */
--overlay: oklch(0 0 0 / 50%); /* 50% black */
}
Read those values and you can almost see the colour. Change the hue and the lightness stays put. That alone makes it easier to reason about than hex or RGB will ever be.
What it unlocks
Palettes that actually match. Keep L and C fixed, rotate H, and you get a set of hues that feel equally light and equally vivid. With HSL you would be hand-tweaking every swatch.
Relative colour syntax. You can derive colours from a base colour right in CSS, no preprocessor needed:
:root {
--base: oklch(0.62 0.19 255);
}
.button:hover {
background: oklch(from var(--base) calc(l - 0.08) c h);
}
.badge {
background: oklch(from var(--base) l c calc(h + 180));
}
.disabled {
background: oklch(from var(--base) l 0 h);
} /* true grey, same lightness */
Better mixing and gradients. color-mix() and gradients can interpolate in Oklab, which avoids the muddy grey middle you get mixing in sRGB. The CSS Color 5 draft even makes Oklab the default when you leave the colour space out of color-mix().
Wide gamut for free. OKLCH is not tied to sRGB, so it can describe the richer Display P3 colours that most modern phones and laptops can show.
The catch: chroma is lumpy
OKLCH has one real annoyance. The maximum chroma depends on both the hue and the lightness. A vivid yellow can reach high chroma only when it is light. A vivid blue maxes out when it is dark. So oklch(0.9 0.3 260) is simply not a colour your screen can show, and the browser has to gamut-map it to the nearest one it can.
In practice that means you cannot treat C as a clean 0 to 100% slider. You need a picker that shows you the edge of the gamut, or you keep chroma modest and accept a slightly calmer palette. That lumpiness is exactly the problem OKHSL was designed to solve.
OKHSL: the one I want next
Ottosson also designed OKHSL and OKHSV. They keep the familiar HSL shape, where every saturation from 0% to 100% is a valid colour, but build it on Oklab so lightness is far closer to what you actually perceive. Think of it as HSL that finally tells the truth, with a slider you can drag end to end without falling off the gamut.
The honest status: it is not in CSS yet, and not on a schedule. Someone opened a request to add OKHSL to the CSS spec in March 2023, and it is still just a proposal. The spec editor raised two fair objections. Forcing colour into a neat cylinder gives up some perceptual uniformity, which was the whole point of Oklab. And OKHSL was designed around sRGB, just as the web is moving to wider P3 displays. Others in the thread showed a P3 version is possible, so the door is not closed.
Until then, you can get most of the way with OKLCH and a good gamut-aware picker, or with a JavaScript colour library that already supports OKHSL. My vote: ship it, with a gamut parameter. Designers want a colour model they can reason about without a physics degree, and OKHSL is the closest thing we have.