sRGB vs Display P3: Why the Same Colour Looks Different

Display P3 is a colour space with a wider gamut than sRGB: its red, green and blue are more saturated, so it can show vivid colours that sRGB cannot. The numbers 255, 0, 0 are a different red in each. On the web, a plain hex code is always sRGB.

What is a gamut?

A gamut is the range of colours a space, or a screen, can produce. Every RGB space is defined by three primaries, its purest red, green and blue, plus a white point and a curve that maps the numbers to brightness. The colours reachable by mixing those three form a triangle on a chromaticity diagram, and that triangle is the gamut.

sRGB has the smaller triangle. Display P3 is a wider one that contains it, with a more saturated red and green and the same white point. MDN describes the color-gamut media feature the same way: sRGB is contained in P3, which is contained in Rec. 2020. Because the P3 triangle contains the sRGB one, every sRGB colour has a P3 equivalent. The reverse is not true.

Why does the same number look different?

Because #ff0000 does not say "this exact red". It says "full red, in whatever space the surrounding software assumes". Full red in P3 is a more intense red than full red in sRGB. Feed the same three numbers to a screen that interprets them as P3 and to one that interprets them as sRGB, and they come out as two different reds.

The grey axis is the exception. Greys, black and white, where the three channels are equal, look the same in both spaces. The differences concentrate in saturated colours, which is why a pastel or a neutral survives any mix-up and a vivid green or orange does not.

Why does a screenshot from my phone look duller on the web?

One common cause: the screenshot was captured with a P3 profile attached, and somewhere on the way to the web page the profile was dropped. The pixel values are unchanged, but whatever shows them now reads them as sRGB. P3 numbers read as sRGB land on a less saturated colour, so everything looks slightly washed out.

The opposite mistake exists too. A tool that converts to sRGB properly keeps the colour as close as the smaller gamut allows, but the most vivid colours have nowhere to go and are clipped or compressed. A photo with strong greens can look flatter after an export to sRGB even when nothing was wrongly tagged.

I cannot tell you which of these happened to your file. Nobody can from the picture alone. The profile is stored as metadata, and uploaders, messaging apps and some editors rewrite or strip it. If a colour shifted between two places, ask what each step did with the profile. The image side of this, including what else travels inside a photo file, is covered in what EXIF data is and what it reveals.

How do you write a P3 colour in CSS?

With the color() function: color(display-p3 1 0.5 0), three values from 0 to 1. MDN lists it as widely available across browsers since May 2023. You can ask whether the screen can use it with @media (color-gamut: p3).

The safe pattern is a fallback in the cascade. Write the sRGB colour first, then the P3 one, and a browser that does not understand color() ignores the second line:

.badge {
  background: #00c853;
  background: color(display-p3 0 0.8 0.3);
}

A browser that understands the P3 line on a screen that cannot show it maps the colour to the nearest one it can. What you get there depends on the device, so check it on an ordinary sRGB monitor rather than assuming.

When is a wider gamut worth the trouble?

Less often than the marketing suggests. It earns its keep in a few places:

• A brand accent that is saturated. A vivid green, orange or magenta is where sRGB clips, and where a P3 version looks visibly richer on a P3 screen.
• Photography and video thumbnails. Images are the content most likely to hold colours outside sRGB, as long as the file is actually tagged and exported in P3.
• Gradients and glows. Two vivid ends give a wider space more to work with. If your gradient already goes grey in the middle, the cause is the space it is interpolated in, not the gamut.

It earns nothing on body text, borders, backgrounds and anything grey, because the shared grey axis means there is nothing to gain. And it costs you something: a second value to maintain for every colour you widen, and a design that now looks different on two kinds of screen. The same blue will be two blues, and a reviewer on an sRGB laptop will not see what the designer on a P3 display approved.

What does the contrast check use?

The WCAG 2.x contrast formula is written in terms of sRGB values. For a P3-only colour it has no defined answer, so test the sRGB fallback you ship alongside it. The thresholds themselves are in what contrast ratio you need for readable text.

What our colour tools can and cannot do here

Both of them are sRGB-only. The colour converter moves between HEX, RGB and HSL, which are three ways of writing one sRGB colour, and its picker returns a hex value. It does not convert to or from Display P3, and it does not read OKLCH or any other space. The palette generator builds its palettes from an sRGB base and exports hex codes. For a P3 value you have to write the color() line yourself or take it from a design tool that supports the space. Both run entirely in your browser, and nothing you type is uploaded. The choice of format between HEX, RGB, HSL and OKLCH has its own post: which colour format to use.

Last updated October 4, 2026