Tailwind Color Palette Generator

Turn one brand color into a complete Tailwind-style 50–950 shade palette, generated perceptually in OKLCH — exported as v3 config, v4 @theme, CSS variables or JSON.

Why generated palettes usually look wrong — and this one does not

Naive shade generators lighten and darken in RGB or HSL, which shifts perceived hue and makes light shades washy and dark shades muddy. This generator works in OKLCH — the perceptual color space Tailwind v4 itself adopted — targeting lightness steps calibrated against Tailwind’s own palettes, scaling chroma toward the ends, and holding your hue constant. The result sits naturally next to the built-in colors.

Worked example

Base #3b82f6 named brand produces eleven shades; the v4 export looks like:

@theme {
  --color-brand-50: oklch(98.5% 0.021 259.8);
  --color-brand-500: oklch(62% 0.188 259.8);
  --color-brand-950: oklch(27% 0.103 259.8);
  /* …all 11 shades… */
}

After adding that block, utilities like bg-brand-500, text-brand-50 and border-brand-300 exist automatically.

Export formats

• Tailwind v3 — hex values under theme.extend.colors in tailwind.config.js.
• Tailwind v4 — an @theme block with oklch() values.
• CSS variables — framework-free custom properties.
• JSON — for token pipelines and scripts.

Accessibility notes

• Swatch labels automatically use black or white text by real contrast ratio — the same check you should apply to your UI: verify text pairs in the WCAG Contrast Checker.
• As a rule of thumb from Tailwind’s own palettes: white text works from ~600 upward, dark text below ~400; the 400–500 band needs checking case by case.

Limitations

• Very light or very dark base colors produce compressed scales — the tool anchors your color at 500, so a near-white base leaves little room above it. Pick a mid-tone base where possible.
• Extremely high-chroma bases get gamut-clamped at some steps (hue kept, chroma reduced) so every hex stays displayable.

Powered by