Tailwind Color Generator
Build Tailwind color scales
Source Input
Processed Output
What is the Tailwind Color Generator?
Tailwind's design system expects each color as a 11-step scale (50 through 950). Provide your brand color and this generator computes the full scale by adjusting lightness and saturation around your base — output as CSS custom properties or a Tailwind v4 @theme block.
Frequently Asked Questions (FAQ)
Q: Where does the base color land in the scale?
Your color anchors the 500-600 range; lighter steps (50-400) and darker steps (700-950) are derived from it.
How to Use the Tailwind Color Generator
- 1Paste your input into the editor above — or start from the preloaded example.
- 2Adjust any options, then click Run to process instantly in your browser.
- 3Review the output panel, then copy, download, or save it as a reusable snippet.