← All text tools

Tailwind colour palette generator

Make a 50–950 Tailwind CSS colour scale from your brand colour, for v3 or v4.

  • Free
  • No sign-up
  • Works on any device

About Tailwind colour palette generator

Enter your brand colour and get a full 50 to 950 scale in the format Tailwind uses, ready for the config file in v3 or the theme variables in v4. Light steps suit backgrounds, 500 is roughly your base colour, and the darkest steps work for text and dark mode.

How to use Tailwind colour palette generator

  1. Set the options above. The result updates live.
  2. Change anything until it's just right.
  3. Copy the result or download it.

Why use this tool?

Also known as

Frequently asked questions

Where do I paste the generated Tailwind colours?

In v3, add them under theme.extend.colors in tailwind.config.js. In v4, paste the variables into the @theme block of your CSS file.

Is Tailwind colour palette generator free?

Yes. Tailwind colour palette generator on Toolipedia is free to use, with no sign-up and no watermark.

Is it safe to use?

Yes. Everything is worked out in your browser, and nothing you enter is sent to our server.

Does it work on my phone?

Yes. It works in any modern browser on Android and iPhone, as well as on tablets and computers. There's nothing to install.

Do I need an account?

No. Just open the page and use the tool. There's no sign-up and no email needed.

Related tools