Tailwind Color Palette Generator & WCAG Contrast Checker

A Tailwind color palette generator turns a single brand color into the full 11-step scale Tailwind CSS expects — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 and 950 — in one click. Instead of hand-tuning eleven hex values in a color picker, you pick one color and instantly get a consistent Tailwind CSS color scale you can paste straight into tailwind.config.js.

This free Tailwind palette generator goes further than a shade generator: every step is checked against WCAG 2.1 contrast ratios in real time, previewed inside real buttons, badges, cards and inputs, and exported as JavaScript config, CSS custom variables or JSON for design-system pipelines. No account, no upload, no server — the whole color calculation runs in your browser.

A Tailwind color scale is an 11-step ramp where 500 is your primary brand color, 50–300 are tints used for hover states, badges and subtle surfaces, and 600–950 are shades used for text, borders and dark-mode backgrounds.

1. Pick a base color — drag the custom saturation/brightness selector and hue slider, paste a hex code, or click any of the 72 colors in the rainbow spectrum palette.
2. Read the contrast badges — each shade shows its live WCAG 2.1 ratio against white and against the #191919 dark background, so you know which steps are safe for body text.
3. Copy the code — click any shade row to copy its hex, or open the export modal to copy the whole tailwind.config.js object, CSS variables or JSON in one click.

The generator anchors your picked color (#3b82f6) at step 500, converts it to HSL, then interpolates the remaining steps by shifting lightness while gently modulating saturation. Extreme tints (50 and 100) are desaturated so they render as clean off-whites instead of neon pastels, and deep shades (800–950) keep enough chroma to stay recognizably on-hue rather than collapsing to grey.

WCAG 2.1 defines contrast as a ratio between 1:1 and 21:1, calculated from the relative luminance of the foreground and background colors. Every shade in the palette above shows its measured ratio against a light surface (#ffffff) and a dark surface (#191919), so you can see at a glance which steps are safe for body text.

• AA (normal text): minimum 4.5:1 — the baseline for most production UI.
• AAA (normal text): 7:1 or higher — the target for long-form reading and accessibility-critical flows.
• Large text (≥18pt or 14pt bold): relaxes to 3:1 (AA) and 4.5:1 (AAA).

Dark mode is where teams most often break compliance: mid-tone shades that pass on white (frequently 400–600) drop below 4.5:1 against near-black backgrounds. The fix is simple — for dark surfaces use shades 100–300 for body text and reserve 500 for accents, icons and borders that only need the 3:1 non-text threshold. Use this tool as a dark mode contrast checker before you ship: if a badge says fail, pick the next step up or down.

Copy the generated object and drop it under theme.extend.colors. Tailwind automatically creates a utility for every step: bg-brand-500, text-brand-700, border-brand-200, plus hover, focus and dark variants of each.

For Tailwind v4 you can skip the JavaScript config entirely and define the scale as CSS custom properties in your stylesheet: @theme { --color-brand-500: #000; } using the CSS variables export from the modal above. Existing components keep working — only the token definition changes.