Skip to main content
Skip to content

CSS color variables for design systems

Export one palette as custom properties, then alias them for text, surfaces, and state.

All guidesPalette toolContrast checker

CSS custom properties let the same palette feed plain CSS, Tailwind, and component libraries. Palettebro names tokens by role (primary, on-surface, surface-container) so you do not invent a second naming scheme at export time.

Export from the generator

Build a palette in the color palette generator, review derived tokens on Color Utilities, then download CSS variables. Check contrast in the WCAG contrast checker before you paste them into a codebase.

Primitive vs semantic

  • Primitives: stepped hues such as --color-primary-50 … --color-primary-950.
  • Semantic aliases: --color-on-surface, --color-surface, --color-outline that point at primitives.
  • Themes: swap values on :root vs .dark (or a data-theme) while keeping the same names in components.

Use them in CSS

.card {
  background: var(--color-surface-container);
  color: var(--color-on-surface);
  border: 1px solid var(--color-outline-variant);
}

Components should read semantic aliases, not a one-off hex. When the generator output changes, you replace the variable block — not every rule.