Overview
What this tool does
Tailwind's default color palette uses an 11-step scale per color (50, 100, 200 ... 900, 950). When you add a brand or accent color, you usually need the full scale, not just one shade. This generator takes any hex color and produces the matching 11 shades by holding hue + saturation constant and ramping lightness from 97% (the 50-step lightest) down to 10% (the 950-step darkest). You get the full Tailwind config block + CSS variables block ready to paste. Click any swatch to copy that single hex. 100% client-side.
How to
Use it in 3 steps
- Pick or paste your base hex color. The picker on the left mirrors the text input.
- Set a Tailwind color name (e.g. brand, accent, primary). Used in the generated config.
- Read the 11-shade grid. Click any swatch to copy its hex.
- Copy the full Tailwind config block, OR the CSS variables block, depending on your stack.
FAQ
Frequently asked questions
▶How does the scale work?
We use the input color's HSL hue and saturation, then walk the lightness through 11 fixed targets (97%, 94%, 86%, 77%, 65%, 50%, 42%, 34%, 26%, 18%, 10%). Those targets were tuned to roughly match Tailwind's official scales so the result feels native alongside Tailwind's built-in colors.
▶Why does step 500 not exactly match my input?
Because step 500 targets 50% lightness; your input may already be lighter or darker. If you want step 500 to BE your input color, pick an input whose lightness is close to 50%. Real brand colors often differ a lot from 50%, so the scale anchors to canonical Tailwind midpoints rather than your specific input.
▶Can I edit the scale by hand?
Yes; the generated config block is plain JS that's easy to tweak. Copy it, then nudge individual hex values to taste.
▶What's the difference between the Tailwind block and the CSS variables block?
Use the Tailwind block if you're using Tailwind CSS and want classes like `bg-brand-500`. Use the CSS variables block if you're not on Tailwind, or if you want to drive Tailwind theme tokens via CSS vars (`bg-brand-500` resolves to `var(--color-brand-500)`).
▶Is anything sent to a server?
No. All color conversion runs in your browser via standard HSL math.