The future of CSS colors
OKLCH is a perceptually uniform color space designed so that equal changes in values produce equal visual changes.
Components:
- Lightness (L): 0-1 (black to white)
- Chroma (C): 0-0.4+ (grayness to vividness)
- Hue (H): 0-360° (color on the wheel)
Why better than HSL
HSL appears uniform mathematically but not visually. Two colors with identical HSL saturation can look wildly different in vividness. OKLCH fixes this.
Browser support
Chrome 111+, Safari 17.2+, Firefox 113+ support OKLCH in CSS. Use it directly: background: oklch(0.62, 0.21, 285);