sRGB vs Display P3 vs Rec.2020: Three Color Spaces, One Web

Three color spaces dominate digital work right now, and each one is a "container" - a defined volume of all the colors a system can represent. Knowing which one you are working in changes which colors are even possible.

sRGB (1996)

The grandfather. Defined jointly by HP and Microsoft for CRT monitors and the early web. Its color volume is small by modern standards - roughly 35% of human-visible colors. Almost every JPEG, PNG and CSS color you have ever shipped lives in sRGB.

Strengths: universal support, predictable rendering, the safe assumption when you do not know what the destination is.

Limits: the reds, greens and oranges are noticeably "less alive" than what modern panels can actually display.

Display P3 (2015)

Apple's adaptation of cinema's DCI-P3 for everyday screens. About 25% larger than sRGB, with the extra room mostly in red and green. Every iPhone since the 7, every MacBook since 2016, most flagship Androids and most modern monitors over $400 ship P3 panels.

Strengths: ship today via color(display-p3 ...) or out-of-gamut OKLCH; graceful sRGB fallback for older devices.

Limits: no current browser will render P3 colors on an sRGB display - they get clipped. You design twice in your head.

Rec.2020 (2012)

UHD broadcast standard. Roughly 75% of human vision - more than double sRGB. Almost no current consumer display can show all of it; OLED TVs cover ~80% of the volume, the best monitors cover ~60%.

Strengths: future-proofing. CSS Color 4 supports it via color(rec2020 ...).

Limits: today, Rec.2020 colors get tone-mapped down to whatever the display can show. Use it for hero accents you might re-master in five years, not for production tokens today.

The "media independent" sibling: OKLCH

Worth noting: OKLCH is not a gamut, it is a perceptual coordinate system. oklch(0.7 0.4 25) describes a color independent of which container it lives in - the browser maps it into sRGB, P3 or Rec.2020 depending on the destination. This is why OKLCH is the right primary format for a future-proof design system.

Practical decision tree

Body text, neutrals, dashboards. sRGB. Saturation gain you do not need.

Brand accents on consumer products. P3 with sRGB fallback. Real-world payoff today.

Hero gradients, video, photography. P3 minimum; pre-master in Rec.2020 if budget allows.

Anything that has to look identical across stakeholders. sRGB. Wide-gamut colors look different on different machines.

Audit which of your palette colors fit which container in our Display P3 tool - it shows the in-gamut / out-of-gamut split and emits the progressive-enhancement CSS for you.