The Thirty-Year Dominance of sRGB
For three decades, web browsers operated almost exclusively within the sRGB color space, standardized in 1996 for cathode-ray tube monitors. While universal, sRGB can only display approximately 35% of all colors perceptible to the human eye.
Today, virtually every smartphone, tablet, and laptop display ships with Display P3 capability, reproducing roughly 50% more vibrant greens, deep oranges, and electric magentas than standard sRGB.
The Fatal Flaw in HSL: Perceptual Inconsistency
Frontend developers embraced HSL (Hue, Saturation, Lightness) because it was intuitive compared to raw hex codes. However, HSL is mathematically flawed for design systems because it ignores human eye physiology:
hsl(60, 100%, 50%)is pure Yellow. Perceived brightness is almost 93%.hsl(240, 100%, 50%)is pure Blue. Perceived brightness is only 12%.
In HSL, both colors claim a "Lightness" of 50%, but one is blinding and the other is near pitch-black. This makes automated color-ramps in HSL unpredictable for accessibility.
Enter OKLCH: The Perceptually Linear Miracle
Developed in 2020 by Björn Ottosson, OKLCH models color based on how human photoreceptors actually interpret light:
/* Syntax */
color: oklch(L C H);
/* L = Lightness (0% - 100%)
C = Chroma (0 - ~0.4)
H = Hue angle (0 - 360) */
.button-primary {
background: oklch(0.65 0.24 260); /* Vibrant violet */
}
In OKLCH, if two colors share a Lightness of 0.65, they have the exact same perceived luminance to human vision, regardless of whether the hue is lime green, sky blue, or fiery orange. Contrast calculations become mathematically reliable.
Banishing the Gradient "Gray Dead Zone"
Have you ever created a gradient from bright blue to bright yellow in CSS and noticed a dirty, muddy brownish-gray smear in the middle? That happens because sRGB interpolates linearly through dull coordinate space.
Modern CSS allows you to declare the interpolation color space directly in your gradients:
/* Standard muddy sRGB gradient */
background: linear-gradient(to right, #0055ff, #ffff00);
/* Vibrant, clear OKLCH interpolated gradient */
background: linear-gradient(in oklch to right, #0055ff, #ffff00);
By specifying in oklch, the browser interpolates along a natural chromatic arc, maintaining high saturation and brightness across the entire transition.
Practical Strategy for Production Web Apps in 2026
Browser support for OKLCH and modern color spaces is now over 95% across all major modern browsers. You can safely adopt modern color definitions with standard hex fallbacks for legacy systems, unlocking richer palettes and mathematically coherent UI states.