v152 · css · color

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

The new alpha() relative-color function refers to an origin color and changes only the alpha channel — alpha(from var(--c) / 80%) to replace it, or alpha(from var(--c) / calc(alpha * 0.5)) to scale it. Unlike rgb(from …), the result stays in the origin color's own color space, so an oklch() origin stays oklch().

concepts

  1. Alpha Lab

    Pick an origin color and dial its transparency two ways: replace the alpha (/ 80%) or scale the origin's own alpha with calc(alpha * k). Live swatch over a checkerboard, the exact declaration, and the browser's real getComputedStyle() read-back.

  2. Space Preserved

    Fade an oklch() / color(display-p3 …) origin with alpha() versus rgb(from … r g b / calc(alpha*0.5)). The first retains the origin space; the second converts into the rgb() function’s sRGB coordinates. Computed values show the space distinction without claiming unequal strings alone prove visible clipping.

  3. Translucent Tokens

    One brand token, a whole set of translucent surfaces. Derive a scrim, a hover tint, a focus ring and a disabled fill from a single --brand custom property with alpha(from var(--brand) / calc(alpha * k)) — change the brand color and the entire derived palette re-tints live.

why it exists

Relative color syntax can re-derive a color in a chosen function’s space (rgb(from …), hsl(from …), and others), but adjusting only transparency requires re-stating that function’s channels and may convert the origin into a different coordinate space. The at-risk CSS Color 5 alpha() proposal leaves the origin components untouched, modifies or replaces only alpha, and returns a color in the origin space. That makes it a concise candidate for opacity scales while avoiding an otherwise unnecessary color-space conversion.

Availability, per the chromestatus API (updated 2026-07-17): the v152 milestone listing records Enabled by default; the feature detail gives desktop 152 with status text “Proposed”, and the CSS Color 5 draft marks Relative Alpha Colors at-risk (the WG may drop it before Proposed Rec — it is not a finished standard). ChromeStatus records Firefox as Shipped/Shipping. Note this feature appeared under two milestones: a sibling demo set lives at v150/relative-alpha-colors-css-color-5-alpha-function (same ChromeStatus feature, earlier listing) — this v152 set is the Enabled-by-default-milestone companion; both stay live.

references