v151 · css · color

Relative Alpha Colors (CSS Color 5 alpha() function)

Derive a new color from an origin color by changing only its alpha channel. The rgb(), hsl(), and other color functions can now reference another color with from and override just the alpha component — no manual decomposition needed.

concepts

  1. Alpha Playground

    Pick an origin color and a target alpha, then see the derived alpha() syntax and the actual rendered swatch side-by-side with a manually-computed fallback. Live getComputedStyle proves the browser resolved the relative syntax.

  2. Layered Glass Compositor

    Stack three panels that each derive their background from a shared brand color using alpha() at different opacities. Drag a slider to change the base color and watch all layers update in lockstep — the power of a single origin-color reference.

  3. Theme Tinter

    Set one brand color and generate an entire tints-and-shades palette: backgrounds, borders, hover states, focus rings — all derived with alpha() and relative color syntax. Export the CSS custom properties.

why it shipped

Before relative alpha colors, creating a semi-transparent variant of an existing color meant decomposing it into channels and reassembling with the new alpha — fragile and verbose. CSS Color 5's from keyword lets authors say "take this color, change only the alpha" in one declarative line. This closes a gap with design-token systems that have long needed derived-color primitives.

references