demo · v152 · css

Alpha Lab

Set an origin color (with its own alpha), then adjust transparency two ways. Replace writes a new alpha directly — alpha(from var(--origin) / 80%). Scale multiplies the origin's existing alpha with the alpha keyword — alpha(from var(--origin) / calc(alpha * 0.5)). The right-hand swatch is painted by the browser; the read-back is its real computed value.

checking alpha() support…

origin

—

derived via alpha()

—

alpha(from …)

the syntax

:root { --origin: oklch(60% 0.25 315 / 0.8); }

/* Replace the alpha channel outright */
.replace { color: alpha(from var(--origin) / 40%); }

/* Scale the origin's OWN alpha with the `alpha` keyword
   (alpha is a <number>: 1.0 == 100%) */
.scale   { color: alpha(from var(--origin) / calc(alpha * 0.5)); }

/* The color components are untouched; only alpha changes,
   and the result stays in the origin's color space. */

see also