sRGB, Display P3 and HDR: What Your Screen Can Show
Three numbers decide which colors and how much brightness a screen can show: its color gamut, its bit depth and its dynamic range. Spec sheets turn them into labels like “100% sRGB”, “DCI-P3”, “10-bit” and “HDR400”, and the labels mean less than they seem to. This guide explains each one, and starts with what your own browser says about the screen you are reading this on.
What this screen reports
These values come from your browser, read on this page and sent nowhere. They describe what the browser believes the display can do, which is not always what the panel can do; the sections below explain the gaps.
| Property | This screen |
|---|---|
Color gamut (color-gamut media query) | needs JavaScript |
Color depth (screen.colorDepth) | needs JavaScript |
High dynamic range (dynamic-range media query) | needs JavaScript |
| Browser can draw Display P3 colors in CSS | needs JavaScript |
On a wide-gamut screen, in a browser that supports it, each P3 swatch is visibly deeper than the sRGB one beside it. On an sRGB screen they look the same, because the browser clips the P3 color to the nearest one the screen can show. The full device readout, with resolution, pixel ratio and refresh rate, is on the home page.
Color gamut: which colors
Every color on a screen is a mix of three primaries: a red, a green and a blue. The gamut is the set of colors those three can mix, drawn as a triangle on a chart of all the colors people can see. Redder primaries, greener greens and deeper blues make a bigger triangle.
sRGB is the default color space of the web, published in 1996 and standardized as IEC 61966-2-1. It uses the same primaries as HD television (BT.709) and a daylight white point called D65. It was designed around the CRT monitors of the time, with a reference white of 80 cd/m². Unless a page or image says otherwise, browsers assume colors are sRGB.
Display P3 is Apple’s color space for wide-gamut screens: the redder red and greener green of the digital cinema standard DCI-P3, combined with sRGB’s D65 white point and sRGB’s tone curve. Apple uses it for its wide-color screens, and it is the middle answer of the browser query described below.
Rec. 2020 (ITU-R BT.2020) is the color space of ultra-high-definition television, and the container for most HDR video. Its primaries are far more saturated than P3’s.
How much bigger is P3? It depends on how you measure. WebKit’s 2016 announcement of wide color on the web described P3 as about 25% wider than sRGB, comparing the flat triangles on a color chart. The CSS Color 4 specification measures volume, which also counts how light or dark the colors can be, and gives about 0.82 million units for sRGB, 1.23 million for P3 and 2.04 million for Rec. 2020. By that measure P3 is about 50% bigger than sRGB, and Rec. 2020 about two and a half times.
What the browser’s answer means
The color-gamut media query has three answers, and each means “approximately this gamut or more”:
srgb: the screen covers roughly sRGB.p3: it covers roughly Display P3. A laptop advertised as “90% DCI-P3” will usually report this.rec2020: it covers roughly Rec. 2020.
“Approximately” is doing a lot of work. The query tells you which bucket the operating system puts the screen in, not a measured coverage. A screen can report p3 and still be some way short of it, and an external monitor can report srgb if the system has no color profile for it. If the readout says srgb on a screen you know is wide-gamut, check that the operating system is using the right color profile for it, and that your browser is recent: Firefox added the query in version 110, years after Chrome and Safari.
Bit depth: how many steps
Gamut says how far the colors reach. Bit depth says how finely the range is divided.
- 8 bits per channel gives 256 levels each of red, green and blue: about 16.7 million combinations.
- 10 bits per channel gives 1,024 levels each: about 1.07 billion.
More colors matters less than finer steps. With only 256 levels, a slow gradient across a large screen runs out of steps and shows stripes; that is banding, and our gradient test is built to show it. The longer story, including how 8-bit panels fake 10-bit with frame rate control, is in Screen banding explained.
The browser’s screen.colorDepth is a weak guide to any of this. It reports the bits per pixel the system uses for color, so 24 means 8 per channel and 30 means 10. But the specification says a browser that doesn’t know the depth should return 24, and MDN notes that some browsers return 24 for compatibility reasons. A reading of 24 is normal and proves nothing about the panel. A reading of 30 means the system says it is running a 10-bit path.
HDR: how bright, how dark
sRGB assumes a reference white of 80 cd/m²: ordinary content tops out at a fixed white, and the screen’s brightness setting decides how bright that is. High dynamic range keeps a level for ordinary white but leaves room above it for highlights: sunlight on water, a lamp, a fire. The HDR standard for television, ITU-R BT.2100, sets a reference white of 203 cd/m² and defines two ways to encode brightness:
- PQ (perceptual quantizer), which encodes absolute brightness up to 10,000 cd/m². It is the curve behind HDR10 and Dolby Vision.
- HLG (hybrid log-gamma), designed for broadcast, which keeps some compatibility with standard displays.
HDR10, as the US Consumer Electronics Association defined it in 2015, means PQ, 10-bit color and Rec. 2020 primaries, with static metadata giving the content’s brightest pixel and its brightest frame-average level.
No screen reaches 10,000 cd/m². The TV or monitor maps the signal down to what it can do, which is why the same HDR film looks different on different screens.
What “HDR400” means
VESA’s DisplayHDR program certifies monitors in tiers. Under its current rules (CTS 1.2), DisplayHDR 400, the entry tier, requires 400 cd/m² peak on a small patch, a black level of 0.4 cd/m² or lower, 99% of the BT.709 gamut and 90% of DCI-P3, and a 10-bit signal, which the panel may show as 8 bits with dithering. Every higher tier (500, 600, 1000, 1400) requires 95% of DCI-P3. The True Black tiers, aimed at OLED, require black of 0.0005 cd/m² or lower.
DisplayHDR 400 is a real certification, but its numbers are modest: a 400 cd/m² peak over a 0.4 cd/m² black is a contrast of 1,000:1, so there is little headroom for highlights. The higher tiers are where HDR starts to look different.
What the browser’s answer means
The dynamic-range: high media query matches when the browser judges the screen to have high peak brightness, high contrast and more than 8 bits per channel. The specification sets no numbers for any of them, so each browser decides, and answers can differ between browsers. If a screen you know supports HDR reports standard dynamic range, check that HDR is enabled in the system’s display settings, then try another browser.
Can websites use any of this?
Yes, increasingly. CSS can name colors outside sRGB with the color() function, as in color(display-p3 1 0 0); it has been supported in Chrome since version 111, Firefox since 113 and Safari since 15, which is what the swatches above use. A canvas can be created in the Display P3 color space in Chrome and Safari. Photos carry their own color profile, and browsers that manage color show a P3 photo’s extra saturation on a P3 screen.
On an sRGB screen nothing breaks: wide-gamut colors are mapped to the nearest color the screen can show.
What to check on your own screen
- Read the table at the top. If the gamut or HDR answer doesn’t match what the screen should do, check the system’s color profile and HDR setting, and try another browser.
- Look at the swatches. Visibly deeper P3 swatches mean the whole chain, from browser to operating system to panel, is working in wide gamut.
- Run the gradient test in grayscale. A little banding is normal on an 8-bit path; heavy or colored banding points to processing or a low-quality panel.
- Check the basics with the resolution checker, so you know the system is driving the screen at its native resolution, and set black and white levels with the monitor calibration steps before judging color.
None of this replaces a colorimeter. A browser can tell you what the system believes about the screen, not how accurately the panel hits a given color. For that, see Monitor calibration by eye, and when you need a colorimeter.
Sources
- IEC 61966-2-1:1999, Default RGB colour space: sRGB
- Stokes M, Anderson M, Chandrasekar S, Motta R (1996), A Standard Default Color Space for the Internet: sRGB, W3C
- W3C, CSS Color Module Level 4: predefined color spaces and gamut volumes
- ICC, Display P3 color encoding (v1.0)
- ITU-R BT.2020, Parameter values for ultra-high definition television systems
- ITU-R BT.2100, Image parameter values for high dynamic range television
- WebKit, Improving color on the web (2016)
- W3C, Media Queries Level 4: color-gamut
- W3C, Media Queries Level 5: dynamic-range
- W3C, CSSOM View: Screen.colorDepth
- MDN, Screen: colorDepth property
- MDN, color-gamut media feature
- MDN, CSS color() function
- Intel, Enable billions of colors with 10-bit HEVC
- Display Daily (2015), CEA defines HDR-compatible displays (HDR10 Media Profile)
- VESA, DisplayHDR performance criteria (CTS 1.2)