Tailwind Color Generator

Turn any color into a full 50–900 Tailwind shade palette — copy or download the config.

Base color

Color name

Questions answered

Frequently asked questions

Everything you might be wondering about the Tailwind Color Generator.

How is the shade scale generated?

Your chosen color is treated as the 500 shade, then lightness is adjusted up for lighter shades (50–400) and down for darker shades (600–900), matching Tailwind's typical scale shape.

Can I paste this directly into tailwind.config.js?

Yes — copy or download the generated object and paste it into your theme.extend.colors config.

Is it free and private?

Yes — free, no sign-up, and everything runs in your browser.

More free tools

Try a related tool

Hand-picked free tools that pair well with the Tailwind Color Generator.

CSS Gradient Generator

Free CSS gradient generator — build linear and radial gradients and copy the CSS instantly.

Try it

Color Palette Generator

Free generator that builds harmonious colour palettes with hex codes from a base colour and rule.

Try it

Color Contrast Checker (WCAG)

Free WCAG color contrast checker — exact ratio plus AA/AAA pass-fail for text and background colors.

Try it

From the blog

Tailwind Color Generator

Frequently asked questions

Try a related tool

Read next

Service

Company

Newsletter

Follow Us