oklch Explorer
Interactive L, C, H sliders and a hue uniformity comparison: the parts of oklch that don't click until you can touch them.
oklch has three axes. L is perceptual lightness (0–1). C is chroma — how colourful (0 is grey, ~0.37 is the most saturated sRGB allows). H is hue angle (0–360). The key property: adjusting L keeps the perceived hue stable. That’s the thing HSL can’t do.
Axis explorer
Drag L, C, and H to understand what each axis actually controls.
oklch(0.55 0.18 283)/* oklch(lightness chroma hue) */
.token-brand { color: oklch(0.55 0.18 283); } /* purple */
.token-brand-light { color: oklch(0.75 0.18 283); } /* same hue, lighter */
.token-brand-dark { color: oklch(0.35 0.18 283); } /* same hue, darker */
/* Only L changes — hue stays stable, unlike HSL */
Notice that moving L up and down keeps the hue stable. That’s the property that makes oklch useful for generating design token scales — you can step through lightness values and the colour family stays coherent.
Hue uniformity
Same L value (0.55) applied across 8 hues in oklch, and the closest equivalent in HSL (50%). The HSL row isn’t broken — it’s just measuring something that doesn’t match perception.
/* HSL — L: 50% across hues (not perceptually equal) */
--red: hsl(0, 70%, 50%);
--yellow: hsl(60, 70%, 50%); /* looks much brighter */
--blue: hsl(240, 70%, 50%); /* looks much darker */
/* oklch — L: 0.55 across hues (perceptually equal) */
--red: oklch(0.55 0.18 29);
--yellow: oklch(0.55 0.18 105);
--blue: oklch(0.55 0.18 250);
Yellow and cyan are the most obvious offenders in HSL — they look significantly brighter than blue or purple at the same L value. The oklch row doesn’t look perfectly uniform either (the eye’s sensitivity to different hues has physical limits), but the difference is dramatically smaller. That’s what makes it reliable for token scales.