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

How to read a CIE chromaticity diagram

By TechCompare · Updated · How we check

The curved edge is pure light of one wavelength, and every color people can see sits inside it. A display standard is a triangle, since its colors are mixes of three primaries. The white point in the middle is where the three mix to white.

Calculator

CIE 1931 xy chart with sRGB, DCI-P3, Adobe RGB, Rec. 2020The 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.
  • sRGB (BT.709): The web, most apps and SDR video. BT.709, the HDTV standard, has the same primaries.
  • DCI-P3 (Display P3): Wide color monitors, phones and HDR movies. Display P3 is the same triangle with a D65 white.
  • Adobe RGB: Photo editing and print. It reaches further into green and cyan than DCI-P3.
  • Rec. 2020 (BT.2020): The range HDR10, HLG and Dolby Vision carry. Monitors today cover only part of it.
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

The CIE 1931 chromaticity diagram is the horseshoe shape behind every color gamut chart. It maps hue and saturation with brightness left out, so each point stands for one color at any brightness. This page draws it with sRGB, DCI-P3, Adobe RGB and Rec. 2020 as outlines. Here's how to read each part.

Topic
How to read a CIE chart
The chart itself
On the chart
sRGB, DCI-P3, Adobe RGB, Rec. 2020
CIE 1931 xy

How this is calculated

The axes aren't hue or saturation. x and y are ratios worked out from the CIE's XYZ color values, which come from color matching tests on people. You rarely need them, except to place a primary.

The curved edge is the spectral locus: light of a single wavelength, marked in nanometers from violet at the bottom left, through green at the top, to red at the bottom right. The straight line across the bottom joins the two ends. It holds the purples and magentas, which no single wavelength makes.

Colors get paler toward the middle. White sits near x 0.313, y 0.329, the D65 point most standards use. A line from white out to the edge runs through roughly one hue, from pale to pure.

The fill colors are an illustration. Your screen can't show the real colors near the edge, so it shows the nearest ones it can.

Verdict

Read a gamut chart by its corners. The closer a standard's corner sits to the edge, the deeper that primary. Then compare shapes, not just sizes, since two triangles of the same area can hold different colors. And remember the chart leaves out brightness.

More Color Gamut Visualizer scenarios

sRGB vs DCI-P3
DCI-P3 holds all of sRGB and reaches further into red and green. Here's how big the gap is, and when it matters.
View details
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

Related guides

HSL explained
Hue, saturation and lightness for picking colors.
View guide
OKLCH in CSS
A color space built around how people see.
View guide

Frequently asked questions

Why is the CIE chart shaped like a horseshoe?
Its edge traces pure light from violet through green to red, and the eye responds to each wavelength in a different mix. Plotted on x and y, those mixes curve around into a horseshoe. The straight bottom edge closes it with the purples.
Why is there so much green on the chart?
The xy chart gives greens far more room than the eye needs to tell them apart. The CIE 1976 u'v' chart spaces colors more evenly and shrinks the green part.
What colors are outside the horseshoe?
None that people can see. Points outside it are math, not colors. Some editing color spaces, like ProPhoto RGB, put a primary out there so their triangle holds more real colors.

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