Tailwind CSS Shade Generator
Generate the 11 Tailwind CSS shades (50 to 950) of any color and copy the code for Tailwind v4, v3 or CSS variables.
Click a shade to copy its code. Your color is placed on the shade closest to its lightness.
Everything runs in your browser: no data is sent.
About this tool
This Tailwind CSS shade generator builds a complete scale of 11 shades numbered 50 to 950 from a single color, just like Tailwind’s built-in colors. Your color is placed on the shade with the closest lightness, and the others are computed in the OKLCH space while keeping the same hue. Ideal for turning a brand color into a palette you can use in a web project.
Give the color a name (brand by default) and pick the code format: an @theme block for Tailwind v4 with oklch() values, an object for tailwind.config.js in Tailwind v3, CSS variables or JSON. Click any shade to copy its HEX code. The Random button suggests a starting color, and the share link keeps your color.
- 11 shades from 50 to 950 in one click
- Tailwind v4 @theme code with oklch() values
- Tailwind v3 config, CSS variables or JSON
- Custom color name in the generated code
- Click any shade to copy its HEX
How to use it
- Enter your "Base color" as HEX or pick it with the color picker.
- Type the "Color name" to use in the code.
- Choose the "Code format": Tailwind v4, Tailwind v3, CSS variables or JSON.
- Click "Copy" and paste the code into your project.
Frequently asked questions
Is my color sent to a server?
No. The shades are computed in your browser and no data is sent. The base color is only stored in the page address for the share link.
Is the Tailwind shade generator free?
Yes, it is free and works without an account or sign-up.
What is the difference between the Tailwind v4 and v3 formats?
The v4 format outputs an @theme block with --color-name-50 to --color-name-950 variables in oklch(). The v3 format outputs a colors object for tailwind.config.js with HEX codes.
Why is my color not always shade 500?
The tool places your color on the shade with the closest lightness: a light color may become 200, a dark one 800. Your exact code is kept at that position and labelled "your color".