v144 · css color 4

Precision and gamut

CSS Color 4 attaches a warning to the linear spaces: "to avoid banding artifacts, a higher precision is required for display-p3-linear than for display-p3." Gamma encoding is perceptual compression — throw it away and your bits stop being where your eyes are. This page makes the warning visible, then probes two related contracts: color() components are not clamped at parse time, and your display's actual gamut is queryable.

Ships in Chrome 144. The out-of-range and serialization probes below run the real declarations and show the browser's verbatim answers; on a pre-144 build the display-p3-linear rows report the honest rejection. The banding ramp is a labelled JavaScript illustration of the spec's precision note — it quantizes in script precisely so you can see what the spec is warning about at any bit depth, on any browser.

Why linear needs more bits

JS illustration of the spec's precision note (computed in script, by design)

A dark grey ramp (the shadows, where banding bites first), quantized to the chosen bit depth in gamma-encoded values (top half) versus in linear-light values (bottom half):

black25% grey

color() does not clamp at parse time

Components outside 0–1 are valid color() syntax — they describe out-of-gamut (or plain unphysical) colours and survive to computed value:

not run yet

What can this display actually show?

Linear-light P3 values are only fully displayable on a P3 screen. The color-gamut media feature reports the real hardware, live (it re-evaluates if you drag the window to another monitor):

the API

/* Out-of-range components parse — color() is unclamped: */
CSS.supports("color", "color(display-p3-linear 1.5 -0.2 0)");  // true where supported

/* The display's gamut, as a media query: */
matchMedia("(color-gamut: p3)").matches;

/* The spec's precision note, in numbers: at 8 bits, linear-light has
   only ~13 code values for the darkest 5% of light; gamma has ~55. */

see also