Skip to content

Web

SCSS Color Variables

Sass variables and maps compile to static CSS. Use maps for theme scales and pass HEX into mixins for tint/shade helpers. Spec reference: Documentation.

Open interactive generator →

Starter template

$brand-500: #7c3aed;
$colors: (
  primary: $brand-500,
);

.button {
  color: map-get($colors, primary);
}

Color samples

FAQ

Variables vs maps in Sass?

Use $brand-500 for single hues. Use maps when you need keyed access (map-get($colors, primary)) or to feed mixins that emit multiple utilities.

Do Sass variables appear in the browser?

No — they compile away. Export final HEX/rgb in CSS output; keep Sass sources as the authoring layer only.

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.