For decades, web developers treated color as a simplistic hexadecimal triad: #RRGGBB. However, raw RGB numbers possess no absolute physical meaning without a referenced Color Space. With the ubiquity of wide-gamut mobile screens, HDR displays, and modern CSS specifications, understanding chromaticity is essential for graphic designers and frontend architects. Color Spaces & Chromaticity: sRGB, Display P3, CIELAB, and Oklch Explained explores the physics of the CIE 1931 chromaticity horseshoe, perceptual uniformity, wide-gamut reproduction, and the revolutionary mathematical architecture of Oklch.
The CIE 1931 Chromaticity Diagram & Spectral Locus
In 1931, the Commission Internationale de l'Éclairage (CIE) established the foundational mathematical model of human color perception based on human retinal cone cells (L, M, S photopigments).
The resulting CIE 1931 (x, y) Chromaticity Diagram maps all visible light perceived by the human eye within a curved, tongue-shaped boundary known as the spectral locus. Every physical color space (such as sRGB, DCI-P3, Adobe RGB, or Rec. 2020) defines a triangular gamut within this space, bounded by three specific red, green, and blue chromaticity coordinates and an illuminant white point (typically D65 at 6504 Kelvin).
Major Digital Color Space Specifications
| Color Space | Coverage of CIE 1931 | White Point | Primary Target Ecosystem |
|---|---|---|---|
| sRGB (IEC 61966-2-1) | ~35% of visible gamut | D65 (6504K) | Legacy web, budget monitors, standard SDR video |
| Display P3 | ~45% of visible gamut (+25% vs sRGB) | D65 (6504K) | Apple Retina, modern smartphones, high-end laptops |
| Adobe RGB (1998) | ~52% of visible gamut | D65 (6504K) | Commercial photography, prepress CMYK proofing |
| ITU-R Rec. 2020 | ~75% of visible gamut | D65 (6504K) | Ultra HD 4K/8K, HDR10, Dolby Vision broadcasting |
The Problem with sRGB: Non-Uniformity & Muddy Gradients
Standard sRGB and its cylindrical projection HSL (Hue, Saturation, Lightness) were engineered in the 1990s around cathode-ray tube (CRT) display physics, not human visual psychology.
In HSL, setting lightness: 50% across different hues produces drastically unequal perceived brightness:
hsl(60, 100%, 50%)(Pure Yellow) has a perceived luminance ($Y$) of approximately 0.93.hsl(240, 100%, 50%)(Pure Blue) has a perceived luminance ($Y$) of only 0.07.
Because the lightness axis is perceptually distorted, generating color palettes, calculating WCAG contrast ratios, or interpolating CSS gradients in sRGB creates severe color banding, grayish desaturated middle stops ("the gray dead zone"), and unpredictable visual accessibility failures.
Perceptual Color Models: CIELAB vs. Oklab
To solve non-uniformity, color scientists developed device-independent color spaces that model human perceptual distance:
- CIELAB ($L^*a^*b^*$): Established in 1976, CIELAB models Lightness ($L^*$), green-to-red opponent axis ($a^*$), and blue-to-yellow opponent axis ($b^*$). While vastly superior to RGB, CIELAB exhibits a famous "blue shift" bug: adjusting saturation along the blue spectrum causes hues to drift toward purple.
- Oklab: Designed by Björn Ottosson in 2020, Oklab improves upon CIELAB by using numerical optimization over modern perceptual color datasets. It completely eliminates hue shifting during saturation adjustments and models lightness with near-perfect human perceptual linearity.
Oklch: The Modern Standard for Design Systems
Standardized in the W3C CSS Color Module Level 4 specification, Oklch is the cylindrical polar projection of Oklab:
- L (Perceived Lightness): Ranges from 0% (pure black) to 100% (pure white). An Oklch lightness of 0.70 appears identically bright whether the hue is emerald green, electric cyan, or vibrant yellow.
- C (Chroma): Represents color saturation/purity, starting at 0 (neutral gray) and extending upward beyond 0.35 into wide-gamut spectra.
- h (Hue Angle): The chromatic angle from 0 to 360 degrees (0° pink-red, 90° yellow, 140° green, 200° cyan, 260° blue, 320° purple).
- Predictable Contrast: Because lightness is constant across hues, design tokens can guarantee WCAG 2.1 AA accessibility (e.g., pairing background $L=0.20$ with text $L=0.85$) universally across all brand theme colors.
Wide-Gamut CSS in Practice: Display P3 Media Queries
Modern web engines adapt visual assets dynamically based on screen hardware capabilities using CSS Media Queries Level 5:
--brand-primary: #00adb5; /* Fallback sRGB */
}
@media (color-gamut: p3) {
:root {
--brand-primary: color(display-p3 0 0.678 0.71); /* Wide Gamut */
}
}
On wide-gamut screens, the user experiences rich, saturated colors previously impossible in standard sRGB, while legacy displays render gracefully without clipping distortion.
Delta E Metrics & Perceptual Color Difference Formulas
Quantifying whether two colors appear visually identical to human observers requires mathematical color difference metrics (ΔE). In legacy sRGB spaces, Euclidean distance calculations fail because human color vision is highly non-linear. The CIE established progressively refined formulations: ΔE*76 (basic Euclidean distance in Lab), ΔE*94 (introducing luminance-dependent weighting factors), and the modern benchmark CIEDE2000 (ΔE00), which accounts for neutral gray compensation, lightness weighting, and rotation factors for blue hue non-linearities. In Oklab and Oklch, computing Euclidean distance ΔE_OK = sqrt(ΔL^2 + Δa^2 + Δb^2) achieves perceptual accuracy comparable to complex CIEDE2000 calculations with significantly lower algorithmic overhead, making it ideal for real-time browser-based color palette generation. Similarly, the Dolby-developed JzAzBz color space provides specialized perceptual uniformity tuned for ultra-high-dynamic-range displays exceeding 10,000 nits, demonstrating that mathematical color spaces continuously evolve alongside modern display hardware capabilities.