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.
2 color: oklch(0.7 0.25 29);
3}
4
5/* Or: color(display-p3 1 0.2 0.1) for P3. */
2 color: #c85032;
3}
4
5/* Hex, rgb(), hsl() are sRGB. Limited on wide-gamut screens. */
Browser Support for color()
Since 2023 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Your first month is free
Managed WordPress hosting for faster sites.
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.