v144 · css color 4
Gradient interpolation
Every predefined space is also an interpolation space: linear-gradient(in display-p3-linear, …) and color-mix(in display-p3-linear, …) blend on linear-light P3 components. The classic red-to-blue gradient goes grey through the middle in srgb; the linear spaces keep the light on. Each bar below probes its own exact syntax and renders only if the browser really supports it.
Ships in Chrome 144. On a pre-144 browser the display-p3-linear bar shows an explicit unsupported panel (never a lookalike gradient), while the long-supported in srgb and in srgb-linear bars still demonstrate the gamma-vs-linear difference live.
Three interpolation spaces, one pair of stops
color-mix() midpoints, read back
The 50/50 color-mix() in each space, applied for real and read back through getComputedStyle():
the API
/* Interpolation space syntax, per CSS Color 4 : */
background: linear-gradient(in display-p3-linear, #ff0022, #0033ff);
color: color-mix(in display-p3-linear, #ff0022, #0033ff);
/* Probe the exact surfaces: */
CSS.supports("background-image",
"linear-gradient(in display-p3-linear, red, blue)");
CSS.supports("color", "color-mix(in display-p3-linear, red, blue)");