Alpha Colors

Alpha colors are semi-transparent versions of each palette step. They blend to the same visual appearance as the solid color when composited over a standard background.

What are alpha colors?

For every solid color in the palette, there's a matching alpha variant (suffixed with A in the Radix scale, or using 8-digit hex). The alpha color is a semi-transparent RGBA value that, when composited over white (light mode) or black (dark mode), produces the exact same visual result as the solid color.

Why not just use opacity? CSS opacity affects the entire element including text, borders, and children. Alpha colors only affect the background, and they're calculated to produce the correct visual result on the expected background.

When to use alpha colors

Overlays — tinted overlays on images or content that blend naturally
Glassmorphism — frosted glass effects where content shows through
Tinted backgrounds — subtle color washes over varying backgrounds
Layered surfaces — stacking surfaces where underlying content should remain visible
Hover/focus states — transparent tints that work over any background

How they're generated

Alpha colors are computed by solving the compositing equation backwards:

typescript

// Browser compositing formula:
result = background × (1 - alpha) + foreground × alpha

// We solve for foreground + alpha that produces the target solid color
// Light mode: background = white (#FFFFFF)
// Dark mode: background = black (#000000)

The computation targets the closest possible RGBA match in sRGB (0–255 precision). P3 wide-gamut versions are also generated for modern displays.

Using alpha colors

CSS custom properties

css

/* Solid color */
.card {
  background-color: var(--color-blue-3);
}

/* Alpha version - blends with whatever is behind it */
.card-overlay {
  background-color: var(--color-blue-a3);
}

/* Great for hover states over images */
.image-overlay:hover {
  background-color: var(--color-blue-a5);
}

These examples use the default CSS export naming (Radix 1–12 steps). If you're using the Tailwind export, the equivalent of --color-blue-3 would be --color-blue-200. See the Radix 12-step scale for the full step mapping.

With Radix export

typescript

import { blueA } from './colors/radix-colors.js';

// blueA.blueA3 = 'rgba(0, 100, 255, 0.08)'
element.style.backgroundColor = blueA.blueA3;

Formats

Alpha colors are included in the following export formats:

CSS — as 8-digit hex values (e.g., #0064FF14)
JSON — includes hex and P3 alpha formats
Radix — named exports like blueA, orangeA
Panda CSS — included in the preset

What about Tailwind?

Tailwind's built-in opacity modifier (bg-blue-200/20) gives you runtime alpha control over every color in your palette — no special export needed. For most use cases (hover states, overlays, tinted backgrounds), this is all you need.

The pre-computed alpha variants above are a different thing: mathematically solved RGBA values that produce an exact visual match to the solid color when composited over a known background (white in light mode, black in dark mode). These are primarily useful in the CSS, JSON, and Radix exports for projects that need precise alpha-composite matching. Use the includeAlpha option to control this in the programmatic API.