Tailwind shade generator
This tool turns a single base colour into the complete Tailwind-style 50 → 950 ramp and emits a paste-ready theme.extend.colors block. It is for developers adding a custom brand colour to a Tailwind project who want a balanced, on-brand set of shades without picking eleven hexes by hand.
The difference between this and the Color Config Generator
If you have seen the Tailwind Color Config Generator, you may wonder what is different here. Both tools generate a 50–950 ramp from a single base. The distinction is in the algorithm target:
- Color Config Generator anchors your exact chosen color at step 500, making step 500 the closest visual match to what you picked.
- Shade Generator rebuilds your hue at a fixed target lightness for each stop. Your base colour is used for its hue and saturation; the 500 stop gets a fixed ~56% lightness regardless of how light or dark your input was.
Choose this generator when you want a consistent ramp regardless of input: it always produces a 500 stop at mid-tone even if your brand hex is darker or lighter.
How it works
The generator converts your base colour to HSL, then builds each of the eleven standard stops by holding the hue and saturation constant and replacing the lightness with a fixed target value per stop:
| Stop | Target lightness |
|---|---|
| 50 | ~97% |
| 100 | ~94% |
| 200 | ~88% |
| 300 | ~78% |
| 400 | ~66% |
| 500 | ~56% |
| 600 | ~47% |
| 700 | ~40% |
| 800 | ~30% |
| 900 | ~22% |
| 950 | ~18% |
Every shade stays in the same hue family while spanning from near-white tints to near-black shades. Each HSL value is converted back to hex and written under your chosen colour name.
How to use the generated config
Name the colour and paste the generated block into theme.extend.colors in your tailwind.config.js or tailwind.config.ts:
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: "#eff6ff",
500: "#3b82f6",
950: "#172554",
// …all 11 stops generated from your base
},
},
},
},
}You can then use classes like bg-brand-50, text-brand-700, border-brand-300, and ring-brand-500 anywhere in your markup.
Tips for choosing a good base colour
Because this generator fixes lightness to a target ramp, your chosen colour’s lightness does not carry through directly to step 500. What carries through is the hue and saturation. For best results:
- Use a mid-saturation colour as your base — very desaturated inputs produce a grey-ish ramp; very high saturation may produce neon extremes at step 50.
- Preview the full swatch ramp before committing — the live preview shows all eleven stops so you can spot any step that looks off before copying the config.
- If the 500 stop does not quite match your brand hex, consider using the Color Config Generator, which anchors step 500 to your exact input.
Everything runs in your browser — nothing is uploaded.