Color gamut

Draw every colour a person can see as a horseshoe and any real device covers a triangle inside it, with its three primaries at the corners. That triangle is the gamut. sRGB, the triangle the web assumed for twenty years, reaches about a third of the horseshoe. Display P3 is the same shape pushed out in the reds and greens, and Rec. 2020 further still. A colour space has a gamut because its primaries are fixed; a monitor has a gamut because its backlight and filters are. The two are separate questions, and a value only appears on screen when both answer yes.

CSS can name colours outside sRGB directly. color(display-p3 1 0 0) addresses that space’s red corner, color(rec2020 ...) a wider one, and oklch() will happily accept a chroma no display can reach because it is not bounded by any device at all. What happens next is gamut mapping: rather than failing, the browser brings the colour back inside the range it can show, holding hue and lightness as far as it can and giving up chroma first. The result is a real colour, just not the one that was written, and two screens can disagree about it.

Asking before writing is the polite version. @media (color-gamut: p3) is true when the display can show roughly the P3 triangle, so the usual shape is an sRGB value stated plainly and a wider one layered over it inside the query, which also covers browsers that never heard of the feature. @supports (color: color(display-p3 1 0 0)) answers the other half of the question, whether the engine can parse the syntax at all, and the two are often paired.

The discipline is to treat wide gamut as decoration, never as information. A status that is only distinguishable as a more vivid red on a good laptop is broken everywhere else, and a contrast ratio calculated on the value you wrote is not the one the reader gets after mapping. Spend the extra range on things that are allowed to be merely nicer: a saturated accent, a brand red that finally looks like the printed one, a gradient with more room in the middle. Everything load bearing stays inside the triangle every reader has.