Gamut

Every colour, laid out flat

Which colors can be displayed by your screen? Well, it depends, obviously monitors from 20 years ago weren’t as capable as modern ones. The CIE chromaticity chart is often used to visualize a monitor’s gamut, which is the range of colours it can display.

Since colors are 3d and this chart is 2d, it’s necessarily a simplification of the full gamut. The CIE are nerds though and have thought about this carefully — the chart basically shows hues and saturations, but not brightness.

Along the curved edge sit the spectral colours, or the pure wavelengths of light. The dashed line at the bottom represents the non-spectral “impossible” colours like pink and purple. Colours outside the horseshoe don’t exist in reality.

Keep in mind that your screen cannot show all colours that your eye can see, so the image above is doubly limited: first by the 2d projection, and second by your monitor.

sRGB

sRGB used to be the gold standard for monitors, defining the range of colours that most screens should be able to display. If you’re the kind of nerd that reads monitor spec sheets, you’ll have seen statements like “90% sRGB coverage” or similar.

But as you see, compared to human vision, there is still a significant portion of colours that sRGB cannot represent. sRGB was specified in 1996 and it has taken until recently for monitors to consistently cover it fully or even exceed it!

Especially the greens! Human eyes are really good at green.

P3 and Rec.2020 gamuts

P3 and Rec.2020 are wider-gamut colour spaces, and P3 monitors are becoming pretty common, I think especially on Apple devices and HDR TVs. After a quick google search I found a single monitor (HKC 32U165) that claims to cover 99% of the Rec.2020 gamut, but that’s not even out yet.

P3 in CSS

sRGB is so prevalent that it’s actually kind of a problem. Your web browser assumes that color: #00FF00 is in sRGB, and since many programmers don’t know about gamut, your fancy wide-gamut monitor is often stuck displaying dull sRGB websites even though it could do better.

Though in all fairness, maybe it’s a reasonable default. If “#00FF00” meant “the greenest green your display can show”, then programmers coding websites on sRGB monitors might create something bad looking when viewed on wide-gamut displays.

Either case, CSS recently got support for colour spaces beyond sRGB via the color() function, in around 2023:

.p3 {
  color: rgb(0 255 0); /* graceful fallback */
  color: color(display-p3 0 1 0); /* wide-gamut green */
}
.rec2020 {
  color: color(rec2020 0 1 0); /* like ultra green */
}

Gamut and OKLCH

Our favourite color space OKLCH can display colors in any gamut. Remember the “max safe chroma” line that you’re not supposed to cross, otherwise your monitor will clip the color to the nearest one it can show?

Well, wide-gamut monitors that can show more colors will simply not clip as aggressively; and when specifying oklch colors in CSS, you don’t need to provide a gamut explicitly.

.oklch {
  color: oklch(0.7 0.5 120);
}

Actually, when your browser has to clip any color in any color space to something your monitor can represent, the CSS standard specifies that calculations should happen in oklch so the clipped colors render faithfully. Basically, convert color to oklch, reduce chroma, convert back to whatever you were using.