Tailwind CSS colors

OKLCH first, hex as the fallback

Tailwind CSS 4 defines its colors in OKLCH instead of hex. OKLCH describes a color by lightness, chroma and hue, so steps that share a number look equally light across families, and the palette can use the wider P3 gamut of modern screens. A value like oklch(63.7% 0.237 25.331) for red-500 is more saturated than any hex code can be.

The hex codes on this page are those colors brought into sRGB. Where a color falls outside sRGB, its chroma is reduced at the same lightness and hue until it fits, the gamut mapping CSS Color 4 specifies and browsers use. That is why the v4 hex for red-500 is #fb2c36 and not v3's #ef4444.

New in v4

The scale runs from 50 to 950 in every family. Next to the familiar 22 families, the current palette adds four soft neutrals: mauve, olive, mist and taupe. The v3 palette had the same 22 families in hex. The v2 palette had ten steps, no 950, and names like Light Blue, Warm Gray and Blue Gray that later became sky, stone and slate.

Using the colors

Use a color as a utility (bg-sky-500, text-zinc-900, border-rose-200) or as a CSS variable anywhere in your CSS: color: var(--color-sky-500). To change a color, set it in your theme:

@import "tailwindcss";

@theme {
  /* Shift one step of a family */
  --color-sky-500: oklch(66% 0.16 240);
  /* Or name your own, from the palette */
  --color-brand: var(--color-indigo-600);
}

Need to support an older browser or a tool that only takes hex? Copy the hex value. It is the closest sRGB match to the OKLCH color.