Generator

Tailwind color palette generator

Generate a color palette and export it as a ready-to-paste Tailwind CSS theme object, with CSS variables and JSON too.

Using colors in Tailwind

Tailwind reads colors from your theme. Generate a palette here, open the Export panel, and copy the Tailwind color object straight into tailwind.config.js under theme.extend.colors. You’ll then have utility classes like bg-primary and text-ink.

Tip: build scales

For full Tailwind-style scales (50–900), use the shade & tint generator to expand each base color into a ramp.

Check pairings with the contrast checker or browse ready-made collections.

Frequently asked questions

How do I add custom colors to Tailwind?

Add them under theme.extend.colors in tailwind.config.js. This tool exports a ready-to-paste object for you.

Can I generate a 50–900 color scale?

Yes — generate your base colors, then use the shade & tint generator to build evenly spaced steps for each.