OKLCH vs HSL — differences, a side-by-side table, and when to use each.
HSL has been the friendly, readable color model for web design for years. OKLCH is the newer CSS Color 4 model built on perceptual uniformity. The practical difference: in OKLCH, equal lightness numbers actually look equally light across every hue — in HSL they don't.
OKLCH stands for Lightness, Chroma, Hue in the Oklab color space. It is perceptually uniform: a lightness of 60% looks equally light whether the hue is yellow or blue, and chroma scales intensity predictably. It supports wide-gamut (P3) color and ships in modern browsers via the oklch() CSS function.
HSL stands for Hue, Saturation, Lightness. It is simple and widely supported, mapping onto the RGB cube. Its weakness is that it is not perceptually uniform: HSL lightness of 50% looks much brighter for yellow than for blue, so palettes built purely on HSL numbers can look uneven.
| OKLCH | HSL | |
|---|---|---|
| Perceptually uniform | Yes | No |
| Color space | Oklab (modern) | RGB cube (classic) |
| Axes | Lightness, Chroma, Hue | Hue, Saturation, Lightness |
| Wide-gamut / P3 | Yes | No (sRGB only) |
| Equal lightness looks equal | Yes, across all hues | No, varies by hue |
| CSS function | oklch() (Color 4) | hsl() (long-standing) |
| Browser support | Modern browsers | Universal |
Use OKLCH for design systems and palettes where consistency matters: generating tints and shades that step evenly, keeping a set of brand colors at matching perceived lightness, or targeting wide-gamut P3 displays. It makes accessible, predictable color far easier.
Use HSL when you need universal browser support with zero fallbacks, when you're making quick one-off tweaks, or when the simplicity of "spin the hue, nudge the lightness" is all the task needs. It remains a perfectly good everyday model.