OKLCH vs HSL: Why Modern Design Systems Pick OKLCH

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.