Tailwind Color Generator
Turn one color into a full Tailwind 50–950 scale, ready to paste into your config.
About the Tailwind Color Generator
Turn one color into a full Tailwind 50–950 scale, ready to paste into your config. Every value is computed locally with vanilla JavaScript — there is no server round-trip, no sign-up and no limit on how many times you use it.
How to use
Enter your brand color
Type a HEX value or pick it visually.
Name the scale
Give the color a name such as brand or primary.
Generate the scale
A full 50–950 set of steps is created instantly.
Copy the config
Paste the generated block into your Tailwind config.
Benefits
Full scale from one color
Turn a single brand color into a complete usable ramp.
Config-ready output
Copy a block formatted for tailwind.config.js.
Consistent UI
Use the same steps across backgrounds, text and borders.
Features & supported formats
Features
- 50–950 step generation
- Custom scale name
- Swatch preview of every step
- Copy-ready config block
- Live updates
Supported formats
Frequently asked questions
Does this match Tailwind exactly?
It generates a perceptually even scale around your base color; fine-tune the steps to taste before adding them.
Which step is my base color?
Brand colors usually sit around the 500 or 600 step, with lighter steps below and darker steps above.
How do I add it to my project?
Copy the generated block into the colors section of your tailwind.config.js theme.
Why keep saturation at the ends?
A little saturation at the lightest and darkest steps stops them from looking flat and gray.
Can I generate more than one scale?
Yes. Generate each brand or accent color separately and paste them together in your config.