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;