CSS alpha() Is Now Baseline, So Stop Hand-Writing Transparent Colour Variants

web.dev's September round-up lists a CSS function we think deserves more attention than it will get: alpha(). It is a relative colour function that adjusts the alpha channel of a colour while preserving its other channels. Firefox 155 and Safari 27 added support, which makes it Baseline Newly available, with Chrome and Edge already shipping it from version 151.

The practical benefit is plain. Most design systems need a brand colour at 10, 20 and 40 percent opacity for hover states, borders and overlays. Until now that meant duplicating hex values as separate variables, or reaching for opacity and fighting the side effects on child elements.

With alpha() you derive the transparent version from the original colour, so changing the brand colour updates every variant automatically. That is one source of truth instead of a pile of near-duplicate tokens.

It sits in good company. The same round-up lists the progress() math function, the revert-rule keyword, image values in light-dark(), and overflow-anchor, all now Baseline Newly available. Safari 27 is behind several of them.

Our advice: when you next audit a stylesheet, search for rgba values that duplicate an existing colour, and replace them. Keep a fallback for older browsers if your audience needs it.