Free Tool

Tailwind Color Generator

Turn any color into a full 50–900 Tailwind shade palette — copy or download the config.

Questions answered

Frequently asked questions

Everything you might be wondering about the Tailwind Color Generator.

How is the shade scale generated?
Your chosen color is treated as the 500 shade, then lightness is adjusted up for lighter shades (50–400) and down for darker shades (600–900), matching Tailwind's typical scale shape.
Can I paste this directly into tailwind.config.js?
Yes — copy or download the generated object and paste it into your theme.extend.colors config.
Is it free and private?
Yes — free, no sign-up, and everything runs in your browser.