Colour spaces for the web: sRGB, DCI-P3, Rec.2020, gamma, and why the same hex looks different on two screens
What a colour space is: primaries, gamut, and the reference white
A colour space defines three things: a set of primary colours, a reference white point, and a transfer function. The primary colours are specified as precise chromaticity coordinates on the CIE 1931 xy chromaticity diagram — a two-dimensional map of all colours visible to a standard human observer. The three primaries form a triangle on that diagram. Every colour inside the triangle can be reproduced by mixing those primaries in varying proportions; colours outside cannot. This triangle is the colour gamut of the space.
The reference white is the colour that appears when all three primaries are driven at full intensity. For most consumer and web standards this is D65, a standard illuminant that models average daylight at approximately 6500 K colour temperature. Two displays with identical gamut primaries but different white points will render neutral grey differently. When a web browser interprets the CSS value #808080, it assumes sRGB with a D65 white point, and it assumes your display matches that assumption.
sRGB: the web's universal baseline, standardised in 1996
sRGB was defined in 1996 by the International Electrotechnical Commission as IEC 61966-2-1. It was designed to match the characteristics of a typical consumer CRT monitor of the mid-1990s. Its red primary sits at CIE xy coordinates approximately (0.64, 0.33), green at (0.30, 0.60), and blue at (0.15, 0.06). The resulting gamut triangle covers roughly 35% of the colours visible to a standard human observer as mapped by the CIE 1931 chromaticity diagram.
Every CSS hex colour, every PNG or JPEG without an embedded ICC profile, and every HTML canvas pixel is implicitly in sRGB. Web browsers assume sRGB unless told otherwise. The practical limit shows at the edges of the gamut: highly saturated reds, vivid greens, and pure cyans cannot be fully represented. A ripe tomato photographed outdoors often has a red that falls outside sRGB; the image file clips that red to the nearest representable sRGB value, causing the colour to appear slightly less vivid on screen than in person.
DCI-P3: a cinema standard adopted by consumer displays
DCI-P3 originated with the Digital Cinema Initiatives consortium. Its primaries are shifted compared to sRGB: the red primary moves slightly toward orange (xy approximately 0.680, 0.320) and green extends further toward pure green (0.265, 0.690). The resulting gamut covers approximately 45.5% of the CIE 1931 chromaticity diagram — about 26% more area than sRGB. This wider gamut was designed so that digital cinema projectors could reproduce saturated colours comparable to analogue film.
Consumer displays began incorporating P3 primaries around 2015, when Apple introduced P3-capable panels in the 27-inch iMac, followed by iPhone 7 in 2016. A pixel rendered as #FF0000 on a P3 display using the P3 colour space appears noticeably more saturated than the same value on an sRGB display. CSS exposes P3 through the color() function: color(display-p3 1 0 0) specifies the most saturated P3 red. All major browsers as of 2023 understand this syntax and display the wider gamut on P3-capable hardware, clamping automatically to sRGB on narrower displays.
Rec.2020: the broadcast-future standard and the current display gap
Rec.2020 (formally ITU-R BT.2020) was defined by the International Telecommunication Union in 2012 as a standard for ultra-high-definition television. Its primaries approach monochromatic light: red is defined near 630 nm, green near 532 nm, and blue near 467 nm. The resulting gamut covers approximately 75.8% of the CIE 1931 chromaticity diagram — roughly twice the area of sRGB.
The gap between the standard and practice is significant: no consumer display available in 2025 can reproduce the full Rec.2020 gamut. High-end professional reference monitors can reach approximately 75–80% of Rec.2020 volume when measured in the three-dimensional CIECAM02 colour appearance model. HDR video content is often mastered with Rec.2020 primaries combined with a perceptual quantiser (PQ) or hybrid-log-gamma (HLG) transfer function, but streaming platforms typically deliver the final signal mapped down to Display P3 or sRGB with peak brightness handled by tone mapping.
Gamma and the transfer function: why sRGB encoding is not a pure power law
The phrase 'gamma 2.2' is commonly used to describe sRGB, but sRGB uses a piecewise transfer function rather than a pure power law. The IEC 61966-2-1 standard defines two segments: for very low luminance values (linear C not exceeding 0.0031308) the encoding is linear — C multiplied by 12.92 — and above that threshold it follows a power curve approximately equal to 1.055 times C raised to the power of 1/2.4, minus 0.055. The result closely approximates gamma 2.2 across most of the usable range while avoiding the near-vertical slope a pure power law would have at zero.
This encoding matters in image processing. Downscaling an image by averaging adjacent pixels in the gamma-encoded domain produces a slightly darker result than averaging in linear light — a well-documented artefact sometimes called the gamma-dark-averaging problem. Correct image downscaling linearises the values first, averages them, then re-encodes. CSS gradients and color-mix() blend in sRGB space by default, meaning they interpolate through gamma-compressed values rather than through linear light; CSS Color Level 4 allows specifying the interpolation colour space explicitly with in srgb-linear to override this.
Why the same hex colour looks different on two screens
Several independent factors explain why #FF6600 on one screen looks different from #FF6600 on another. First, if a display has a wider physical gamut (P3 hardware) but lacks colour management from the operating system, it may naively expand sRGB signal values into its wider primary gamut, making all colours appear over-saturated. Second, an uncalibrated display may have a different actual white point, gamma curve, or colour temperature than the sRGB standard assumes. Third, browser colour management support has historically varied: Safari on macOS applies full ICC profile colour management; older versions of other browsers had partial support.
The ICC colour profile embedded in an image, or the display profile applied by calibration software, describes the mapping from that content's encoded colour space to the display's actual measured response. The OS colour management pipeline — ColorSync on macOS, Windows Color System on Windows — performs this conversion for each connected display. Web developers targeting wide-gamut displays can use @media (color-gamut: p3) to supply color(display-p3 ...) values for vivid interface colours while keeping plain hex as the sRGB fallback. The TeaFun colour palette and colour-blindness simulation tools operate in sRGB, the universal safe baseline, so their output is correctly colour-managed to the proper appearance regardless of the display's native gamut.