Pick a base color and instantly generate the full Tailwind shade ladder: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 (and optional 950). Output is calibrated to match Tailwind's perceptual lightness curve - so a custom color at 500 is roughly the same perceived lightness as Tailwind's blue-500. Export as JavaScript config or CSS variables.
When to use this
Use when: adding a new brand color to your Tailwind config, building a custom design system on top of Tailwind, replacing Tailwind's default palette with a brand-specific one, generating CSS variables for use outside Tailwind (vanilla CSS, design tokens).
Frequently Asked Questions
Is this the same as Tailwind's default palette?
No - it generates a shade ladder for YOUR custom base color, calibrated to match Tailwind's perceptual lightness. The 500 shade matches your input; 50-900 are derived. Use it to add custom colors that feel native alongside Tailwind's defaults.
How do I add the output to my Tailwind config?
Copy the JS output (tailwind.config.js fragment) into your `theme.extend.colors` block. Or copy the CSS variable output into your global CSS. Both formats are provided side-by-side after generation.
Powered by Color Picker / Palette Generator.