Tailwind color palette builder

Turn a brand hex into a 50–950 scale ready for theme.extend.colors, plus CSS custom properties.

Tailwind color scale

Build a 50–950 scale from a base color and export Tailwind tokens.

BaseName

#f7f5fa

100

#eeeaf5

200

#d7cbec

300

#b89ee5

400

#9262e4

500

#7c3aed

600

#5e0fe5

700

#4908b9

800

#370985

900

#280b5b

950

#190934

Tailwind config

// tailwind.config — theme.extend.colors
brand: {
        50: "#f7f5fa",
        100: "#eeeaf5",
        200: "#d7cbec",
        300: "#b89ee5",
        400: "#9262e4",
        500: "#7c3aed",
        600: "#5e0fe5",
        700: "#4908b9",
        800: "#370985",
        900: "#280b5b",
        950: "#190934",
}

CSS variables

:root {
  --color-brand-50: #f7f5fa;
  --color-brand-100: #eeeaf5;
  --color-brand-200: #d7cbec;
  --color-brand-300: #b89ee5;
  --color-brand-400: #9262e4;
  --color-brand-500: #7c3aed;
  --color-brand-600: #5e0fe5;
  --color-brand-700: #4908b9;
  --color-brand-800: #370985;
  --color-brand-900: #280b5b;
  --color-brand-950: #190934;
}