Tailwind CSS Color Palette Generator

Tailwind CSS v4 defines every default color in OKLCH, for example --color-blue-500: oklch(62.3% 0.214 259.815). Reading the values side by side shows the recipe:

Three patterns stand out. Lightness falls from about 97% at 50 to between 26% and 30% at 950, but each hue sits at its own height: yellow's 500 is far lighter than blue's, because a dark yellow stops looking yellow. Chroma peaks mid-scale, between 400 and 600 depending on hue (400 for amber, yellow, lime, emerald, teal and cyan; 500 for green, sky and fuchsia; 600 for reds, blues and purples), and tapers at both ends, so pale tints and deep shades stay calm. Hue drifts slightly: blue moves from 254.6° to 267.9°, and yellow warms from 102° to 54° so its dark shades read as golden brown instead of olive. The neutral palettes (slate, gray, zinc, neutral and stone, plus mauve, olive, mist and taupe added in v4.2) run darker still, down to about 13–15% at 950.

Instead of a generic lightness ramp, the generator learns the curve from Tailwind's own 17 chromatic palettes:

1. It finds the two Tailwind palettes whose hue, at your color's lightness, is nearest on either side, and blends their lightness, chroma and hue-drift curves. A teal gets a teal-shaped curve; an orange-red gets something between red and orange.
2. Low-chroma colors such as slate blues and warm grays blend toward Tailwind's neutral curve, which runs darker at 950.
3. Your color is placed at the shade whose lightness it matches (its natural position) and locked there unchanged. The curve is remapped around it so neighbors keep Tailwind's spacing.
4. Chroma is scaled by how saturated your color is compared with Tailwind's color at the same shade, so a muted brand color yields a muted scale.
5. Out-of-gamut shades are brought into sRGB (or Display P3) by reducing chroma only, keeping lightness and hue.

Feed it a Tailwind color and you get that palette back closely: #7c3aed (v3 violet-600) lands at 600 and produces #f5f3fe at 50, #8b5cf6 at 500 and #6d2bd7 at 700, against Tailwind's #f5f3ff, #8b5cf6 and #6d28d9.

Tailwind v4 is configured in CSS. Any variable in the --color-* namespace inside @theme becomes a full set of utilities:

@import "tailwindcss";

@theme {
  --color-brand-50: oklch(97.7% 0.014 308.3);
  --color-brand-500: oklch(62.7% 0.265 303.9);
  --color-brand-950: oklch(29.1% 0.149 302.7);
  /* …all 11 shades from the export panel */
}

<button class="bg-brand-600 text-white hover:bg-brand-700 focus-visible:ring-4 focus-visible:ring-brand-200">
  Get started
</button>

You now have bg-brand-*, text-brand-*, border-brand-*, ring-brand-*, fill-brand-* and the rest, plus CSS variables such as var(--color-brand-500) for use outside utilities. To remove Tailwind's default palette entirely, add --color-*: initial; at the top of the @theme block.

On Tailwind v3, use the Tailwind v3 export instead: it adds the scale under theme.extend.colors in tailwind.config.js, with DEFAULT set to your base color so plain bg-brand works too.

Contrast decides more than taste. In Tailwind v4's default palette (rendered in sRGB), white text first reaches the 4.5:1 AA ratio at 600 for red, blue, violet, purple, fuchsia, pink and rose, at 500 for indigo, and not until 700 for orange, amber, yellow, lime, green, emerald, teal, cyan and sky. The badges on each swatch show this for your scale.

• Primary buttons: 600 fill with white text, 700 on hover. Switch to 700/800 if the 600 badge is below AA.
• Links and colored text on white: 600 or 700.
• Tinted surfaces: 50 or 100 background, 200 border, 800 text.
• Dark mode: flip the scale: 900–950 surfaces, 300–400 accents, 100–200 text.
• Focus rings: 500 at full strength, or 200–300 as a soft halo, checked at 3:1 against the surface.

Check final pairs in the color contrast checker, and see the scale through color-blind eyes in the color blindness simulator.

sRGB (the default) keeps every shade inside the gamut every screen can show, so the OKLCH and HEX exports are exactly the same colors. Choose it when colors must match across Figma, email, PDFs and older browsers.

Display P3 follows what Tailwind v4 itself does: OKLCH values may use the wider P3 gamut, so mid shades look more vivid on modern phones and laptops, while sRGB screens display the nearest color they can. HEX exports always stay sRGB, so the v3 config and JSON remain safe fallbacks.