TechCompare LogoTechCompare
Showing centimeters. Press to switch to inches.Showing inches. Press to switch to centimeters.

sRGB vs DCI-P3: how much further the P3 range reaches

By TechCompare · Updated · How we check

DCI-P3 covers 100% of sRGB, and in CIE 1931 xy its triangle is 135.7% the size of sRGB's. Turn it around and sRGB covers 73.7% of DCI-P3. The rest is deep red, orange and green that only a wide color screen can show.

Calculator

CIE 1931 xy chart with sRGB and DCI-P3The curved outline holds every color people can see, with wavelengths in nanometers along its edge. Each standard is a triangle of its red, green and blue primaries. A larger triangle holds more saturated colors.
  • DCI-P3, the solid line
  • sRGB (BT.709): The web, most apps and SDR video. BT.709, the HDTV standard, has the same primaries.
DCI-P3 against each reference, in CIE 1931 xy
ReferenceCoverageArea
sRGB100.0%135.7%

Coverage is the part of the reference inside the triangle, so it stops at 100%. Area is the triangle's size next to the reference, and it can pass 100%. Spec sheets don't always say which one they print.

Open this chart in the Color Gamut Visualizer. Check any standard, enter a monitor's primaries or spec sheet numbers, and switch between CIE 1931 xy and u'v'.
Edit in the full tool

sRGB is the color range of the web, most apps and SDR video. DCI-P3 is the range most wide color monitors, phones and laptops aim for. Both share the same blue, but P3's red and green corners sit further out. The chart fills DCI-P3 and draws sRGB's outline inside it, and the table puts numbers on the gap.

Topic
sRGB vs DCI-P3
Web vs wide color
On the chart
sRGB, DCI-P3
CIE 1931 xy

How this is calculated

A color range, or gamut, is set by three primaries: the deepest red, green and blue a standard allows. Every color in the standard is a mix of those three, so on the chart it sits inside their triangle.

sRGB and DCI-P3 share one corner, blue at x 0.150, y 0.060. P3 moves red from 0.640, 0.330 out to 0.680, 0.320, and green from 0.300, 0.600 up to 0.265, 0.690. The green move looks like the big one, but the CIE 1931 chart stretches greens. Steps there are harder to see than the same distance in blue or red.

The CIE 1976 u'v' chart spaces colors more evenly. On it, P3's area is 125.6% of sRGB's, so the gap looks smaller than the 135.7% the xy chart gives. Both are fair numbers. They just measure on different maps.

You only see the extra range in content made for it: HDR movies and games, photos from phones that shoot in Display P3, and web pages that use CSS display-p3 colors. Everything else is sRGB and uses the inner triangle.

Verdict

Pick a P3 monitor if you watch HDR, edit photos from a phone or design for P3 screens. For office work and SDR games, sRGB is the range the content uses, so a good sRGB mode is worth more than extra range. A P3 screen without a working sRGB mode can make SDR look too strong.

More Color Gamut Visualizer scenarios

DCI-P3 vs Adobe RGB
Two wide ranges of about the same size, pointed different ways. P3 reaches further into red, Adobe RGB into green and cyan.
View details
sRGB vs Adobe RGB
Adobe RGB keeps sRGB's red and blue and moves green far out. Here's what that adds for photos and print.
View details
DCI-P3 vs Rec. 2020
Rec. 2020 is the range HDR video is stored in. DCI-P3 is what screens actually reach. Here's the gap between them.
View details

Related guides

OLED vs QD-OLED
How quantum dots widen the color range.
View guide
OKLCH in CSS
Pick web colors past sRGB.
View guide
Why the same hex looks different
Same numbers, different light on each screen.
View guide

Frequently asked questions

Is DCI-P3 better than sRGB?
It's bigger, not better on its own. A P3 screen can show colors sRGB can't, but only content made for P3 uses them. For sRGB content, accuracy inside sRGB is what counts.
How much of DCI-P3 does an sRGB monitor cover?
One that matches sRGB exactly covers 73.7% of DCI-P3 in CIE 1931 xy, and 79.6% in CIE 1976 u'v'. Real monitors don't land exactly on sRGB, so their numbers differ a bit.
Can my browser show P3 colors?
Safari, Chrome and Edge show CSS colors written as color(display-p3 ...) on a P3 screen. On an sRGB screen the browser maps them to the nearest color the screen has, so the page still works.

Related tools

HDR Label Decoder

See what each DisplayHDR tier asks for, which backlight it needs, what HDR10, Dolby Vision and HLG mean, and which tiers a review's numbers meet.

Use tool

Color Picker

Pick colors, convert between HEX, RGB, HSL, HSV, OKLCH and CMYK, and find the nearest CSS and Tailwind color.

Use tool

Monitor Test

Guided full screen patterns for dead pixels, backlight bleed, uniformity, banding, sharpness and motion trails, with tips for each one.

Use tool