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

Step 1

Enter your brand color

Type a HEX value or pick it visually.

Step 2

Name the scale

Give the color a name such as brand or primary.

Step 3

Generate the scale

A full 50–950 set of steps is created instantly.

Step 4

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

HEXTailwind config

Accuracy & limitations

The scale is computed around your base color rather than hand-tuned the way Tailwind's own default palettes were, so expect to adjust a step or two before shipping it.

The scale is generated around your base color and will not exactly reproduce Tailwind's own hand-tuned default palettes, which were adjusted by eye.
Steps are computed on a lightness ramp, so unusually light or dark base colors produce an uneven distribution. Adjust the values before shipping.
The output is a plain color object. It does not account for your project's existing tokens or dark-mode strategy.
No step is contrast-checked. Verify at minimum white text on your 500 and 600 steps before using them for buttons.

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.