Tailwind Shades
ColourGenerate Tailwind CSS colour shades from 50 to 950 with configurable modes. Copy the full scale for your project.
How to Use
1
Enter a base colour
Type any colour you want as the 500-level colour for your Tailwind scale.
2
Generate the scale
Click Generate and the tool interpolates from white (50) through your colour (500) to black (950).
3
Copy to your project
Use the Copy CSS button to grab the full colour scale for your tailwind.config.js.
About Tailwind shades
Tailwind CSS colour scales range from 50 (lightest) to 950 (darkest) with 500 as the base. This tool generates a full 11-step scale from any colour by interpolating toward white at the light end and black at the dark end, matching Tailwind's design system conventions.