Tailwind Color Class Helper
Turn one brand hex color into a full Tailwind 50–950 shade scale and config snippet, with live swatches and class names.
One brand color, a whole Tailwind scale
Tailwind's power comes from its 50–950 shade scales, but adding your own brand color means producing all eleven steps by hand — light tints for backgrounds, mid tones for buttons, dark shades for text and borders. This helper does it from a single hex: it holds your color's hue and saturation steady and maps lightness to Tailwind's standard steps, so 500 stays close to your input and the rest derive consistently around it.
You get live swatches for every shade and a ready-to-paste palette for your tailwind.config.js under
whatever name you choose. From there, classes like bg-brand-500, text-brand-700, and
border-brand-200 just work across your whole project.
Copy-ready config
Generated live in your browser — nothing is uploaded.
Frequently Asked Questions
What does this tool generate?
Enter one brand hex color and it builds a full Tailwind-style shade scale (50 through 950) around it, ready to paste into your tailwind.config color palette under a custom name.
How are the shades calculated?
Your color’s hue and saturation are held roughly constant while lightness is mapped to Tailwind’s standard steps, so 500 stays close to your input and the lighter and darker shades derive from it.
How do I use the classes?
After adding the palette to tailwind.config.js under a name like brand, use classes such as bg-brand-500, text-brand-700, and border-brand-200 throughout your markup.
Is this tool free and private?
Yes. Everything is generated in your browser — no sign-up and nothing uploaded.
Want a full brand palette and design system? Let’s build it.