How do I create a custom color scale for Tailwind?

Enter your base color into the Tailwind Color Scale generator. It produces a complete 50-950 shade scale following Tailwind's conventions. Paste the output into your tailwind.config.js.

How many shades does Tailwind use per color?

11 shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. The 500 shade is typically the base/primary color.

Can I use multiple custom color scales?

Yes. Add as many custom color objects as you need in the extend.colors section. Each gets its own utility class prefix (bg-brand-500, bg-accent-300, etc.).

How to Generate a Custom Tailwind CSS Color Scale

🎨

Try Tailwind Color Scale

Free, no signup →