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: #c85032;
3}
4
5/* Hex, rgb(), hsl() are sRGB. Limited on wide-gamut screens. */
2 color: oklch(0.7 0.25 29);
3}
4
5/* Or: color(display-p3 1 0.2 0.1) for P3. */
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.