OKLCH Color Space
The perceptually uniform color space designed for modern UI design
What is OKLCH?
OKLCH is a modern color space that addresses limitations in traditional models like HSL and HSV. It's based on Oklab, a perceptually uniform color model that aligns with how human eyes perceive color differences.
Why OKLCH for Design Systems?
- Perceptual Uniformity: Equal numeric changes = equal visual changes
- Better Contrast Prediction: More accurate WCAG calculations
- Intuitive Controls: Lightness, Chroma, Hue work like you'd expect
- Native CSS Support: Works in modern browsers without conversion
- Future-Proof: CSS Working Group standard
OKLCH vs HSL
| Aspect | OKLCH | HSL |
|---|---|---|
| Perceptual Uniformity | ✓ Yes | ✗ No |
| Contrast Prediction | ✓ Accurate | ✗ Unreliable |
| Intuitive Adjustments | ✓ Yes | ⚠ Sometimes |
| Browser Support | ✓ Modern browsers | ✓ Universal |
Components of OKLCH
- L (Lightness): 0–1
- How light or dark the color is. 0 = pure black, 1 = pure white.
- C (Chroma): 0–0.4
- Color intensity or saturation. Higher values = more vibrant, lower = more muted.
- H (Hue): 0–360
- Color type (red, blue, green, etc.). Same as traditional hue.
Using OKLCH in CSS
/* Primary blue */ color: oklch(70% 0.15 200); /* Muted variant */ color: oklch(55% 0.08 200); /* Light background */ color: oklch(98% 0.02 90);
Next Steps
Ready to explore OKLCH color systems? Head to the Studio and start building with Tonal Field's OKLCH-powered controls.