Color spaces: sRGB, Display P3, Rec.2020

A color space defines what colors a system can represent and how it encodes them as numbers. For 25 years the web had one universal answer (sRGB) and you didn’t need to think about it. That changed. Modern hardware can show colors sRGB can’t describe, and CSS finally has the syntax to ask for them.

Three names cover almost every conversation about web and UI color today: sRGB, the 1996 baseline that every browser, every monitor, and every web image inherits; Display P3, the wider gamut Apple shipped on the iPhone 7 in 2016 and that almost every modern phone, recent Mac, and OLED laptop now supports; and Rec.2020, the broadcast spec for HDR cinema and television that no consumer display covers fully but which sets the ceiling ambition. They nest: sRGB ⊂ P3 ⊂ Rec.2020. This entry is about what that nesting actually means and when it changes a decision you’d make.

What a color space actually is

A color space is three things stapled together. The first is a gamut: the volume of colors the system can represent, defined by the chromaticities of three primary colors plus a white point. Plot the primaries on the CIE 1931 chromaticity diagram and the gamut is the triangle they bound. Anything outside that triangle is unreachable; anything inside is fair game.

The second is a transfer curve: the function that maps numeric values to actual emitted light. sRGB’s transfer curve is roughly a 2.2 gamma; the human eye is more sensitive to changes in the dark end than the light end, and the curve compresses the encoding to spend more of the 8-bit budget where the eye can actually see the difference. Without a transfer curve, banding appears in dark gradients while wasted precision sits in the highlights.

The third is a white point: what triplet of numbers represents “white,” expressed as a chromaticity coordinate. The web standard is D65 (a standard daylight illuminant at ~6500K, drawn from the CIE 1931 work and used by sRGB, Display P3, and Rec.2020 alike). Print uses D50. Old broadcast television used various points. Mismatched white points are why a photo color-corrected on a daylight-balanced monitor can look subtly off when posted to a site rendered on a tungsten-balanced one. The white drift propagates into every color.

Two related terms get used loosely. A color space is the full triple (gamut + transfer curve + white point); a gamut is just the volume of representable colors. A space defines what numbers mean; a gamut tells you which colors are actually inside it. sRGB has the same gamut as Rec.709 (HD broadcast) but a different transfer curve. They are different spaces sharing one gamut, and most of the time you can convert between them by transfer-curve adjustment alone.

sRGB: the 1996 ceiling that became a floor

Hewlett-Packard and Microsoft proposed sRGB in 1996 (codified as IEC 61966-2-1 in 1999) as a least-common-denominator color space for the web: bound the gamut to what consumer CRT monitors of the era could actually display, define a transfer curve that worked across hardware, and stop arguing about color management at the per-app level. It worked. For a quarter-century “just send sRGB” was the right answer for nearly every web pipeline.

sRGB’s primaries match the BT.709 standard for HD television (1990): a red around (0.640, 0.330) on the CIE diagram, a green at (0.300, 0.600), a blue at (0.150, 0.060). The triangle they bound covers roughly 35% of human-visible chromaticities. That sounds small, and it is, but the missing 65% includes a lot of saturated colors human eyes can perceive but typical CRT and early LCD phosphors couldn’t reproduce. sRGB was bounded by what the hardware could do, not by the human eye.

What sRGB cannot reach: the most saturated greens, the deepest cyans, several of the brighter reds, and almost all of the printed-magenta range. If you’ve ever taken a vivid photo on an iPhone and watched it go flat when uploaded to a site that strips P3 metadata, sRGB’s ceiling is what you saw imposed.

Display P3: the modern practical target

Apple introduced Display P3 with the iMac (Late 2015) and the iPhone 7 in 2016 as a consumer-friendly variant of the DCI-P3 gamut used by digital cinema (SMPTE EG 432-1, 2010). Display P3 keeps DCI-P3’s wider primaries (red at (0.680, 0.320), green at (0.265, 0.690), blue at (0.150, 0.060)) but uses the sRGB transfer curve and the D65 white point. The result is a deliberately seamless upgrade for anyone already shipping sRGB content. Files don’t look broken; they just have more headroom.

Display P3 covers roughly 45% of human-visible chromaticities, about 30% more volume than sRGB. The biggest gains are in the saturated reds, oranges, and greens. Apple’s “wide-color” UI tokens and the photographic warmth most people associate with iPhone photos live in the volume between sRGB and P3. Every recent iPhone, iPad, MacBook, iMac, and Apple Studio Display ships with P3-capable hardware and color-managed defaults; recent OLED Windows laptops, most flagship Android phones, and many modern external monitors support P3 too.

Critical caveat: support is not certainty. A display that reports P3 capability via (color-gamut: p3)is one thing; a display profiled accurately to P3 is another. Many cheaper monitors that advertise “wide gamut” cover only ~80% of P3 and still get away with the label. Treat P3 as a target, not a guarantee.

Rec.2020: the HDR cinema spec

ITU-R BT.2020 (2012, with HDR additions in BT.2100, 2018) is the spec for ultra-high-definition broadcast and HDR streaming. The primaries push out to monochromatic wavelengths: a red at 630nm, a green at 532nm, a blue at 467nm. The triangle covers roughly 75% of human-visible chromaticities, a dramatic step up from P3.

The catch: almost no consumer display can render Rec.2020 fully. Reaching those primaries requires emitters whose light is nearly monochromatic, which current LCD and OLED panels can’t produce. Top-tier reference monitors and emerging laser-projector cinema systems get close; phones and laptops cover roughly 70–80% of Rec.2020 on their best days. Rec.2020 is a target the industry is building toward, not a practical render destination today.

For web work, Rec.2020 mostly matters as the gamut HDR video is mastered in. CSS Color 4 lets you write color(rec2020 …), but the browser will gamut-map down to whatever the display actually supports, typically P3 or sRGB. The numbers are valid; the result depends on the hardware. For practical UI work today, Display P3 is the ceiling worth designing for.

The CIE 1931 chromaticity diagram

Almost every color-space comparison eventually shows the same horseshoe-shaped chart: a curved outer boundary representing spectral colors (the rainbow) closed off at the bottom by the line of non-spectral purples, with gamut triangles inscribed inside it. That’s the CIE 1931 chromaticity diagram, distilled from color-matching experiments by W. David Wright and John Guild in the late 1920s and adopted by the Commission internationale de l’éclairage in 1931.

What the chart shows is which chromaticities a healthy human eye can perceive: every visible color, projected onto a 2D plane that strips out brightness. The horseshoe shape comes from the wavelengths of pure spectral light arranged around the curve, with non-spectral purples (which no single wavelength produces, as covered in the color theory entry) closing the bottom edge. Gamut triangles get drawn on this chart so the relative coverage is legible at a glance: sRGB is small, P3 is bigger, Rec.2020 is bigger still, and even Rec.2020 leaves the saturated edges of the horseshoe untouched.

A separate metric called Pointer’s gamut (Pointer 1980) plots the chromaticities of real-world surface colors: the saturated greens of leaves, the vivid reds of flowers, the deep cyans of tropical water. It’s a smaller, irregular shape that fits well inside Rec.2020 and mostly inside P3, but pokes outside sRGB at the edges. If a gamut covers Pointer’s gamut, it can render every color the eye routinely encounters in nature. P3 nearly covers it; sRGB doesn’t.

CSS Color 4: how to target wider gamuts in code

Until 2022 the web’s color syntax assumed sRGB. Hex, rgb(), hsl() all produced sRGB-clipped output regardless of how saturated you wanted to go. CSS Color 4 (W3C, candidate recommendation 2024) added direct gamut targeting:

• oklch(L C H): perceptual coordinates; the browser gamut-maps to whatever the display supports. The most flexible way to ship a color today.
• color(display-p3 r g b): explicit Display P3 coordinates. Useful when you have a P3-native asset (a camera RAW, a designer’s P3 swatch) and want it rendered without conversion.
• color(rec2020 r g b): Rec.2020. Will gamut-map down to P3 or sRGB on most consumer displays, but the encoding is honest.
• color-mix(in oklch, …): mixing in a perceptual space. Mixing two saturated colors in sRGB produces a muddy intermediate (because RGB primaries combine unpredictably); mixing the same two in OKLCH produces a predictable midpoint along the perceptual axes.

For most application code, prefer oklch(). Authoring in a perceptual space and letting the browser handle gamut mapping is the path that survives the longest as displays improve. Your code already targets “the best gamut the device can show” without naming a specific one.

Practical guidance: when wider matters

Most landing-page UI work doesn’t need to think about gamut beyond “use OKLCH and you’ll be fine.” The places where the choice actually matters:

• Photography and brand imagery. Photos shot on modern phones are P3-tagged. Strip the metadata or re-encode to sRGB and the saturated reds/greens flatten visibly on wide-gamut displays. If your product depends on warm, vivid imagery, ship the original P3 file with its color profile intact.
• Brand colors that push the edge of sRGB. A brand red at oklch(0.65 0.32 25) sits right at the sRGB ceiling for that hue. On sRGB displays it renders fully; on P3 displays it can render with more saturation if authored in oklch()rather than locked to a hex. Designers chasing “Apple-grade” brand vibrancy on web pages are usually authoring in P3 OKLCH.
• Illustrations and gradients. Wide-gamut gradients render with smoother transitions because the color volume is bigger; the same gradient compressed into sRGB can show banding at the saturated end.

Where gamut isn’t the bottleneck:

• Body text, neutral surfaces, low-chroma palette decisions. Almost everything inside ~0.1 chroma stays well inside sRGB regardless of hue, so the gamut question is irrelevant.
• Accessibility contrast checks. WCAG runs on relative luminance, which is gamut-independent. Wider gamuts don’t change whether your CTA passes 4.5:1.
• Print prep. Print uses CMYK and a much smaller gamut than even sRGB; designing for P3 and then sending to a printer almost always means manual gamut compression at the handoff.

Fallback strategy: write modern, fall back gracefully. oklch()degrades cleanly in browsers that don’t support it (with a hex fallback). Browser support is now broad enough (every evergreen browser since late 2023) that for new work the fallback is mostly a footnote rather than a primary concern.