OKLCH vs HSL
HSL's lightness lies — it varies wildly across hues. OKLCH's lightness is perceptual, so equal numbers look equally light.
Updated Jul 1, 2026 · By OKLCH.xyz editorial team
Both HSL and OKLCH give you hue, a saturation/chroma channel and a lightness channel. The difference is what those numbers mean.
The HSL problem
In HSL, hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) both claim 50%
lightness — yet the yellow looks far brighter. HSL lightness is a geometric midpoint of
RGB, not a perceptual quantity. This makes HSL color scales uneven and unreliable for
accessibility work.
The OKLCH fix
OKLCH lightness comes from Oklab, which is tuned to human vision. oklch(0.7 …) looks
mid-light whatever the hue. That means:
| Task | HSL | OKLCH |
|---|---|---|
| Equal-looking lightness steps | ✗ hard | ✓ built-in |
| Darken without hue shift | ✗ often shifts | ✓ stable |
| Wide-gamut (P3) colors | ✗ sRGB only | ✓ supported |
| Reason about contrast | ✗ misleading | ✓ meaningful |
Migrating
Convert existing values with the HSL to OKLCH converter, then rebuild your scales in the palette generator.