Display P3 and Wide-Gamut CSS: What is Worth Using Today
P3 lets you ship oranges, reds and greens that sRGB literally cannot display. Here is what works in 2025, what does not, and how to fall back gracefully.
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.