Display P3 and Wide-Gamut CSS: What is Worth Using Today

What is Display P3?

P3 is a color space about 25% larger than sRGB. Most modern phone, laptop and TV displays since ~2017 (every iPhone since 7, every MacBook since 2016, most flagship Androids) ship P3-capable panels. If you only output sRGB, you are leaving roughly a quarter of those screens' visual range on the table.

The colors P3 unlocks

P3 most visibly extends the red and green corners. Pure sRGB red looks dim on a P3 display because the panel can show a brighter, more saturated red. Same story for emerald greens, electric oranges and traffic-cone yellows. Blues are mostly already at gamut.

How to use it in CSS

Two practical paths:

OKLCH out of gamut. Set color: oklch(0.7 0.4 25); . The chroma (0.4) here lands outside sRGB. Browsers on sRGB displays clip to the closest in-gamut color; P3 displays show the wider color.

Explicit color() function. color: color(display-p3 1 0 0); declares the channel values directly in the P3 space.

The progressive-enhancement pattern

.cta {
background: #ff3b30; /* sRGB fallback */
background: oklch(0.65 0.27 25); /* often inside P3 */
background: color(display-p3 1 0.18 0.15); /* explicit P3 */
}

Older browsers stop at the first declaration they understand. P3-capable browsers on P3-capable displays light up the punchy version.

When P3 is worth the effort

Brand colors that lose their punch in sRGB (Coca-Cola red, Spotify green, Ferrari red).

Photography or product imagery that originated in P3.

Accent colors used sparingly - the wow effect comes from contrast with surrounding sRGB.

When sRGB is fine

Body text and neutrals - perceived lightness matters more than saturation.

Brands that already live well inside sRGB.

Anything that has to look identical across screens (corporate dashboards, charts).

Audit your palette in P3

Drop your colors into our Display P3 tool. It shows which of your colors are already in gamut, which can be pushed wider, and exports the progressive-enhancement CSS automatically.