Tailwind CSS colors: full v4 and v3 palette

Every Tailwind CSS color, from 50 to 950, with its official values in OKLCH (v4) and HEX (v3). Click a shade to copy its class, CSS variable or code.

Version

Copy as

New in Tailwind v4: Mauve, Olive, Mist and Taupe, four tinted grays.

Values of each color

Pick a color to see its eleven shades with the class, OKLCH, HEX, RGB and the text color that contrasts best.

Slate · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa20.1:1
100					Aa19.2:1
200					Aa17.0:1
300					Aa14.1:1
400					Aa8.0:1
500					Aa4.8:1
600					Aa7.6:1
700					Aa10.4:1
800					Aa14.6:1
900					Aa17.8:1
950					Aa20.2:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Gray · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa20.1:1
100					Aa19.1:1
200					Aa17.0:1
300					Aa14.3:1
400					Aa8.1:1
500					Aa4.8:1
600					Aa7.6:1
700					Aa10.3:1
800					Aa14.7:1
900					Aa17.7:1
950					Aa20.1:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Zinc · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa20.1:1
100					Aa19.1:1
200					Aa16.6:1
300					Aa14.2:1
400					Aa8.0:1
500					Aa4.8:1
600					Aa7.7:1
700					Aa10.4:1
800					Aa14.9:1
900					Aa17.7:1
950					Aa19.9:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Neutral · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa20.1:1
100					Aa19.3:1
200					Aa16.7:1
300					Aa14.2:1
400					Aa8.1:1
500					Aa4.7:1
600					Aa7.8:1
700					Aa10.4:1
800					Aa15.1:1
900					Aa17.9:1
950					Aa19.8:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Stone · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa20.1:1
100					Aa19.2:1
200					Aa16.7:1
300					Aa14.1:1
400					Aa8.1:1
500					Aa4.8:1
600					Aa7.6:1
700					Aa10.3:1
800					Aa15.2:1
900					Aa17.5:1
950					Aa19.8:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Mauve · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa20.1:1
100					Aa18.7:1
200					Aa16.6:1
300					Aa13.9:1
400					Aa8.1:1
500					Aa5.1:1
600					Aa8.0:1
700					Aa10.8:1
800					Aa15.5:1
900					Aa17.7:1
950					Aa19.8:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Olive · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa20.3:1
100					Aa19.0:1
200					Aa17.1:1
300					Aa14.7:1
400					Aa9.0:1
500					Aa4.9:1
600					Aa6.9:1
700					Aa9.4:1
800					Aa14.3:1
900					Aa16.9:1
950					Aa19.6:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Mist · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa20.2:1
100					Aa18.9:1
200					Aa16.9:1
300					Aa14.3:1
400					Aa8.6:1
500					Aa4.6:1
600					Aa7.4:1
700					Aa10.0:1
800					Aa14.8:1
900					Aa17.4:1
950					Aa19.7:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Taupe · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa20.1:1
100					Aa18.7:1
200					Aa16.6:1
300					Aa14.0:1
400					Aa8.2:1
500					Aa5.0:1
600					Aa7.9:1
700					Aa10.6:1
800					Aa15.2:1
900					Aa17.6:1
950					Aa19.8:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Red · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa19.2:1
100					Aa17.2:1
200					Aa14.5:1
300					Aa10.9:1
400					Aa7.3:1
500					Aa5.5:1
600					Aa4.8:1
700					Aa6.4:1
800					Aa8.4:1
900					Aa10.0:1
950					Aa16.2:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Orange · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa19.8:1
100					Aa18.3:1
200					Aa15.4:1
300					Aa12.3:1
400					Aa8.8:1
500					Aa7.3:1
600					Aa5.8:1
700					Aa5.2:1
800					Aa7.4:1
900					Aa9.4:1
950					Aa15.7:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Amber · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa20.3:1
100					Aa18.8:1
200					Aa16.9:1
300					Aa14.5:1
400					Aa12.2:1
500					Aa9.8:1
600					Aa6.6:1
700					Aa5.0:1
800					Aa7.1:1
900					Aa9.1:1
950					Aa15.0:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Yellow · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa20.3:1
100					Aa19.5:1
200					Aa18.1:1
300					Aa15.8:1
400					Aa13.3:1
500					Aa11.0:1
600					Aa7.1:1
700					Aa4.9:1
800					Aa6.8:1
900					Aa8.7:1
950					Aa14.5:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Lime · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa20.3:1
100					Aa19.3:1
200					Aa17.9:1
300					Aa16.2:1
400					Aa13.7:1
500					Aa10.8:1
600					Aa6.9:1
700					Aa5.0:1
800					Aa7.1:1
900					Aa8.8:1
950					Aa14.6:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Green · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa20.1:1
100					Aa19.1:1
200					Aa17.4:1
300					Aa15.0:1
400					Aa11.8:1
500					Aa9.5:1
600					Aa6.5:1
700					Aa4.9:1
800					Aa7.1:1
900					Aa9.1:1
950					Aa14.9:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Emerald · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa19.9:1
100					Aa18.5:1
200					Aa16.4:1
300					Aa13.8:1
400					Aa10.8:1
500					Aa8.5:1
600					Aa5.7:1
700					Aa5.4:1
800					Aa7.6:1
900					Aa9.6:1
950					Aa15.2:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Teal · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa20.1:1
100					Aa18.6:1
200					Aa16.7:1
300					Aa14.2:1
400					Aa11.3:1
500					Aa8.7:1
600					Aa5.7:1
700					Aa5.4:1
800					Aa7.5:1
900					Aa9.4:1
950					Aa14.5:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Cyan · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa20.2:1
100					Aa18.7:1
200					Aa16.9:1
300					Aa14.6:1
400					Aa11.6:1
500					Aa8.9:1
600					Aa5.8:1
700					Aa5.3:1
800					Aa7.2:1
900					Aa9.1:1
950					Aa13.4:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Sky · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa19.7:1
100					Aa18.3:1
200					Aa15.8:1
300					Aa12.6:1
400					Aa9.6:1
500					Aa7.8:1
600					Aa5.2:1
700					Aa5.9:1
800					Aa7.5:1
900					Aa9.5:1
950					Aa13.9:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Blue · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa19.3:1
100					Aa17.2:1
200					Aa14.8:1
300					Aa11.6:1
400					Aa8.0:1
500					Aa5.6:1
600					Aa5.2:1
700					Aa6.8:1
800					Aa8.8:1
900					Aa10.4:1
950					Aa14.8:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Indigo · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa18.8:1
100					Aa17.0:1
200					Aa14.1:1
300					Aa10.4:1
400					Aa6.7:1
500					Aa4.6:1
600					Aa6.5:1
700					Aa8.1:1
800					Aa10.1:1
900					Aa11.5:1
950					Aa16.0:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Violet · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa19.1:1
100					Aa17.7:1
200					Aa15.1:1
300					Aa11.3:1
400					Aa7.4:1
500					Aa4.8:1
600					Aa5.9:1
700					Aa7.3:1
800					Aa9.2:1
900					Aa11.0:1
950					Aa15.2:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Purple · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa19.6:1
100					Aa17.8:1
200					Aa15.3:1
300					Aa11.8:1
400					Aa7.5:1
500					Aa5.1:1
600					Aa5.5:1
700					Aa7.1:1
800					Aa8.9:1
900					Aa11.0:1
950					Aa15.0:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Fuchsia · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa19.6:1
100					Aa18.1:1
200					Aa15.3:1
300					Aa11.9:1
400					Aa8.1:1
500					Aa5.9:1
600					Aa4.7:1
700					Aa6.3:1
800					Aa8.4:1
900					Aa10.1:1
950					Aa14.9:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Pink · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa19.2:1
100					Aa17.9:1
200					Aa15.1:1
300					Aa11.5:1
400					Aa7.6:1
500					Aa5.9:1
600					Aa4.6:1
700					Aa5.9:1
800					Aa7.9:1
900					Aa9.7:1
950					Aa15.1:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

Rose · Tailwind v4

Shade	Class	OKLCH	HEX	RGB	Text
50					Aa19.1:1
100					Aa17.5:1
200					Aa14.8:1
300					Aa11.0:1
400					Aa7.3:1
500					Aa5.6:1
600					Aa4.6:1
700					Aa6.0:1
800					Aa7.9:1
900					Aa9.6:1
950					Aa15.7:1

Tailwind v4 defines its colors in OKLCH and some fall outside the sRGB range. The HEX is the nearest sRGB color.

What the Tailwind CSS color palette is

Tailwind CSS ships a default color palette organized in named families (Slate, Red, Blue…) with eleven shades each, from 50 (the lightest) to 950 (the darkest). That numbering has become a standard used by many other libraries.

Each color is used through classes such as bg-blue-500 or text-red-700. In the table above you can copy the class name, the CSS variable or the code in HEX, RGB, HSL or OKLCH.

Which shade to use for what

There are no fixed rules, but most interfaces built with Tailwind follow a similar pattern within each family:

50–100: Backgrounds. Soft surfaces, cards and highlighted areas.
200–300: Borders. Dividers, field borders and disabled states.
500–600: Action. Buttons, links and active elements. 600 usually contrasts better with white text.
700–900: Text. Headings and text on light backgrounds of the same family.
950: Dark mode. Dark backgrounds with a hint of color instead of pure black.

Tailwind v3 and v4: what changes in the colors

Names and numbering are the same, but the values are not: v4 recalibrated the whole palette. That is why this page shows the official values of each version separately.

blue-500 = oklch(62.3% 0.214 259.815)

Tailwind v4

Colors defined in OKLCH, with more even lightness steps.
More vivid shades, designed for wide-gamut screens (Display P3).
Every color exists as a CSS variable: var(--color-blue-500).
Four new tinted grays: Mauve, Olive, Mist and Taupe.

blue-500 = #3b82f6

Tailwind v3

Colors defined in HEX (sRGB).
22 families: 5 grays and 17 colors.
Used through classes or the theme('colors.blue.500') function.
Still the version of many existing projects.

How to use Tailwind colors in your CSS

Besides classes, you can use any palette color in your own CSS. In v4 they are regular CSS variables; in v3 you reach them with the theme() function.

Tailwind v4

@import "tailwindcss";

.card {
  background: var(--color-blue-50);
  border: 1px solid var(--color-blue-200);
  color: var(--color-blue-900);
}

@theme {
  --color-brand-500: oklch(62.3% 0.214 259.815);
}

Tailwind v3

.card {
  background: theme('colors.blue.50');
  border: 1px solid theme('colors.blue.200');
  color: theme('colors.blue.900');
}

To add your own color in v4, declare it in @theme with the --color- prefix and you get its classes automatically (bg-brand-500, text-brand-500…).

Frequently asked questions

Names and numbering are the same, but v4 recalibrated the palette in OKLCH: shades are a bit more vivid and lightness steps more even. That is why the HEX of blue-500 differs between versions. v4 also adds four new grays: Mauve, Olive, Mist and Taupe.

It’s Tailwind’s standard scale: 50 is the lightest shade (almost white) and 950 the darkest (almost black), with intermediate steps meant to cover backgrounds, text, borders and states consistently across an interface.

In Tailwind v4 every color is available as a CSS variable, for example var(--color-blue-500). In v3 you use the theme('colors.blue.500') function inside your CSS files.

Tailwind v4 defines colors in OKLCH, and some fall outside the sRGB range a HEX code can represent. In those cases we show the nearest HEX; if your project supports OKLCH, use that value to get the exact color.

The “Text” column of each color shows whether white or black contrasts better, with its ratio. As a reference, normal text needs at least 4.5:1; you can check any pair in the contrast checker.

OKLCH is a color space where lightness is calculated perceptually, so two colors with the same lightness value look equally light to the human eye. That produces more even color scales than those based on traditional RGB.