v144 · css color 4
Space converter
What does a colour look like as numbers in each of the four RGB spaces? This converter runs the CSS Color 4 math — undo the transfer function, hop through XYZ between primaries, re-encode — and then cross-checks every row against the browser using relative color syntax: color(from X display-p3-linear r g b) asks the engine to do the same conversion natively.
Ships in Chrome 144. The JS math column always works; the browser-native column uses relative color syntax and getComputedStyle(), so the display-p3-linear row shows the real parse failure on a pre-144 browser instead of a pretend conversion.
Convert a colour into all four spaces
| space | JS math (CSS Color 4 algorithm) | browser native (relative color syntax) | agree? |
|---|
the math, one hop at a time
/* display-p3 → display-p3-linear: undo the gamma (same curve as sRGB) */
lin = c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
/* srgb-linear → display-p3-linear: change primaries via XYZ (D65) */
xyz = M_srgbLinear_to_XYZ * rgb;
p3 = M_XYZ_to_p3Linear * xyz;
/* or let the browser do it: */
el.style.color = "color(from #8c1c3f display-p3-linear r g b)";
getComputedStyle(el).color; // the engine's own answer