OKLCH vs HSL: Why Modern Design Systems Pick OKLCH
HSL feels intuitive but lies about brightness. OKLCH is the perceptually uniform replacement now native to CSS. Here is when to use each.
The problem with HSL
Pick HSL yellow at hsl(60 100% 50%) and HSL blue at hsl(240 100% 50%). Both have the same lightness value, but the yellow looks blinding while the blue looks almost black. HSL "lightness" is a math construct, not a perceptual one.
This breaks every design-system pattern that depends on equal-feeling steps: 12-step color ramps, hover states, dark-mode mirrors, badge variants. Each hue ends up needing manual tweaks.
What OKLCH fixes
OKLCH (introduced by Björn Ottosson in 2020 and shipped in CSS Color 4) is a perceptually uniform space. oklch(0.7 0.2 60) and oklch(0.7 0.2 240) look equally bright to a human eye. That single property unlocks a few superpowers:
- Consistent ramps. Generate 12 steps by sweeping L from 0.95 to 0.15 and every hue produces a usable scale.
- Smooth gradients. No more muddy gray middle when blending across hues.
- Predictable contrast. Two colors with the same L always have similar luminance.
- Wide-gamut ready. OKLCH can express colors outside sRGB for Display P3 screens, with a clean sRGB fallback.
When HSL still wins
HSL is shorter to type, supported everywhere, and great for one-off tweaks ("make this 5% darker"). For prototypes or single-color tweaks, HSL is fine.
A practical migration plan
- Pick one brand color in HEX.
- Generate a 12-step OKLCH ramp from it (try our Design System tool).
- Export as CSS custom properties with a
color-scheme-aware fallback. - Use OKLCH in component tokens, HEX/HSL anywhere a tool does not yet support OKLCH.
Browser support, in one sentence
OKLCH is supported in every modern Chrome, Safari, Firefox and Edge release since mid-2023. Safe for production today.
Convert any color to OKLCH in our Color Converter, or generate a full OKLCH design system from a single brand color in CSS Variables.