CSS Wide-Gamut Color: display-p3 and rec2020
Vivid colors beyond sRGB
The old way was hex, rgb(), or hsl(), all stuck in sRGB. On P3 or other wide-gamut screens, those colors look flat. oklch and color(display-p3 ...) unlock the extra range.
.hero { color: #c85032;}/* Hex, rgb(), hsl() are sRGB. Limited on wide-gamut screens. */.hero { color: oklch(0.7 0.25 29);}/* Or: color(display-p3 1 0.2 0.1) for P3. */color function Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.
Safe to use without fallbacks.
Wide gamut
oklch and display-p3 can use colors outside sRGB. On P3 displays, oranges and greens really pop.
Predictable
oklch is perceptually uniform. Tweaking lightness or chroma feels consistent; no weird HSL surprises.
Future-proof
Browsers map out-of-gamut to the display. Same code works on sRGB and P3; P3 gets the extra range where available.
How it works
The old way: every color you set with hex, rgb(), or hsl() lives in the sRGB gamut. On phones and laptops with P3 or other wide-gamut displays, the screen can show more saturated reds, greens, and oranges, but the browser was only given sRGB values, so things look a bit washed out.
The modern way: use oklch(0.7 0.25 29) for a perceptually uniform color that can go beyond sRGB when the display allows it, or color(display-p3 1 0.2 0.1) to target the P3 gamut directly. Browsers that support it will show the extra range; others will clamp to what they can show. You get richer color where it matters, without breaking older screens.