Modern Colors
Overview
For decades, we used HEX (#ff0000), RGB (rgb(255, 0, 0)), or HSL. These are bound to the 'sRGB' color space, which was designed for ancient CRT monitors from the 1990s. Modern Apple devices and 4K monitors support 'Display P3', which can display 50% more vibrant colors. Modern CSS introduces oklch(), a perceptually uniform color space. It allows you to access these ultra-vibrant hardware colors, and ensures that 'Lightness 50%' in a blue looks exactly as bright as 'Lightness 50%' in a yellow to the human eye (which HSL completely fails at).
Syntax
/* 1. The old way (sRGB space) */
.old-red { background: #ff0000; }
.old-blue { background: rgb(0, 0, 255); }
.old-green-alpha { background: rgba(0, 255, 0, 0.5); } /* 50% opacity */
/* 2. HSL (Hue, Saturation, Lightness) */
.hsl-color { background: hsl(200deg 100% 50% / 0.8); }
/* 3. The Modern Standard: oklch()
Format: oklch(Lightness, Chroma/Vibrancy, Hue)
*/
.vibrant-pink {
/* This pink is physically impossible to display in HEX! */
background: oklch(65% 0.3 330);
}
/* 4. Display P3 explicitly */
.neon-green {
background: color(display-p3 0 1 0);
}Common Pitfalls
- Assuming HSL lightness is accurate. In
hsl(), yellow at 50% lightness is blindingly bright, but blue at 50% lightness is incredibly dark. If you build a UI theme using HSL math, your contrast ratios will fail accessibility audits.oklch()mathematically guarantees identical perceptual lightness across all hues. - Forgetting fallback colors. While
oklch()has >95% browser support today, very old enterprise computers might ignore it. Always provide a HEX fallback immediately before it in the CSS.
Interview Questions
oklch() over hsl() when building an automated design system?Perceptual uniformity. In oklch, you can programmatically change the Hue (the color) while keeping Lightness constant, and guarantee that the visual contrast against the background remains mathematically identical, ensuring WCAG accessibility compliance.
Real-World Example
Using oklch to generate perfect, accessible hover states.
.btn {
/* Base color: 60% lightness */
background: oklch(60% 0.15 250);
}
.btn:hover {
/* We know with 100% certainty that boosting lightness by 10%
will look like a perfect hover state without breaking contrast! */
background: oklch(70% 0.15 250);
}Check Your Knowledge
Test your understanding of Modern Colors with these quick questions.