CSS color recipe
Display P3 Wide-gamut color with an sRGB fallback
color(display-p3 …) reaches colors sRGB cannot, on the wide-gamut screens of most phones and many laptops. Write the sRGB color first and the P3 color second; a browser that cannot read color() keeps the first.
- Baseline
- Widely available
- First versions
- Chrome 111 · Firefox 113 · Safari 15
- Tested
- 3 of 3 engines
Live example
The recipe, running
Left: the CSS below, as your browser runs it. Right: the same CSS as a browser without the feature reads it, so you see exactly what the fallback gives.
Turn on JavaScript to see whether your browser supports it; the examples work either way.Your browser supports it, so the left example runs the modern path.Your browser does not support it yet, so both examples show the fallback.
The CSS
Copy it as it is
This is the exact CSS the example runs. Fallbacks come first; the modern values follow, so each browser keeps the last line it understands.
display-p3.css
/* sRGB first; browsers that read color() take the second line. */
.swatch--p3 {
background: #FF3F90;
background: color(display-p3 1 0.1 0.55);
}
.swatch--srgb { background: #FF3F90; }
.swatch { display: grid; place-items: end start; height: 84px; padding: 8px; border-radius: 10px; color: #000000; font-size: 12px; }
.screen::after { content: "sRGB screen"; }
@media (color-gamut: p3) {
.screen::after { content: "P3 screen"; }
}How it works
What each part does
Two declarations are enough here. There is no
var()in the value, so an old browser drops the line it cannot parse and keeps the hex.The fallback is mapped, not clipped.
#FF3F90is the P3 color brought inside sRGB by lowering its OKLCH chroma, CSS Color 4’s method, so the hue and lightness hold.The difference needs the screen. On an sRGB screen both swatches look alike; on a P3 screen the left one is richer.
@media (color-gamut: p3)tells you which screen you have.
Browser support
Where it runs
First version of each browser with the feature, from the web-features project and MDN’s browser-compat-data. “No” means not supported yet.
- color()Widely availableBaseline widely available since 9 November 2025.
- color-gamutWidely availableBaseline widely available since 14 August 2025.
| Browser | color() | color-gamut |
|---|---|---|
| Chrome | 111 | 58 |
| Chrome for Android | 111 | 58 |
| Edge | 111 | 79 |
| Firefox | 113 | 110 |
| Firefox for Android | 113 | 110 |
| Safari | 15 | 10 |
| Safari on iOS | 15 | 10 |
Support reviewed on against web-features 98723fd and browser-compat-data 3b28abe.
Tested
Tested in three engines
| Engine | Version | Supported | As written | Fallback |
|---|---|---|---|---|
| Chromium | 147.0.7727.15 | Yes | Pass | Pass |
| Firefox | 148.0.2 | Yes | Pass | Pass |
| WebKit | 26.4 | Yes | Pass | Pass |
Run on in Chromium 147.0.7727.15, Firefox 148.0.2 and WebKit 26.4, with Playwright.
Accessibility
Measured, not assumed
The P3 color has an OKLCH chroma of 0.299; its sRGB fallback 0.233. The black labels measure 6.37:1 on the fallback, the color every screen can show.
References
Go to the source
- CSS Color Module Level 4: display-p3www.w3.org
- CSS Color Module Level 4: gamut mappingwww.w3.org
- Media Queries Level 4: color-gamutwww.w3.org
- web-features at 98723fdgithub.com
- MDN browser-compat-data at 3b28abegithub.com