Color Token Gen

v1.0.0

Generate design token color scales (50-950) from a seed color

Generates a full design-token color scale (50–950) from a single seed hex value, exportable as CSS custom properties, Tailwind config, or JSON tokens.

How to use

→Pick or type any 6-digit hex color — the tool extracts hue and saturation, then maps them onto 11 lightness stops.
→Set the token prefix (e.g. "brand", "primary") so the output integrates directly into your naming convention.
→Click any swatch to copy its hex value; text labels flip between black and white for contrast.
→Switch between CSS, Tailwind, and JSON output formats and copy the entire block with one click.

Seed Color

Token Prefix

Scale Preview

CSS Custom Properties

:root {
  --brand-50: #f6f2fd;
  --brand-100: #ede5fa;
  --brand-200: #d6c2f4;
  --brand-300: #b897ed;
  --brand-400: #9563e3;
  --brand-500: #6c26d9;
  --brand-600: #561fad;
  --brand-700: #45198b;
  --brand-800: #341268;
  --brand-900: #250d4a;
  --brand-950: #16082b;
}