Color Gamut Visualizer

Coverage is the part of a reference triangle that sits inside the one you're checking. It can't pass 100%, since a screen can't show more than all of a standard. Area ignores where the triangles sit and only compares their size, so it can pass 100% and it can flatter a triangle that points the wrong way.

The two split when the shapes differ. Adobe RGB covers 87.8% of DCI-P3, even though its area is 99.4% of P3's in CIE 1931 xy. When one triangle holds the other, area runs past 100%: DCI-P3 covers 100% of sRGB, with 135.7% of its area. The coverage vs area guide shows how spec sheets use each one.

CIE 1931 xy is the chart most spec sheets and standards use, and it's the one primaries are written in. It gives greens far more room than the eye needs to tell them apart, so a green corner that moves a long way on it doesn't look that different.

CIE 1976 u'v' rescales the same chart to space colors more evenly. Greens shrink, while blues and reds spread out. sRGB covers 73.7% of DCI-P3 in xy and 79.6% in u'v'. Neither number is wrong, but two numbers from different charts don't compare. The xy vs u'v' guide goes through why.

Reviews that measure color list the xy corners they found, often next to the coverage numbers. Those are the best figures to enter, since they come from the panel itself.

Every monitor also sends its primaries in its EDID, the block of data it gives the computer over the cable. They're the maker's figures, often design targets, and some monitors list sRGB's corners whatever the panel does. On Linux, edid-decode reads the EDID file under /sys/class/drm and prints them under Color Characteristics. Treat them as a rough guide.

A spec sheet usually gives only percentages. Enter those under Coverage numbers. Many triangles give the same percentage, so the tool shows them as bars, not a shape.

Most of what you see on a computer is made in sRGB: web pages, apps, SDR games and video. A wide gamut monitor only helps with content made for it, like HDR movies and games, phone photos in Display P3, and print work in Adobe RGB.

When nothing maps sRGB content to the wider range, the monitor stretches it out to its own corners, and faces and grass look too strong. A good sRGB mode on the monitor, or color management in the system, fixes that. The oversaturation guide covers the fixes.

The Your screen section asks your browser which range your screen covers, with the CSS color-gamut media query. It answers sRGB, P3 or Rec. 2020 based on what the system says about the display, not a measurement. It's a quick check that wide color is on, not a coverage number.

The swatches under it ask for full red and full green in sRGB, DCI-P3, Adobe RGB and Rec. 2020. On a wide gamut screen the ones to the right of sRGB look deeper. On an sRGB screen they look about the same, since the browser maps each one to the nearest color the screen has.