Tailwind Palette Generator
Build a 50–950 Tailwind colour scale from one hex.
How to use
- 1 Enter or pick your base hex colour.
- 2 Give the palette a name, such as "brand" or "danger".
- 3 Review the generated 50–950 swatches; the anchor marks your input shade.
- 4 Choose Tailwind config or CSS variables and copy the export.
About Tailwind Palette Generator
The Tailwind Palette Generator turns a single brand colour into a complete Tailwind CSS scale — the eleven numbered stops from 50, the lightest tint, all the way down to 950, the deepest shade.
Instead of hand-picking shades or guessing at hex values, you paste or pick one colour and instantly get a balanced, ready-to-use ramp.
The ramp is built by holding the hue of your base colour roughly constant while stepping lightness across a wide, carefully tuned band that mirrors the rhythm of Tailwind's own palettes.
Saturation is gently eased back at the very light and very dark ends so the extremes stay clean rather than turning neon or washing out to grey.
The stop closest to your input colour is highlighted as the anchor, so you can see exactly where your original shade lands in the scale.
When you are happy with the preview, copy the result in the format you need: a Tailwind config fragment you can drop straight into your `theme.extend.colors`, or a block of CSS custom properties for projects that prefer plain variables.
Everything is computed locally in your browser — no accounts, no uploads and no network — so it is fast, private and works offline.
It is ideal for spinning up consistent brand, accent and semantic colour scales for design systems.
FAQ
Which stops does it generate?
It produces the standard Tailwind set: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 and 950 — eleven stops from lightest to darkest.
Will the 500 stop exactly match my input colour?
Not necessarily. The scale uses fixed target lightness values per stop, so your input is matched to the nearest stop (the highlighted anchor) rather than forced into 500.
Can I export it for plain CSS?
Yes. Switch the export format to CSS variables to get a :root block of custom properties named after your palette, alongside the Tailwind config option.