Tailwind Color Shades Generator
The Tailwind Color Shades Generator turns a single base color into a complete 50–950 shade scale, the same 11-step ramp Tailwind CSS uses.
100% in-browser · no data sent
Pick or paste a hex color and instantly get swatches for every stop plus copy-ready CSS custom properties and a Tailwind theme config.
Embed This Tool
Add this tool to your website with customizable styling
How to Use
Choose a base color
Use the color picker or paste a hex value such as #14b8a6. The whole scale updates as you change it.
Name your palette
Set a name like brand or primary. It is used as the token name in the CSS variables and Tailwind config output.
Copy a single shade
Click any swatch to copy its hex value to your clipboard — handy when you only need one stop.
Export the full scale
Copy the whole palette as CSS custom properties or as a Tailwind config color object and paste it straight into your project.
Frequently Asked Questions
How are the shades generated?
The generator keeps your base color's hue and saturation and steps the lightness across the 11 Tailwind stops (50 is the lightest, 950 the darkest). This gives a smooth, consistent ramp of tints and shades of the same color.
Will the 500 shade match my exact color?
Not necessarily. Each stop is placed at a fixed target lightness so the scale stays even, so the 500 shade uses your color's hue and saturation at that lightness rather than reproducing your input exactly. Pick the stop whose lightness matches your original if you need an exact match.
How do I use the output in Tailwind CSS?
Copy the Tailwind config block and add it under theme.extend.colors in your tailwind.config file. You can then use classes like bg-brand-500 or text-brand-700. The CSS variables option works in any project without Tailwind.
Is my color data sent to a server?
No. All colour maths runs in your browser with JavaScript. Nothing you enter is uploaded or stored, so the tool works offline and keeps your brand colors private.