v151 · css · color
Alpha Playground
Pick an origin color and a target alpha. The browser derives the new color using the CSS Color 5 alpha() function — alpha(from var(--origin) / 0.4) — which extracts and adjusts only the alpha channel from the origin color.
checking…
origin
#0022ff
derived (CSS Color 5 alpha())
—
alpha(from #0022ff / 0.4)
how it works
The CSS Color 5 alpha() function takes an origin color and a new alpha value, keeping the RGB channels from the origin and replacing only the alpha:
/* Extract just the alpha channel */
.alpha-version { color: alpha(from var(--brand) / 0.4); }
/* Use calc() to multiply the existing alpha */
.half-alpha { color: alpha(from var(--brand) / calc(alpha * 0.5)); }
/* Can also use channel keywords */
.custom { color: alpha(from #ff0000 / 0.8); }
Unlike the older rgb(from ... r g b / calc(alpha * X)) relative color syntax (shipped Chrome 119), alpha() is a dedicated function that only modifies the alpha channel — cleaner and more readable for transparency adjustments.