Color Token Generator

Design a full color system with primary, secondary, neutral, and semantic color scales. Auto-generate shades from 50 to 950. Export as CSS variables, Tailwind config, SCSS, or design tokens JSON.

Quick Presets

Primary#6366F1

Click any swatch to copy

Secondary#8B5CF6

Click any swatch to copy

Accent#F59E0B

Click any swatch to copy

Neutral#64748B

Click any swatch to copy

Success#22C55E

Click any swatch to copy

Warning#F97316

Click any swatch to copy

Error#EF4444

Click any swatch to copy

Info#3B82F6

Click any swatch to copy

Export

:root {
  --color-primary-50: #f9f9fe;
  --color-primary-100: #e0dafc;
  --color-primary-200: #c5bcfa;
  --color-primary-300: #a99ef8;
  --color-primary-400: #8982f5;
  --color-primary-500: #6366f1;
  --color-primary-600: #5355c8;
  --color-primary-700: #4344a0;
  --color-primary-800: #33347a;
  --color-primary-900: #242456;
  --color-primary-950: #161634;
  --color-secondary-50: #faf8ff;
  --color-secondary-100: #e7d8fe;
  --color-secondary-200: #d3b9fd;
  --color-secondary-300: #be9afb;
  --color-secondary-400: #a67bf9;
  --color-secondary-500: #8b5cf6;
  --color-secondary-600: #734ccb;
  --color-secondary-700: #5c3da3;
  --color-secondary-800: #462e7b;
  --color-secondary-900: #312056;
  --color-secondary-950: #1d1334;
  --color-accent-50: #fef9ef;
  --color-accent-100: #ffe6c6;
  --color-accent-200: #ffd49d;
  --color-accent-300: #ffc274;
  --color-accent-400: #fcb04a;
  --color-accent-500: #f59e0b;
  --color-accent-600: #c68010;
  --color-accent-700: #9a6412;
  --color-accent-800: #6f4810;
  --color-accent-900: #472f0d;
  --color-accent-950: #241702;
  --color-neutral-50: #f9f9fa;
  --color-neutral-100: #dadde3;
  --color-neutral-200: #bbc2cc;
  --color-neutral-300: #9ea7b6;
  --color-neutral-400: #818da0;
  --color-neutral-500: #64748b;
  --color-neutral-600: #536074;
  --color-neutral-700: #434e5d;
  --color-neutral-800: #333c47;
  --color-neutral-900: #242a32;
  --color-neutral-950: #161a1f;
  --color-success-50: #f2fcf6;
  --color-success-100: #d1f2d7;
  --color-success-200: #aee7b8;
  --color-success-300: #8adc9a;
  --color-success-400: #61d17c;
  --color-success-500: #22c55e;
  --color-success-600: #1ea04d;
  --color-success-700: #197c3c;
  --color-success-800: #145b2d;
  --color-success-900: #0d3b1e;
  --color-success-950: #051e0e;
  --color-warning-50: #fff8f4;
  --color-warning-100: #ffdec8;
  --color-warning-200: #ffc39d;
  --color-warning-300: #ffa973;
  --color-warning-400: #ff8e49;
  --color-warning-500: #f97316;
  --color-warning-600: #cb5e16;
  --color-warning-700: #a04a14;
  --color-warning-800: #763712;
  --color-warning-900: #4f250e;
  --color-warning-950: #2b1404;
  --color-error-50: #fef8f8;
  --color-error-100: #ffd7d1;
  --color-error-200: #ffb5ac;
  --color-error-300: #ff9388;
  --color-error-400: #f96f65;
  --color-error-500: #ef4444;
  --color-error-600: #c53939;
  --color-error-700: #9d2e2e;
  --color-error-800: #772323;
  --color-error-900: #531819;
  --color-error-950: #310e0e;
  --color-info-50: #f7faff;
  --color-info-100: #dae1fe;
  --color-info-200: #bbc8fd;
  --color-info-300: #99b0fb;
  --color-info-400: #7398f9;
  --color-info-500: #3b82f6;
  --color-info-600: #326bca;
  --color-info-700: #2855a1;
  --color-info-800: #1f4079;
  --color-info-900: #152c53;
  --color-info-950: #0c1930;
}

Contrast Reference

WCAG contrast ratios of each shade against white (#fff) and black (#000). AA requires ≥ 4.5 : 1 for normal text; AAA requires ≥ 7 : 1.

Role	50	100	200	300	400	500	600	700	800	900	950
Primary	AAA	AAA	AAA	AAA	AA	AA	AA	AAA	AAA	AAA	AAA
Secondary	AAA	AAA	AAA	AAA	AA	AA	AA	AAA	AAA	AAA	AAA
Accent	AAA	AAA	AAA	AAA	AAA	AAA	AA	AA	AAA	AAA	AAA
Neutral	AAA	AAA	AAA	AAA	AA	AA	AA	AAA	AAA	AAA	AAA
Success	AAA	AAA	AAA	AAA	AAA	AAA	AA	AA	AAA	AAA	AAA
Warning	AAA	AAA	AAA	AAA	AAA	AAA	AA	AA	AAA	AAA	AAA
Error	AAA	AAA	AAA	AAA	AAA	AA	AA	AAA	AAA	AAA	AAA
Info	AAA	AAA	AAA	AAA	AAA	AA	AA	AAA	AAA	AAA	AAA

Related Tools

{ }

JSON Formatter

Format, validate & minify JSON

Developer

B64

Base64 Encoder/Decoder

Encode & decode Base64 strings

Developer

%20

URL Encoder/Decoder

Encode & decode URL strings

Developer

Hash Generator

Generate MD5, SHA-1, SHA-256 hashes

Developer