Turn any color into a full 50–900 Tailwind shade palette — copy or download the config.
Tailwind gives you eleven carefully balanced shades of every built-in colour. Then you add your brand colour and get exactly one, so the moment you need a lighter hover state or a darker border you are back to guessing hex values by eye.
This tailwind color generator solves that. Give it your brand colour and it produces the full 50 through 900 scale, formatted as a config object you can paste directly into your project.
Your chosen colour becomes the 500 shade — the midpoint, and the one you will use most.
From there, lightness is adjusted upward for the lighter shades (50 through 400) and downward for the darker ones (600 through 900), following the shape of Tailwind's own scales. The result sits comfortably beside the built-in palettes rather than looking like an imported outlier.
You also name the colour, which determines the class names you will write: name it brand and you get bg-brand-500, text-brand-700, border-brand-200.
The output is a config object, not a list of hex codes to transcribe. Copy it, paste it into theme.extend.colors, and every shade is immediately available as a utility class across your project.
There is also a Download .js option if you would rather keep the palette as a file — useful when several projects share a brand colour, or when you are handing the palette to someone else.
A single brand colour covers roughly one use case: the primary button. Real interfaces need considerably more.
Light shades (50–200) do the quiet work — subtle backgrounds, hover states on light surfaces, selected rows in a table, tinted alert panels. Mid shades (300–500) carry buttons, links, and active states. Dark shades (600–900) handle text on light backgrounds, borders, and pressed states.
Without a scale, developers reach for opacity or invent one-off hex values, and the interface slowly accumulates a dozen slightly different versions of the same colour.
A developer is building a client dashboard. The brand colour is a strong teal, and it works fine on the primary button — but every hover state he hand-picks looks slightly muddy, and his "light teal" backgrounds keep clashing with the button.
He drops the teal into the generator, names it brand, and pastes the resulting object into his config. The hover state becomes hover:bg-brand-600, the tinted panel becomes bg-brand-50, and the border becomes border-brand-200.
The clashing stops, because those shades were derived from the same colour rather than guessed at three separate times.
One caution the scale cannot resolve for you: a shade being available does not make it readable. Light text on a 400 shade often fails accessibility contrast requirements even when it looks acceptable on your monitor.
Decide which shades carry text and verify them with the Color Contrast Checker before those choices spread across a codebase. Fixing contrast early is a config change; fixing it late is a find-and-replace across every component.
Tailwind developers adding brand colours to a project. Agencies setting up client projects with defined palettes. Designers handing a developer something more useful than a single hex code. Anyone who has hand-picked a hover state and known it was slightly wrong. The CSS Gradient Generator covers the other common colour job.
Your brand colour deserves the same range Tailwind gives its own. Drop it into the tailwind color generator above, name it, and paste a complete 50–900 scale into your config in the next thirty seconds.
Everything you might be wondering about the Tailwind Color Generator.
Hand-picked free tools that pair well with the Tailwind Color Generator.
Practical reads on the topics this tool touches.
Join our newsletter to receive automation tips, product updates, and business insights.
