For years, HSL has been the go-to color model for web designers because it maps intuitively to how we think about color: hue, saturation, and lightness as separate, adjustable dimensions. But HSL has a fundamental flaw: it is not perceptually uniform.
The Problem with HSL
In HSL, a yellow at 50% lightness looks much brighter than a blue at 50% lightness, even though the L value is identical. This is because human vision is more sensitive to certain wavelengths. When you build shade scales by evenly stepping the L value, the resulting shades do not look evenly spaced to human eyes.
What OKLCH Fixes
OKLCH (a variant of the Oklab color space) is perceptually uniform. Equal numeric changes in lightness produce equal perceived changes in brightness. A yellow at 0.7 lightness and a blue at 0.7 lightness actually look equally bright. This makes PaletteRx Base Colors">shade scale generation dramatically more consistent.
CSS Support
Modern CSS supports OKLCH natively: color: oklch(0.7 0.15 250). The three values are Lightness (0 to 1), Chroma (0 to ~0.4, similar to saturation), and Hue (0 to 360 degrees). All major browsers support it as of 2025.
Practical Impact
For palette builders, OKLCH means more predictable gradients (no muddy middle tones), more consistent shade scales, and better perceptual balance when comparing colors across different hues. PaletteRx currently exports in hex and HSL because these are what WordPress builders expect. As framework support for OKLCH grows, expect to see it as an export option.