Color Palette Generator

Pick one brand color and get a full, evenly spaced 11-step scale like Tailwind's, plus harmony palettes — ready to paste into Tailwind or CSS.

@theme {
  --color-brand-50: #f3f5ff;
  --color-brand-100: #e4e8ff;
  --color-brand-200: #cfd6ff;
  --color-brand-300: #b0bbff;
  --color-brand-400: #8994ff;
  --color-brand-500: #7279ff;
  --color-brand-600: #605eff;
  --color-brand-700: #4f46e5;
  --color-brand-800: #413abf;
  --color-brand-900: #37339e;
  --color-brand-950: #1a155c;
}

How to generate a color palette

1. Choose a base color (or hit Random). It's placed on the step whose lightness matches it best, marked with ●.
2. Check the small numbers on each swatch — the contrast with the label color — to see which steps work for text.
3. Click any harmony chip to use it as the new base, or click a swatch to copy its hex.
4. Name the palette and copy the export for Tailwind v4 (@theme), Tailwind v3 (config), CSS variables or JSON.

How the scale is built

Each step uses OKLCH lightness from Tailwind CSS v4's default palettes (50 ≈ 97% … 500 ≈ 64% … 950 ≈ 26%), so your scale lines up with Tailwind's grays and colors. Chroma (colorfulness) peaks around 500–600 and tapers toward the light and dark ends, and the hue stays constant. Steps near your base bend slightly so the base color itself appears unchanged in the scale.

Using a scale in a design system

Pair steps at least 500 apart (e.g. 100 with 700) and you'll usually clear WCAG AA. Confirm specific pairs with the contrast checker.

Related tools

• Color Picker
• Color Contrast Checker
• CSS Gradient Generator
• HEX to HSL Converter