Why perceptual uniformity matters for gradients, accessibility, and creating truly harmonious color palettes.
In HSL, 50% lightness produces wildly different perceived brightness across hues. Yellow looks almost white, while blue looks almost black.
HSL at 50% lightness
Red
Yellow
Green
Cyan
Blue
Magenta
OKLCH at 65% lightness (perceptually equal)
Red
Yellow
Green
Cyan
Blue
Magenta
Enter any color and watch ColorBox generate a perceptually uniform palette.
HSL was designed for simplicity. OKLCH was designed for accuracy.
Mathematical convenience
Perceptual accuracy
Real-world applications where OKLCH makes a difference.
WCAG contrast ratios become predictable. If two colors have the same L value, you know their contrast will be insufficient.
Create color scales where each step looks like the same amount of change. No more eyeballing adjustments.
Invert lightness values and get mathematically correct dark themes. Colors stay harmonious automatically.
Create hover, active, and disabled states by adjusting L value. Get consistent visual feedback every time.
Modern browsers support OKLCH natively via the oklch() function.
.button {
background-color: oklch(55% 0.2 250);
color: oklch(98% 0.01 250);
}
.button:hover {
background-color: oklch(45% 0.2 250);
}Browser support: Chrome 111+, Firefox 113+, Safari 15.4+, Edge 111+
Perceptual uniformity means equal numeric changes produce equal perceived visual changes. In OKLCH, changing lightness by 10% always looks like the same amount of change, regardless of hue. HSL lacks this property.
HSL interpolates in a color space not aligned with human perception. When you blend red and green in HSL, you pass through low-saturation yellows and browns. OKLCH maintains chroma throughout the transition.
OKLAB is the rectangular (Cartesian) version of the same color space. OKLCH is the cylindrical (polar) version with hue as an angle. Both are perceptually uniform. ColorBox supports both.
For design systems, color palettes, and accessibility work, OKLCH is superior. HSL is still fine for quick one-off adjustments where perceptual accuracy doesn't matter.