display-p3: wide-gamut color for the screen that can show it

Two color worlds

For 30 years, web colors lived in the sRGB gamut — the colors a 1996 CRT could produce. Modern phone, laptop and HDR displays (every iPhone since 12, every M-series MacBook, most 2023+ Pixel/Galaxy phones) show display-p3, a 25% wider gamut. display-p3 reds are deeper, greens more saturated, oranges fuller. The brightest #ff0000 sRGB looks dull next to it.

.danger    { color: red; }                            /* sRGB */
.danger-p3 { color: color(display-p3 1 0 0); }        /* deeper red on capable displays */
.danger-p3 { color: oklch(0.65 0.35 27); }            /* same idea, OKLCH-native */

color(display-p3 r g b) accepts components in 0..1 space. The browser converts to the actual screen's color space. On sRGB-only screens, you see the nearest sRGB clamp — no visible disaster, just less vivid.

OKLCH gives you wide gamut for free

When you write oklch(0.65 0.35 27) and the chroma (0.35) is higher than sRGB can express at that lightness, the browser uses display-p3 if available, sRGB otherwise. Same code, two outputs.

Caveat: tools

• Most design tools (Figma 2023+, Photoshop CC) let you pick P3 colors. Older tools sneak them into your file as sRGB approximations.
• Screenshot a P3 page → the screenshot's metadata matters; many CI image-diff tools strip it and your "red" looks identical to designers' brief.
• Print prep: P3 doesn't map to CMYK 1:1 — never copy a P3 hex into a print design.

When to use this

Hero accent colors, danger states, brand colors. Body text and UI chrome are usually fine in sRGB — the difference isn't noticeable at small sizes / low chroma.