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

at a glance

why it exists

Relative color syntax (shipped in Chrome 119) lets you derive one color from another by referencing the origin color's individual channel values. To change only the alpha channel of oklch(0.6 0.15 240) you write:

oklch(from oklch(0.6 0.15 240) l c h / 50%)

This is verbose — you must repeat the color space name and list every channel just to keep them unchanged. When the origin color comes from a custom property the ceremony is even worse:

oklch(from var(--brand) l c h / 50%)

The alpha() function formalises the "change only opacity" pattern into a single, readable call. It is a pure shorthand: it produces an identical result to the longhand relative color form but without the boilerplate.

the function

syntax

alpha(from <color>, <alpha-value>)

The function returns a color identical to the origin in every channel (hue, lightness, chroma, etc.) with only the alpha replaced. The color space of the result is the same as the origin color.

examples

fading a keyword color

/* 50% transparent red */
background-color: alpha(from red, 0.5);

/* equivalent longhand: */
background-color: rgb(from red r g b / 0.5);

fading a design token

:root {
  --brand: oklch(0.55 0.18 250);
}

.overlay {
  /* 20% opaque version of --brand */
  background: alpha(from var(--brand), 20%);
}

.hover-state {
  /* 70% opaque version of --brand */
  background: alpha(from var(--brand), 70%);
}

Because alpha() works with any <color> — including var() references — it pairs naturally with design-token systems where the base color palette is stored in custom properties and variants are derived on demand.

combining with light-dark()

/* Adaptive semi-transparent overlay */
background: alpha(
  from light-dark(black, white),
  30%
);

in a border shorthand

/* A slightly transparent version of the text color */
border: 1px solid alpha(from currentColor, 0.4);

comparison with relative color syntax

alpha() only applies when you want to keep all channels unchanged. For adjusting hue, lightness, or saturation you still use the full relative color syntax.

browser support

see also

• CSS Color Level 5 — Relative Alpha Colors specification
• MDN: Using relative colors
• Chrome blog: CSS relative color syntax (Chrome 119)
• chromestatus.com — Relative Alpha Colors (5070160203481088)