Tailwind Shade Generator

Palette Name

Base Color#3b82f6

Output Format

Visual Preview

50#ECF3FE#ECF3FE

100#CEE0FD#CEE0FD

200#9EC1FA#9EC1FA

300#6DA2F8#6DA2F8

Base400#3B82F6#3B82F6

500#0B64F4#0B64F4

600#0950C3#0950C3

700#073C92#073C92

800#052861#052861

900#021431#021431

950#010A18#010A18

CSS Variables (Tailwind v4)

@theme {
  --color-blue-50: #ECF3FE;
  --color-blue-100: #CEE0FD;
  --color-blue-200: #9EC1FA;
  --color-blue-300: #6DA2F8;
  --color-blue-400: #3B82F6;
  --color-blue-500: #0B64F4;
  --color-blue-600: #0950C3;
  --color-blue-700: #073C92;
  --color-blue-800: #052861;
  --color-blue-900: #021431;
  --color-blue-950: #010A18;
}

Shareable link

Settings are written to the URL as you change them. Nothing differs from the defaults yet.