Alpha channel

Alpha is a fourth number riding along with the three that name the colour, running from 0 for invisible to 1 for solid. Every modern CSS colour function takes it after a slash, rgb(226 74 46 / 0.64) and oklch(0.62 0.19 32 / 0.64) alike, and hex spells it as a fourth pair of digits, #E24A2EA3. What makes it different from the opacity property is where it lives. Opacity fades an element and everything inside it as one composited layer, so a card at 60 percent takes its text and its border down with it. Alpha belongs to a single value, so a border can be half transparent while the text beside it stays solid.

That distinction is why design systems ship alpha scales. A hairline tuned to look right on white turns muddy on a tinted card and invisible on a dark one, but the same line written as black at 8 percent stays a shade of whatever it is drawn over, which is what Radix means by giving every scale a matching alpha variant. The same trick is the whole mechanism behind a state layer: hover is not a second set of colours, it is the one colour laid on at a low alpha. A scrim is the same idea at a larger size.

The compositing is straightforward and worth knowing, because it explains the surprises. Painting a colour with alpha a over a backdrop gives src * a + dst * (1 - a) per channel, so alpha does not add up: two layers at 50 percent leave 75 percent coverage, not 100. Stacking alphas therefore reaches the target colour asymptotically and never quite arrives, which is why a stack of translucent overlays looks washed rather than dark. Straight and premultiplied alpha are two storage conventions for the same value, and the difference only bites when images are being resized or filtered rather than when CSS is being written.

The trap is text. A contrast ratio can only be computed against what is actually behind the glyphs, so a foreground carrying alpha has no measurable contrast until it is composited, and if the backdrop is an image or a video it has a different one in every square inch. Use alpha for lines, fills, shadows and washes, where blending is the point, and give text a solid on-colour whose ratio you can state.