When you pick #ff0000 in your CSS, you are specifying a color in the sRGB color space. But modern displays (MacBook Pro, iPhone, many Samsung phones) support the P3 color space, which can show approximately 25% more colors than sRGB. This mismatch has practical implications for web designers.
What Is a Color Gamut?
A gamut is the range of colors a color space or display can represent. sRGB is the standard web color space, defined in 1996. Display P3 is Apple's wider gamut, adopted across their devices. Rec. 2020 is even wider, used in HDR video. Each successive gamut adds colors that the previous one cannot represent.
CSS Support for Wide Gamut
Modern CSS supports P3 colors: color: color(display-p3 1 0.3 0.1). These colors can be more vivid than anything representable in sRGB hex. Browsers on P3-capable displays render them at full vibrancy. On sRGB displays, they are mapped to the closest sRGB equivalent.
Should You Use P3 Colors?
For most web projects, sRGB (standard hex codes from PaletteRx) is still the right choice. P3 colors add complexity, require careful fallback management, and the visual difference is subtle for most UI colors. The exception: if your brand's signature color is at the edge of sRGB gamut (very vivid reds, greens, or cyans), P3 can represent a slightly more vivid version.
Practical Impact
The biggest practical impact is not about using P3 in your CSS. It is about understanding that your carefully chosen sRGB blue will look slightly more saturated on a P3 display and slightly less saturated on an older sRGB monitor. Design for the sRGB baseline and let P3 devices add their enhancement naturally.