v150 · CSS · Color · demo

Dark Mode Palette

One brand color, a full dark-mode-aware UI palette — all built with alpha(). On a dark background, the transparent tints behave very differently to a white one. Pick a brand color and toggle light/dark to see how alpha() adapts across both modes without extra variables.

Chrome 150+ — alpha() CSS function. In older browsers the tint swatches render with generated rgba() fallback tokens.

Pick a brand color · toggle light / dark mode · watch the alpha palette shift

Brand color:
New feature
Adaptive Color System
This card uses alpha()-derived tints for its badge background, button border, and card background. Change the mode to see how transparent colors interact with the surface behind them.
/* One brand token, all interactive states — light and dark */

:root { --brand: #0022ff; }

/* alpha() syntax from CSS Color 5 */
.badge     { background: alpha(from var(--brand) / 10%); }
.card      { background: alpha(from var(--brand) /  6%); border-color: alpha(from var(--brand) / 30%); }
.btn-ghost { border-color: alpha(from var(--brand) / 60%); }
.row-hover { background: alpha(from var(--brand) /  5%); }

/* Dark mode — same expressions, different surface.
   alpha(from brand / 10%) on #1a1a2e looks very different from
   alpha(from brand / 10%) on #ffffff — no extra variables needed,
   the blending is handled by the browser. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
  /* No --brand-dark needed — alpha() adapts automatically */
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗