Tailwind Shade Generator
Generate Tailwind color scales instantly and export CSS Variables or Config definitions.
Generated Shades Preview
:root {
}:root {
}primary: {
},Frequently Asked Questions
Is this Tailwind shade generator free to use?
Yes, the tool is completely free with no login, watermarks, or usage limits.
Does this tool upload my colors anywhere?
No. All shade calculations happen entirely in your browser using JavaScript — no color values are ever sent to a server.
How is the 50–950 color scale generated?
The tool converts your base hex color to HSL, then adjusts lightness and saturation for each weight (50 through 950) to mimic Tailwind's official color scale pattern.
What formats can I export?
You can copy the generated scale as CSS variables (RGB), CSS variables (OKLCH), or as a ready-to-paste Tailwind config object.