Tailwind CSS Colors Reference

Tailwind ships with 22 hand-picked color families covering the full spectrum — from slate, gray, zinc, neutral and stone neutrals through red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink and rose.

Each family includes 11 shades numbered 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 and 950, where 50 is the lightest and 950 is the darkest. There are also single-value utilities for black, white, transparent and currentColor.

Click any swatch on the page to copy its primary value to your clipboard. The default copy format is the utility class name, but you can switch the active format to HEX, OKLCH, or the CSS variable using the controls at the top of the palette.

Hold Shift while clicking to copy the alternate format without changing your default. A toast confirmation appears so you know exactly what was copied.

OKLCH is a perceptually uniform color space, meaning equal numeric steps look like equal visual steps to the human eye. That makes shade ramps from 50 to 950 feel smooth and predictable, which is hard to achieve with HEX or HSL.

OKLCH also unlocks colors outside the sRGB gamut on modern wide-gamut displays, so vibrant tones like emerald-500 or fuchsia-500 look richer than they would in older formats. Tailwind still exposes HEX values for compatibility, and this reference shows both side by side.

Shade 900 has long been Tailwind's darkest tone, but 950 was added later to provide an even deeper option. The 950 step is very dark while still retaining a visible tint of the parent hue, so it reads as a dark navy or deep plum rather than pure black.

This is especially useful for dark-mode surfaces where you want a near-black background that still carries brand character. Pair it with shade 50 or 100 text for high-contrast, on-brand dark UI.

Yes. The HEX and class-name values shown here work with both Tailwind v3 and v4. In v3 you reference the palette through tailwind.config.js, while in v4 the same colors are exposed as CSS custom properties under the @theme directive.

The OKLCH values are the canonical v4 source, so if you're on v4 you can paste them directly into your @theme block. If you're on v3, the HEX equivalents will produce visually identical results.

In Tailwind v4, define new CSS custom properties under the @theme directive, for example --color-brand-500 with your chosen value. Tailwind automatically generates matching utilities like bg-brand-500 and text-brand-500.

In Tailwind v3, add the new color object under theme.extend.colors in your tailwind.config.js. Either way, you'll usually want all 11 shades — generating a full 50–950 ramp from a single base color is the easiest way to keep your custom palette consistent with the defaults.

Tailwind's palette is designed so that pairing a light shade (50–300) with a dark shade (700–950) of the same family generally produces strong contrast. However, mid-range pairs like 400 on 500 often fail WCAG AA, so you should always verify specific combinations.

Run any pair through a contrast checker before shipping. As a rule of thumb, body text needs a 4.5:1 contrast ratio against its background, and large text needs at least 3:1.