Tailwind CSS Colors

Every default Tailwind CSS color, plus a generator that turns any hex into a full 50–950 scale you can paste straight into your config.

What changed in Tailwind v4

Tailwind CSS v4 rebuilt the default palette in OKLCH rather than hex. The names and shade numbers stayed the same, but many of the actual colors shifted, so a v3 hex you have memorised may no longer match the v4 swatch of the same name.

red-500 is the clearest example: it was #ef4444 in v3 and is #fb2c36 in v4. Colors near the edge of the sRGB gamut moved the most, because OKLCH lets Tailwind describe vivid colors that hex notation clips. The table above shows the v4 values; switch it to OKLCH to see the source-of-truth definitions.

The practical difference is where colors live. In v3 you extend theme.colors in tailwind.config.js. In v4 you declare them as CSS variables inside an @theme block, and Tailwind generates the utilities from those. The generator above will output either form.

How to add a custom color to Tailwind

Pick your brand color in the generator, choose your Tailwind version, and copy the config. For v4, paste the @theme block into your main CSS file:

@import "tailwindcss";

@theme {
  --color-brand-50: oklch(97% 0.014 254.604);
  --color-brand-500: oklch(62.3% 0.214 259.815);
  --color-brand-950: oklch(28.2% 0.091 267.935);
}

That gives you bg-brand-500, text-brand-50, border-brand-950 and every other utility for free. For v3, paste the JSON object under theme.extend.colors instead.

Why Tailwind uses 11 shades

The 50–950 scale is designed so the same number means roughly the same lightness across every hue. That is what makes bg-blue-500 and bg-red-500 feel like siblings, and why you can swap a palette wholesale without re-checking every contrast pair.

In practice: 50–200 for backgrounds and subtle fills, 300–400 for borders and disabled states, 500–600 for the main brand color and buttons, 700–800 for hover states and body text on light backgrounds, 900–950 for headings and dark surfaces. Anchoring your brand color at 500 and generating the rest is the fastest way to a coherent set. Check the pairs you rely on with the contrast checker before you ship.

Common questions

What are the Tailwind color hex codes?

They are listed in the table above, covering all 26 color families across 11 shades each. Click any swatch to copy its hex, or switch the format toggle to copy the OKLCH value or the utility class name instead.

Did the Tailwind colors change in v4?

Yes. v4 redefined the palette in OKLCH, which shifted many values while keeping the names identical. red-500 moved from #ef4444 to #fb2c36. If you are upgrading and a color looks slightly off, this is why.

How do I generate a Tailwind palette from one color?

Enter your hex in the generator at the top of this page. Your exact color is placed at 500, the base shade Tailwind builds around, and the remaining stops are built along an OKLCH lightness curve fitted to Tailwind’s own palette. Hue is held constant and chroma is reduced to the sRGB boundary rather than clipped, so the light and dark ends stay the same color family instead of drifting. Enter a near-white or near-black and it anchors at 50 or 950 instead, where that lightness actually belongs.

Should I use hex or OKLCH in my config?

OKLCH if your browser support allows it, since that is how v4 defines its own palette and it keeps lightness consistent when you adjust a hue. Hex is still fine and is what the format toggle gives you by default. Both produce identical utilities.

More color tools

Building a full palette rather than one scale? The color palette generator exports directly to Tailwind config too. You can also pull a palette out of an image, generate tints and shades of a single color, or browse the palette library for a starting point.