Skip to main content

Tailwind Color Generator

Pick a base color and get a full 11-step Tailwind-compatible color scale with ready-to-paste config and CSS variable outputs.

Color Scale
50#F1F1FE
100#E3E3FD
200#C2C3FA
300#9395F6
400#5F62F1
500#2C2FED
600#1216D3
700#0F11A9
800#0B0D83
900#080A5E
950#050638
Tailwind Config
colors: {
  brand: {
    50: '#f1f1fe',
    100: '#e3e3fd',
    200: '#c2c3fa',
    300: '#9395f6',
    400: '#5f62f1',
    500: '#2c2fed',
    600: '#1216d3',
    700: '#0f11a9',
    800: '#0b0d83',
    900: '#080a5e',
    950: '#050638',
  }
}
CSS Variables
:root {
  --color-brand-50: #f1f1fe;
  --color-brand-100: #e3e3fd;
  --color-brand-200: #c2c3fa;
  --color-brand-300: #9395f6;
  --color-brand-400: #5f62f1;
  --color-brand-500: #2c2fed;
  --color-brand-600: #1216d3;
  --color-brand-700: #0f11a9;
  --color-brand-800: #0b0d83;
  --color-brand-900: #080a5e;
  --color-brand-950: #050638;
}