ZeroServer.tools

CSS Variables Generator

Generate a 10-shade CSS custom property scale from any base color.

Base color

Variable name

CSS output

:root {
  --primary-50: #e8e8fd;
  --primary-100: #c7c8fa;
  --primary-200: #9899f6;
  --primary-300: #6467f2;
  --primary-400: #3538ed;
  --primary-500: #1317dd;
  --primary-600: #0f12ae;
  --primary-700: #0b0d83;
  --primary-800: #080959;
  --primary-900: #040534;
}

Shades

#e8e8fd

100

#c7c8fa

200

#9899f6

300

#6467f2

400

#3538ed

500

#1317dd

600

#0f12ae

700

#0b0d83

800

#080959

900

#040534

CSS custom properties for design tokens

CSS custom properties (CSS variables) are the foundation of modern design tokens — defining your palette once in :root and reusing var(--primary-500) everywhere. This generator produces a 10-shade scale (50–900) at fixed lightness steps, keeping hue and saturation constant — the same approach used by Tailwind CSS and most design systems. Swap the base color to instantly retheme the whole palette. For a visual side-by-side comparison, try the Color Shades Generator, or generate a full multi-color palette with the Color Palette Generator.