How close is the result to Tailwind’s own colors?

The curves come straight from Tailwind v4’s default palette data. Feeding Tailwind’s own blue-500 or red-500 back in and locking it at 500 reproduces the original palette with a mean OKLab ΔE of roughly 0.003–0.015, which is practically indistinguishable. Real brand colors differ in chroma and lightness; the generated scale keeps your hue and chroma character while matching Tailwind’s light-to-dark distribution.

Should my base color be 500 or 600?

On “Auto” the base goes to the step with the closest lightness, which gives the most natural scale. If your design system says primary buttons use brand-600, lock the base at 600 — that step will be exactly your color and the others adjust around it. Very light colors locked at a dark step leave little room above them, so the lightest shades end up close together.

What’s the difference between the Tailwind v3 and v4 exports?

In v3 you define colors in theme.extend.colors inside tailwind.config.js, and the export uses hex values. In v4 colors are CSS variables such as --color-brand-500 declared in an @theme block, and the official palette uses oklch(), so the v4 export does too. Either way you can then use classes like bg-brand-500 and text-brand-700.

What do the AA, AA18 and AAA badges mean?

They’re WCAG 2.x text contrast levels: AA means a ratio of at least 4.5 and is fine for body text; AA18 means at least 3, which is only enough for large text (18pt / about 24px, or 14pt bold) and UI elements such as icons; AAA means at least 7. Each swatch shows its contrast with white and with black — a shade with AA on white works as body text on a white background.

🟪

🟪Tailwind Palette Generator - 50–950 Shades from One Color

Your brand usually has one color, but your components need bg-brand-50 through bg-brand-950. This tool builds the full 11-step scale from a single base color. It works in the perceptually uniform OKLCH space and follows the lightness and chroma distribution of Tailwind v4’s default palette (taken from tailwindcss/theme.css). By default the curve is interpolated between the two built-in palettes closest in hue, so yellows stay bright and violets go deep just like Tailwind’s own colors, and low-chroma grays blend toward the slate and zinc neutral curves. The base color can sit at the step with the closest lightness, or be locked to 500, 600 or any step so that shade is exactly your color. You can add a hue shift toward the ends or follow Tailwind’s own hue drift, and colors outside sRGB keep their hue while chroma is reduced. Every shade shows its WCAG contrast against white and black with AA / AAA badges, and the three nearest built-in Tailwind palettes are shown for comparison. Generate several named colors at once and export a Tailwind v3 tailwind.config.js, a v4 @theme block with oklch() values, CSS variables, SCSS variables and map, or JSON.

Free · No sign-up · Runs in your browserLast updated: 2026-10-26

Loading tool...

How to use Tailwind Color Palette Generator

1Enter a name and base color (HEX, rgb(), hsl() or oklch()); add more colors if you need them
2Choose which step holds the base color, the lightness curve and any hue shift, and check each shade’s contrast
3Pick an export format — Tailwind v4 / v3, CSS variables, SCSS or JSON — and copy or download it

FAQ

How close is the result to Tailwind’s own colors?: The curves come straight from Tailwind v4’s default palette data. Feeding Tailwind’s own blue-500 or red-500 back in and locking it at 500 reproduces the original palette with a mean OKLab ΔE of roughly 0.003–0.015, which is practically indistinguishable. Real brand colors differ in chroma and lightness; the generated scale keeps your hue and chroma character while matching Tailwind’s light-to-dark distribution.
Should my base color be 500 or 600?: On “Auto” the base goes to the step with the closest lightness, which gives the most natural scale. If your design system says primary buttons use brand-600, lock the base at 600 — that step will be exactly your color and the others adjust around it. Very light colors locked at a dark step leave little room above them, so the lightest shades end up close together.
What’s the difference between the Tailwind v3 and v4 exports?: In v3 you define colors in theme.extend.colors inside tailwind.config.js, and the export uses hex values. In v4 colors are CSS variables such as --color-brand-500 declared in an @theme block, and the official palette uses oklch(), so the v4 export does too. Either way you can then use classes like bg-brand-500 and text-brand-700.
What do the AA, AA18 and AAA badges mean?: They’re WCAG 2.x text contrast levels: AA means a ratio of at least 4.5 and is fine for body text; AA18 means at least 3, which is only enough for large text (18pt / about 24px, or 14pt bold) and UI elements such as icons; AAA means at least 7. Each swatch shows its contrast with white and with black — a shade with AA on white works as body text on a white background.