← All Tools
Tailwind Palette Generator🔒 100% local
Tailwind CSS color palette. Privacy-first, no server uploads, no tracking.
Related Tools
Takes one hex colour and expands it into an eleven-stop scale from 50 to 950, mixing toward white for the lighter stops and toward black for the darker ones. Alongside the hex values it prints each stop's WCAG relative luminance, then a block of CSS custom properties and a colour object for tailwind.config.js.
How to use it
- Type a hex colour such as #3B82F6 into the box.
- Press Process; the eleven stops appear with their luminances.
- Scan the Notes column to see which stops clear 4.5:1 on white.
- Copy either the CSS custom properties block or the tailwind.config.js object.
Worked example
#3B82F6becomesGenerated 11-stop Tailwind-style scale from #3B82F6
Stop Hex Notes
---- -------- -----
50 #F5F9FF luminance 0.944
100 #E6EFFE luminance 0.857
200 #C4DAFC luminance 0.689
300 #93BAFA luminance 0.482
400 #629BF8 luminance 0.328
500 #3B82F6 luminance 0.176Stop 500 is the input colour untouched. The full output continues with the CSS custom properties block and the tailwind.config.js object for every one of the eleven stops.
When to use it
- Turning a single brand colour into tints and shades for a new theme.
- Checking which stops are dark enough to carry white text before wiring them into a design.
- Getting a tailwind.config.js colour entry without hand-picking eleven hex values.
What it does not do
- The input must be a three or six digit hex colour, with or without the leading hash. A CSS colour name such as blue is rejected with the hex hint, which is why the box arrives pre-filled with #3B82F6.
- Mixing is straight linear interpolation toward white or black, so the scale is not perceptually uniform and saturated hues lose their colour quickly at the dark end.
- The Notes column only ever marks stops that clear 4.5:1 against white. The category strings the code holds - good for text on white (AA), AA large only, use as background - are computed and then never printed.
- Output is text only. No swatches are drawn, and no palette is stored or saved between visits.