SCSS Variables Generator

Generate SCSS variables and maps from your palette.

Name

Add !default to allow overridesInclude example color-function usage

// _colors.scss

$color-primary: #6366f1 !default;
$color-accent: #ec4899 !default;
$color-success: #22c55e !default;

$colors: (
  "primary": $color-primary,
  "accent": $color-accent,
  "success": $color-success
) !default;

// Example usage:
// .btn {
//   background: map-get($colors, "primary");
//   &:hover { background: darken(map-get($colors, "primary"), 10%); }
//   &:disabled { background: lighten(map-get($colors, "primary"), 30%); }
// }

Loading tool...

What is SCSS Variables Generator?

Produce SCSS variable declarations and a single $colors map. Includes optional !default flags and example usage with color functions.

Frequently asked questions

+What is !default?

!default lets downstream stylesheets override the variable before it's assigned. Useful for themeable libraries.

+Does the tool produce a map?

Yes — a $colors SCSS map is included so you can iterate through your palette programmatically.

+Is SCSS still relevant?

For established design systems, absolutely. It integrates with every major framework and Rails/Hotwire stacks.

Related tools

Tailwind Config Generator

Convert your palette to a Tailwind CSS config in one click.

exportTry it →

CSS Variables Generator

Turn your palette into CSS custom properties with one click.

exportTry it →

Figma Tokens Export

Export your palette as Tokens Studio JSON for Figma.

exportTry it →