v144 · css · color

CSS color space display-p3-linear

CSS Color 4 gains a tenth predefined space in Chrome 144: color(display-p3-linear r g b) — the Display P3 primaries with no gamma encoding, so component values are proportional to light. It slots into everything that takes a colour space name: the color() function, color-mix(in display-p3-linear, …), gradient interpolation, and relative color syntax. Its sibling srgb-linear shipped years ago; this completes the linear pair for wide-gamut P3 pipelines.

concepts

  1. Syntax and computed style

    Build a color(display-p3-linear …) value with sliders, probe the exact declaration with CSS.supports(), and read back what getComputedStyle() serializes — including the spec's own example pair that must render identically in the gamma and linear notations.

  2. Space converter

    A working converter between srgb, srgb-linear, display-p3 and display-p3-linear, showing the transfer-function and matrix math at each hop — and cross-checking the arithmetic against the browser's native conversion via relative color syntax.

  3. Gradient interpolation

    display-p3-linear is also an interpolation space. The same two stops rendered in srgb, in srgb-linear and in display-p3-linear, plus a live color-mix() midpoint readout — the linear spaces keep their luminance through the middle.

  4. Precision and gamut

    The spec warns that linear-light needs more precision than gamma encoding — see the banding appear as you quantize a linear ramp. Plus out-of-range components (color() doesn't clamp), and what your actual display's gamut reports.

  5. Pixel proof

    The spec claims color(display-p3 0.591 0.123 0.264) and color(display-p3-linear 0.3081 0.014 0.0567) are the same colour. Prove it with pixels: paint both through canvas fillStyle and compare the bytes that actually land.

why it shipped

Physically-based pipelines — lighting math, blending, image processing, anything that models photons — need colour components that are linearly proportional to light. CSS already had srgb-linear for that, but the moment a pipeline targets a wide-gamut P3 display it had to bounce through matrices by hand: there was no linear-light space with P3 primaries. display-p3-linear is exactly that space: same chromaticities and white point as display-p3, unity transfer function.

Because CSS colour spaces percolate everywhere, one keyword buys a lot: a physically-correct interpolation space for gradients and color-mix(), a conversion target for relative color syntax, and (in Chrome 155, as a separate feature) a backing store for 2D canvas. The catch the spec itself documents: without gamma's perceptual compression, 8-ish bits of linear-light precision visibly band — linear values want float precision end to end.

references