Tailwind Shade Generator — Free Online Tool
Enter any base color and generate an 11-shade palette (50–950) matching the Tailwind CSS color scale pattern. Export as CSS custom properties or as a tailwind.config.js colors object. Powered by chroma-js for perceptually uniform color scaling.
100% client-side. No uploads. Your data never leaves your browser.
How to use Tailwind Shade Generator
- Enter your brand color or pick from presets.
- Name your palette (used in CSS vars and config).
- Copy individual shades or export all as CSS vars / Tailwind config.
- Paste into your tailwind.config.js to use in your project.
Frequently Asked Questions
How does this match Tailwind's built-in colors?
It uses a similar perceptual scaling approach (light to dark through the base color) but generates custom shades for your specific brand color.
What is the 500 shade?
The 500 shade is the 'base' color — the most representative shade. Shades below 500 are lighter, above 500 are darker.
How do I use the CSS variables output?
Paste the CSS variables into your :root { } block and reference them as var(--color-primary-500) etc.
Related tools
Related reading
Browse all free tools · theproductguy.in