demo · v152 · css

Space Preserved

Take an origin color and fade it two ways. alpha(from … / k) keeps the origin’s color components and space. rgb(from … r g b / calc(alpha*k)) converts the origin into sRGB coordinates because rgb() defines the target space. Computed-value read-back can prove that space/coordinate distinction; visible gamut differences additionally depend on display capability and gamut mapping.

checking support…

alpha(from … / k)

alpha(…)
computed: —

rgb(from … / calc(alpha*k))

rgb(from …)
computed: —
—

the difference, in one line

:root { --p: color(display-p3 0 1 0); }   /* out-of-sRGB green */

.a { color: alpha(from var(--p) / 50%); }            /* stays display-p3 */
.b { color: rgb(from var(--p) r g b / calc(alpha*.5)); } /* converts to sRGB coordinates */

For an in-sRGB origin, both forms can represent the same color and alpha. For a wide-gamut origin, the computed serializations expose the different working spaces. Whether the painted swatches look different depends on gamut mapping and the output display, so this demo does not infer clipping from unequal strings alone.

see also