Question 1

How does the Tailwind palette generator work?

Accepted Answer

Pick any base color. The tool generates 11 shades (50 through 950) by blending your base color toward white for lighter shades and toward black for darker ones, mimicking the Tailwind CSS color scale.

Question 2

Can I copy the output as a Tailwind config?

Accepted Answer

Yes. Switch to the Tailwind Config tab to get a ready-to-paste theme.colors entry, or use the CSS Variables tab for plain :root variables. Hex and SCSS map formats are also available.

Question 3

How do I add a custom color to Tailwind?

Accepted Answer

Copy the generated config object and paste it into the theme.extend.colors section of your tailwind.config.js. Then use classes like bg-brand-500, text-brand-700 in your markup.

Question 4

Are the generated colors WCAG-compliant?

Accepted Answer

The generator produces a perceptually balanced scale, but always verify contrast ratios for your specific text/background combination using a contrast checker before shipping to production.