Tailwind Palette Generator

The tailwind palette generator writes an eleven-step 50 to 950 colour scale from one base hue and hands back a ready-to-paste tailwind.config.js snippet.

What is Tailwind Palette Generator?

A Tailwind colour scale is a ladder with a name attached, and the tailwind palette generator produces both: eleven steps from 50 to 950 derived from one base colour, plus a config snippet that already contains them. Set the base and the page shows a tailwind color scale at fixed lightness values — 0.97, 0.93, 0.85, 0.75, 0.65, 0.55, 0.47, 0.4, 0.32, 0.22 and 0.14 — with the base's hue and chroma carried through every step.

• Eleven steps: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 and 950.
• Lightness values are fixed per step rather than evenly spaced, which mirrors how hand-tuned scales are built: the light end moves gently, the dark end compresses.
• Hue and chroma come from the base, so the whole scale belongs to one family.
• Output: a tailwind.config.js snippet extending theme.colors with a brand key, complete with a copy button.

The fixed lightness table is the part worth understanding. Between 50 and 400 the steps move quickly because pale tints separate visually even when they are close in lightness; between 500 and 950 they compress because dark values need less travel to look different. That asymmetry is deliberate and it is what makes a generated scale usable next to a hand-written one. Because chroma is inherited unchanged, the lightest steps can look more saturated than a published palette's equivalents — the same trade-off the Material ramp makes on this site.

• The snippet is emitted as a CommonJS tailwind.config.js fragment; projects on other config styles will need to adapt it.
• One brand key only. A second family means running the tool again and merging the results by hand.
• No per-swatch copy buttons and no plain CSS output; the config block is the one export.
• Nothing is measured for contrast, and the pale steps in particular are unlikely to carry text.

Use it when a brand hue has to become a full scale in a Tailwind project — it removes the usual evening of squinting at hex values and guessing which step should be lighter. Keep the generated values in source control and regenerate only when the brand hue changes, because hand-editing steps inside a generated scale is how a palette starts drifting. Where the destination is CSS custom properties rather than a Tailwind config, the variable tools write that instead, and where a shorter ladder is enough, the shade generator covers six steps without step names. Treat the output as a 50 to 950 ramp with a fixed shape rather than as eleven independently chosen colours, and let the tailwind config snippet be the only place those values are written down: a scale that lives in two files drifts within a month. Because every step descends from one hue, the theme never collects a stray blue that belongs to another family, which is the quiet advantage of generating a scale instead of copying one, and of regenerating only when the hue itself changes.

How to use Tailwind Palette Generator

1. Set the base colour with the picker field.
2. Review the eleven steps from 50 to 950, noting how the light end moves quickly and the dark end compresses.
3. Copy the tailwind.config.js snippet from the output panel.
4. Paste it into the theme's extend block and keep the generated values under source control.

When to use Tailwind Palette Generator vs related tools

Use this when a Tailwind project needs a brand scale from a single hue. The CSS variables generator writes custom properties instead, the Material palette generator produces a ten-step ramp with conventional step names, and the palette accessibility checker shows which steps can carry text.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Tailwind Palette Generator