Color gamut explained: sRGB, Display P3 and out-of-gamut colors
A gamut is the set of colors a screen or color space can show. The web was built on sRGB, but most phones and many laptops now show Display P3, which has noticeably more vivid reds, greens and oranges.
What a gamut is
Every screen mixes red, green and blue light. The purest red, green and blue it can produce mark the corners of a triangle, and every color inside that triangle is in its gamut. Colors outside it simply cannot be shown on that screen.
sRGB, Display P3 and Rec. 2020
sRGB is the default of the web and of most monitors sold before 2016. HEX, rgb() and hsl() all describe sRGB colors.
Display P3 covers about a quarter more colors than sRGB, mostly vivid greens, reds and oranges. iPhones, iPads, Macs and many Android phones and premium laptops use it. In CSS it is written as color(display-p3 r g b) or as an OKLCH value with high chroma.
Rec. 2020 is larger still and is used for HDR video. Very few screens cover it fully.
| Format | Value |
|---|---|
| HEX | |
| Display P3 | |
| OKLCH | |
| Rec. 2020 |
What happens to out-of-gamut colors
If a CSS color is outside the screen gamut, the browser has to show something else. Simple clipping cuts each channel to the limit and can change the hue. CSS Color 4 recommends gamut mapping in OKLCH instead: keep lightness and hue and lower chroma until the color fits.
PickShade marks every color that falls outside sRGB and shows the mapped fallback, so you know exactly what people on older screens will see.
Using P3 colors safely in CSS
Write an sRGB fallback first and the wide-gamut value second, or wrap the vivid value in a color-gamut media query.
CSS
.button {
background: #ff5733;
background: oklch(68% 0.24 33.7);
}
@media (color-gamut: p3) {
.hero {
color: color(display-p3 1 0.3 0.15);
}
}Questions and answers
How do I know if a color is inside sRGB?
Paste it into PickShade. Any color outside sRGB gets a gamut warning together with the nearest color that fits.
Do P3 colors work on Windows?
Yes, if the monitor covers P3 and the browser knows the display profile. On an sRGB screen the browser maps the color into sRGB, so nothing breaks.
Is HEX limited to sRGB?
Yes. HEX, rgb(), hsl() and hwb() always describe sRGB colors. Use oklch() or color(display-p3 ...) for wide-gamut colors.