OKLCH and Lab Colors in CSS: The Future of Web Color
Explore OKLCH and Lab color spaces in CSS — perceptually uniform colors that produce better gradients, more accessible palettes, and consistent lightness across hues. The successor to HSL for professional color work.
Key Takeaways
- HSL (Hue, Saturation, Lightness) is intuitive but perceptually non-uniform.
- OKLCH (Lightness, Chroma, Hue) models human color perception accurately.
- Gradients**: No gray dead zones between complementary colors
- All modern browsers support OKLCH.
CSS Color Converter
Convert colors between hex, RGB, HSL, HWB, and named CSS colors
Why HSL Falls Short
HSL (Hue, Saturation, Lightness) is intuitive but perceptually non-uniform. Yellow at hsl(60, 100%, 50%) appears much brighter than blue at hsl(240, 100%, 50%), despite having the same L value. This inconsistency makes it difficult to create accessible palettes with consistent perceived brightness across different hues.
OKLCH: Perceptually Uniform Color
OKLCH (Lightness, Chroma, Hue) models human color perception accurately. Colors with the same L value genuinely appear equally bright. This makes OKLCH the ideal color space for creating harmonious palettes, accessible color systems, and smooth gradients.
color: oklch(0.7 0.15 150); /* L: 70%, C: 0.15, H: 150° */
color: oklch(0.7 0.15 250); /* Same lightness, different hue */
Comparison
| Feature | HSL | OKLCH | Lab |
|---|---|---|---|
| Perceptual uniformity | No | Yes | Yes |
| Intuitive hue | Yes | Yes | No (a/b axes) |
| Gamut mapping | sRGB only | P3, Rec.2020 | P3, Rec.2020 |
| Browser support | Universal | Modern (95%+) | Modern (95%+) |
| Gradient quality | Muddy midpoints | Smooth | Smooth |
Practical Benefits
- Gradients: No gray dead zones between complementary colors
- Palettes: Consistent perceived brightness across all accent colors
- Accessibility: Reliable contrast ratios based on perceptual lightness
- Wide gamut: Access P3 colors on modern displays
Using OKLCH Today
All modern browsers support OKLCH. For older browser fallback, provide an sRGB color first and the OKLCH color second — browsers ignore what they cannot parse. Generate and convert OKLCH colors with the Peasy color tools.