Tool · Tailwind palette generator

Tailwind palette generator.

One base color in. A perceptually-uniform 50–950 scale out. Built in OKLCH so the steps look evenly weighted across hues. Tailwind config and CSS variables ready to copy.

50
#EBF5FF
W 1.1 · B 19.0
100
#DEEBFF
W 1.2 · B 17.4
200
#C3D6FF
W 1.5 · B 14.4
300
#A4BFFF
W 1.8 · B 11.5
400
#83A4FF
W 2.4 · B 8.7
500 ◉
#6B8AF2
W 3.2 · B 6.5
600
#506CD1
W 4.8 · B 4.4
700
#344AAC
W 7.7 · B 2.7
800
#1B2888
W 12.3 · B 1.7
900
#0B0065
W 17.5 · B 1.2
950
#02002C
W 20.2 · B 1.0
Tailwind v4 — @theme (globals.css)
@theme {
  --color-brand-50: #EBF5FF;
  --color-brand-100: #DEEBFF;
  --color-brand-200: #C3D6FF;
  --color-brand-300: #A4BFFF;
  --color-brand-400: #83A4FF;
  --color-brand-500: #6B8AF2;
  --color-brand-600: #506CD1;
  --color-brand-700: #344AAC;
  --color-brand-800: #1B2888;
  --color-brand-900: #0B0065;
  --color-brand-950: #02002C;
}
Tailwind v3 — tailwind.config.ts (extend.theme.colors)
colors: {
  brand: {
      50: "#EBF5FF",
      100: "#DEEBFF",
      200: "#C3D6FF",
      300: "#A4BFFF",
      400: "#83A4FF",
      500: "#6B8AF2",
      600: "#506CD1",
      700: "#344AAC",
      800: "#1B2888",
      900: "#0B0065",
      950: "#02002C",
  },
},
CSS variables
  --brand-50: #EBF5FF;
  --brand-100: #DEEBFF;
  --brand-200: #C3D6FF;
  --brand-300: #A4BFFF;
  --brand-400: #83A4FF;
  --brand-500: #6B8AF2;
  --brand-600: #506CD1;
  --brand-700: #344AAC;
  --brand-800: #1B2888;
  --brand-900: #0B0065;
  --brand-950: #02002C;