Tailwind Color Scale Generator (50-950 Shades)
Pick one base color and get a Tailwind-style scale with 11 shades: 50, 100, 200 through 900 and 950. Copy it as CSS variables, a Tailwind v4 @theme block or a v3 tailwind.config.js snippet. Everything runs in your browser, and nothing is sent to a server. For hue-based color schemes, use the Color Palette Generator. To convert color formats, try the Color Converter.
🔒 Runs in your browser · Your data is never sent to a server
Color scale
How to use
- Choose a base color with the color picker or the HEX field, then enter a color name.
- The 11-step scale appears. Click a swatch to copy its HEX.
- Pick an output format (CSS variables, Tailwind v4 or Tailwind v3) and copy it.
Notes
- Hue and saturation stay the same as your base color; only HSL lightness is set to a fixed value per step. The result does not match the official Tailwind CSS palette.
- HSL lightness is not the same as perceived brightness, so yellows and greens look lighter than blues and purples at the same step. Check the contrast before using a step for text.
- When the base color is placed as-is, only that step uses your exact HEX, so the lightness gap to neighboring steps can be uneven.
- The color name is automatically cleaned up to lowercase letters, digits and hyphens.
Glossary
Color scale
One hue arranged from light to dark in steps. Typically 50-100 for backgrounds, 200-300 for borders and 700-900 for text.
HSL lightness
A 0-100% value for how light a color is. 0% is black, 100% is white, and the most vivid colors sit around 50%.
@theme
The Tailwind CSS v4 directive for defining design tokens in CSS. Writing --color-name-step makes utilities such as bg-name-500 available.
FAQ
Is the generated scale the same as the official Tailwind palette?
No. The tool keeps the hue and saturation of your base color and assigns a fixed HSL lightness to each step from 50 to 950. The official palette is tuned by hand for each color, so the feel is similar but the values differ.
Which step does the base color land on?
With the placement option on, the step whose lightness is closest to your base color uses your exact HEX. With it off, the base color is also recalculated at the fixed lightness values.
When should I use the Tailwind v4 or v3 output?
For v4, paste the @theme { --color-name-500: …; } block into your CSS. For v3, paste the snippet into theme.extend.colors in tailwind.config.js. The CSS variables format works in projects that do not use Tailwind.
Why does yellow look lighter than blue at the same step?
HSL lightness is not perceived brightness. Yellows and greens look brighter than blues and purples at the same lightness, so check the contrast ratio before using a step for text.
Share this page