sRGB, Display P3 and Wide Gamut

What a gamut actually is, how much bigger P3 really gets you, and the cases where a wider space makes things worse rather than better.

Short answer: a gamut is the set of colors a device or an encoding can produce, and it is fixed by three things: where the three primaries sit, what counts as white, and how the numbers map to light. sRGB was defined around the displays of the 1990s and became the web's default because something had to be. Display P3 keeps sRGB's white point and tone curve but moves the red and green primaries outward, so it reaches further into saturated reds, oranges and greens, and barely further into blue. Rec.2020 goes further still and almost no consumer display covers it. Bigger is not automatically better; it is better for specific colors and riskier for everything else.

What defines a gamut

Three ingredients, and nothing else.

That last row is why Display P3 is comfortable to work with. Because it shares the white point and the tone response, the only thing that changes is the reach of the primaries. A P3 file and an sRGB file with the same numbers are not the same color, but the relationship between them is a simple one.

The spaces you actually meet

How much of the real world does sRGB miss

The useful reference point here is not another display standard but a survey of actual surfaces. In 1980 Michael Pointer analysed the color coordinates of over four thousand real surface samples and derived a maximum gamut for real surface colors. That gamut is the honest benchmark, because it describes the colors that physical objects have rather than the colors an engineer chose to support.

The finding that matters for practice is that a meaningful part of it sits outside sRGB, concentrated in saturated yellows, oranges, reds and some greens. Photographs of flowers, fruit, painted metal and printed inks routinely contain colors sRGB cannot hold. That is the real argument for a wider space, and it is a much better argument than "the numbers are bigger".

What happens to a color that does not fit

Something has to give, and the choices differ in quality.

Clipping pushes the out of range value to the nearest point on the boundary. It is fast and it destroys detail: several distinct saturated reds all become the same red, and the texture in a petal turns into a flat shape.

Gamut mapping compresses the whole range so that relationships between colors survive, at the cost of shifting colors that would have fitted. The CIE published guidelines for evaluating these algorithms precisely because everyone was solving the problem differently and there was no agreed way to compare results.

Which one you get depends on the software, the rendering intent chosen and whether anything in the chain knows what space the numbers were in. That last condition is the one that fails, and the details are on color management and ICC profiles.

Using wider gamuts on the web

CSS Color Module Level 4 defines a color() function that addresses predefined spaces directly, including display-p3, rec2020, prophoto-rgb, a98-rgb and the CIE XYZ spaces. Media Queries Level 5 adds a color-gamut feature so a stylesheet can ask what the display can approximately reproduce.

The safe pattern is progressive enhancement rather than replacement. Declare the sRGB value first, then the wider one, and let browsers that do not understand the second keep the first. The wider declaration should be a better version of the same color, not a different design decision, so that the two audiences get the same page rather than two pages.

Two cautions. Do not use the extra reach for text or interface chrome, because the accessibility contrast ratio is computed on relative luminance and a more saturated color is not automatically a more readable one; that argument is on color contrast and accessibility. And remember that a coordinate in OKLCH is not clamped to any gamut at all, so it is entirely possible to write a chroma that nothing can display and never notice on your own screen.

The trap that catches everyone

A wide gamut image with no embedded profile is a loaded gun. The numbers are P3 numbers; every consumer that meets them assumes sRGB, because that is the near universal default; and the result is oversaturated color that looks like a stylistic choice rather than a bug. Screenshots are the usual vector, since a screenshot captures device values and drops the description of what they meant.

The fix is unglamorous. Embed profiles rather than stripping them. Check wide gamut work on an sRGB display before shipping it, not after. And treat any color you sampled with a screen picker as a device number until you know which space it came from.

Does any of this matter for your project

Photography and video: yes. Real scenes contain colors sRGB clips, and the difference is visible.

Brand and illustration: sometimes. A saturated brand red can be noticeably more vivid in P3, which is a real gain if the fallback is handled.

Interface, text and data visualization: mostly no. These live in the middle of the gamut where nothing is clipping, and the extra reach buys you saturation you probably should not be using anyway. For charts, the constraints that matter are the ones on palettes for data visualization.

The connection to the games

Here is the sharp version of gamut clipping, and you can see it. Two saturated shades that are genuinely different in a wide gamut can clip to the same sRGB value on a narrower display. At that point they are not merely hard to tell apart; they are the same color, and no amount of looking will separate them.

Hueddle is the game that exposes this. It shows a field of shades with one different, and asks you to find it. Play it on a wide gamut phone and on an older laptop and the difficulty can differ for reasons that have nothing to do with your eyes. That is worth knowing before you conclude anything about your vision from a score, and it is why we say our games measure you on this screen rather than in the abstract.

Keep reading

• Color management and ICC profiles: how a file says which space it is in.
• Display calibration basics: what your screen is actually doing with the numbers.
• RGB and hex color codes: the notation all of this is written in.

Sources: W3C, CSS Color Module Level 4, predefined color spaces; W3C, Media Queries Level 5; W3C, A Standard Default Color Space for the Internet: sRGB; Pointer, M. R. (1980), The gamut of real surface colours, Color Research & Application 5(3), 145; Bertalmío, M. (2020), Colour representation and colour gamuts, in Vision Models for High Dynamic Range and Wide Colour Gamut Imaging, 131; International Commission on Illumination, CIE 156:2004, Guidelines for the evaluation of gamut mapping algorithms; International Commission on Illumination, CIE 015:2018 Colorimetry, 4th edition; International Organization for Standardization, ISO 15076-1:2010, Image technology colour management, Part 1.