Skip to content

Web

CSS Variables Template

Design tokens as custom properties on :root or a theme class. Pair numeric scales (50–950) with semantic aliases like --color-primary for components. Spec reference: Documentation.

Open interactive generator →

Starter template

:root {
  --brand-50: #f5f3ff;
  --brand-100: #ede9fe;
  --brand-500: #7c3aed;
  --brand-900: #4c1d95;
  --color-primary: var(--brand-500);
  --color-surface: #ffffff;
}

Color samples

FAQ

Should tokens live on :root or a class?

Put primitives on :root for global themes. Scope semantic aliases (--color-primary) on :root or a .theme-dark class so components only reference semantics.

How do I sync variables with Tailwind?

Mirror the same HEX in Tailwind config or generate both from the CSS variables tool so utilities and custom properties never drift.

Can I copy the syntax chips?

Yes — click the secondary chip to copy platform syntax. HEX and RGB chips copy sRGB values for mockups, design handoff, and ChromaXP tools.

Are RGB and CMYK print-ready?

RGB and CMYK here are computed from HEX for quick reference. For ink and paper, re-check against your print profile or Pantone bridge.