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

concepts

1. Token Transparency

   A design token palette where each color is defined once and transparent variants are computed with alpha(from var(--brand) / 20%) — no separate --color-primary-20 variable needed.

2. Overlay Builder

   Interactive demo: pick any CSS color and an alpha percentage; the alpha() expression updates live and applies as an overlay to a sample image background.

3. State Feedback Colors

   One brand token, every interactive state — hover, active, focus ring, and alert background — all derived at runtime via alpha(from var(--brand) / N%). Change the brand color and every state updates automatically. No preprocessor, no extra variables.

4. Dark Mode Palette

   One brand color generates a full palette of alpha tints — and a live card shows how those tints look on both white and dark backgrounds. Toggle between light and dark mode to see how alpha()-based tints adapt differently to the surface behind them without extra variables.

5. Gradient Opacity Builder

   Build a linear gradient using oklch(from var(--color) l c h / N%) relative alpha syntax. Pick a base color, direction, and 3–5 stops with independent opacity sliders. A live checkerboard preview shows the gradient with per-stop swatches, and the generated CSS shows how relative alpha keeps every stop locked to the same hue and chroma.

6. Compatibility Lab

   Probes alpha() support and related relative color syntax with CSS.supports() and live DOM injection. A live color picker shows whether this browser renders alpha() natively or falls back to the computed rgba() value. Includes exact @supports guard patterns and a JS fallback helper.

7. Design System Builder

   Pick a primary, accent, and danger color. The builder generates a complete CSS custom property token set using alpha(from var(--brand) / N%) for every opacity tier and previews the tokens across real UI components — buttons, alerts, badges, and cards — so you can see the full design system powered by a single token per color.

why it shipped

The existing Relative Color Syntax (RCS) lets you do oklch(from red l c h / 50%) to change alpha, but the syntax is verbose and requires knowing which color space to use. The CSS Color 5 alpha() function is a convenience shorthand: it preserves all color channels and only changes alpha — a more readable and reusable primitive. It complements rather than replaces RCS. With CSS custom properties, one design token can spawn any number of transparent derivatives in-place: alpha(from var(--brand) / 15%) produces a tint without a second variable.

references

• ChromeStatus entry
• CSS Color 5 spec — alpha() function
• MDN — Relative colors