# Tailwind CSS colors: the v4 OKLCH palette, custom colors and shades

Tailwind CSS v4 ships 26 color scales with 11 shades each, from 50 to 950, for 286 colors defined in OKLCH as CSS variables like --color-blue-500. You add your own with @theme { --color-brand-500: oklch(...) }. The same step number does not mean the same lightness: blue-600 is the lightest blue that passes 4.5:1 on white, while yellow needs 700.

Source: https://pickshade.com/tailwind-colors
Updated: 2026-09-28

## How the Tailwind color palette is structured

The default palette in Tailwind v4.3 has 26 named scales. Seventeen are chromatic: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink and rose. Nine are neutrals: slate, gray, zinc, neutral and stone from v3, plus mauve, olive, mist and taupe added during v4. Black and white come on top.

Every scale has the same 11 steps: 50, 100, 200 through 900, and 950. 50 is almost white, 950 is almost black. A class is the utility plus the color and the step: bg-blue-500, text-rose-700, border-zinc-200.

The step number is a position in the scale, not a lightness value. Step 500 ranges from 55.1% OKLCH lightness in gray to 79.5% in yellow, which is why yellow-500 and blue-500 behave very differently as text colors.

| Class | OKLCH value | Hex fallback | Contrast on white |
| --- | --- | --- | --- |
| yellow-500 | oklch(79.5% 0.184 86.047) | #efb100 | 1.92:1 |
| amber-500 | oklch(76.9% 0.188 70.08) | #fd9a00 | 2.14:1 |
| green-500 | oklch(72.3% 0.219 149.579) | #00c950 | 2.22:1 |
| cyan-500 | oklch(71.5% 0.143 215.221) | #00b8db | 2.37:1 |
| orange-500 | oklch(70.5% 0.213 47.604) | #ff6900 | 2.89:1 |
| red-500 | oklch(63.7% 0.237 25.331) | #fb2c36 | 3.81:1 |
| blue-500 | oklch(62.3% 0.214 259.815) | #2b7fff | 3.76:1 |
| indigo-500 | oklch(58.5% 0.233 277.117) | #615fff | 4.58:1 |
| gray-500 | oklch(55.1% 0.027 264.364) | #6a7282 | 4.84:1 |

## Tailwind blue: every shade with OKLCH, hex and contrast

Here is the full blue scale as Tailwind v4 defines it. The hex column is the nearest sRGB color, found by lowering chroma while keeping lightness and hue. Contrast ratios are WCAG 2 values measured on that hex.

Blue-600 is the first step that passes 4.5:1 for body text on white. Blue-500 passes on black at 5.58:1 but fails on white at 3.76:1. No blue step passes 4.5:1 on both, so light and dark themes need different steps.

| Class | OKLCH value | Hex fallback | On white | On black |
| --- | --- | --- | --- | --- |
| blue-50 | oklch(97% 0.014 254.604) | #eff6ff | 1.09:1 | 19.30:1 |
| blue-100 | oklch(93.2% 0.032 255.585) | #dbeafe | 1.22:1 | 17.21:1 |
| blue-200 | oklch(88.2% 0.059 254.128) | #bedbff | 1.42:1 | 14.77:1 |
| blue-300 | oklch(80.9% 0.105 251.813) | #8ec5ff | 1.81:1 | 11.58:1 |
| blue-400 | oklch(70.7% 0.165 254.624) | #51a2ff | 2.64:1 | 7.96:1 |
| blue-500 | oklch(62.3% 0.214 259.815) | #2b7fff | 3.76:1 | 5.58:1 |
| blue-600 | oklch(54.6% 0.245 262.881) | #155dfc | 5.25:1 | 4.00:1 |
| blue-700 | oklch(48.8% 0.243 264.376) | #1447e6 | 6.83:1 | 3.07:1 |
| blue-800 | oklch(42.4% 0.199 265.638) | #193cb8 | 8.82:1 | 2.38:1 |
| blue-900 | oklch(37.9% 0.146 265.522) | #1c398e | 10.37:1 | 2.03:1 |
| blue-950 | oklch(28.2% 0.091 267.935) | #162456 | 14.78:1 | 1.42:1 |

## Which Tailwind shades pass WCAG AA on white

The lightest passing step depends on the hue. Orange, amber, yellow, lime and the greens, teals, cyans and sky blues are still light at 500, so they need 700 for body text. Red, blue, violet, purple, fuchsia, pink and rose pass at 600, indigo already at 500. Yellow is the outlier: even yellow-600 fails large text at 2.93:1.

Lightness predicts the result better than the step number. Across all 286 colors, every shade with OKLCH lightness below 58% passes 4.5:1 on white, and every shade above 59.2% fails. Read the L in the class value and you know the answer before you test it.

| Color | Lightest step for 4.5:1 | Hex | Ratio | Lightest step for 3:1 |
| --- | --- | --- | --- | --- |
| red | 600 | #e7000b | 4.77:1 | 500 |
| orange | 700 | #ca3500 | 5.22:1 | 600 |
| amber | 700 | #bb4d00 | 5.03:1 | 600 |
| yellow | 700 | #a65f00 | 4.93:1 | 700 |
| lime | 700 | #497d00 | 4.98:1 | 600 |
| green | 700 | #008236 | 4.95:1 | 600 |
| emerald | 700 | #007a55 | 5.36:1 | 600 |
| teal | 700 | #00786f | 5.36:1 | 600 |
| cyan | 700 | #007595 | 5.28:1 | 600 |
| sky | 700 | #0069a8 | 5.86:1 | 600 |
| blue | 600 | #155dfc | 5.25:1 | 500 |
| indigo | 500 | #615fff | 4.58:1 | 400 |
| violet | 600 | #7f22fe | 5.89:1 | 500 |
| purple | 600 | #9810fa | 5.54:1 | 500 |
| fuchsia | 600 | #c800de | 4.66:1 | 500 |
| pink | 600 | #e60076 | 4.54:1 | 500 |
| rose | 600 | #ec003f | 4.53:1 | 500 |
| gray | 500 | #6a7282 | 4.84:1 | 500 |
| olive | 600 | #5b5b4b | 6.90:1 | 500 |

All neutrals except olive pass at 500. Olive-500 sits at 58% lightness with a yellowish hue and reaches only 4.25:1, so gray-500 text and olive-500 text are not interchangeable.

## Tailwind v3 vs v4 colors

v3 defined colors as hex values in tailwind.config.js under theme.extend.colors. v4 moves configuration into CSS: colors are theme variables inside @theme, written in OKLCH, and exposed as CSS variables, so var(--color-blue-500) works in plain CSS and inline styles.

The palette itself was re-tuned, not redrawn. Converted to OKLCH, v3 blue-500 (#3b82f6) has exactly the same lightness and hue as v4 blue-500. Only chroma went up, from 0.188 to 0.214. The rest of the blue scale follows the same pattern, except blue-400, which also got 0.7 points darker. Contrast barely moves while colors look more vivid.

That extra chroma reaches beyond sRGB. 94 of the 286 v4 colors are outside sRGB and inside Display P3, all of them chromatic. Orange has 9 of 11 steps outside, blue has 4 (200 to 500). On a P3 screen you see the full color, on an sRGB screen the browser shows a nearby one. v4 targets Safari 16.4, Chrome 111 and Firefox 128 or newer, which all understand oklch().

| Class | v3 hex | v4 hex fallback | Chroma v3 to v4 | On white v3 to v4 |
| --- | --- | --- | --- | --- |
| blue-400 | #60a5fa | #51a2ff | 0.143 to 0.165 | 2.54 to 2.64 |
| blue-500 | #3b82f6 | #2b7fff | 0.188 to 0.214 | 3.68 to 3.76 |
| blue-600 | #2563eb | #155dfc | 0.215 to 0.245 | 5.17 to 5.25 |
| blue-700 | #1d4ed8 | #1447e6 | 0.217 to 0.243 | 6.70 to 6.83 |

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

.card {
    border-color: var(--color-blue-500);
}
```

## How to add custom colors in Tailwind v4

Declare a variable in the --color- namespace inside @theme. The part after --color- becomes the class name, so --color-brand gives you bg-brand, text-brand, border-brand, ring-brand and every other color utility, plus var(--color-brand) in CSS. Hex, rgb(), hsl() and oklch() are all accepted.

To replace the default palette instead of extending it, reset the namespace first with --color-*: initial, then define only the colors you want. Utilities are generated only for classes you actually use, so most projects keep the defaults.

```css
@import 'tailwindcss';

@theme {
    --color-brand: #e4572e;
    --color-ink: oklch(21% 0.02 260);
}
```

A single --color-brand is fine for one accent. As soon as you need hover states, tinted backgrounds or dark mode, define a full scale with numbered steps.

## How to build a full 50 to 950 custom scale

The scale below was generated from #e4572e. Its lightness of 63.7% matches step 500, so the brand color stays exactly at 500. The other steps follow Tailwind’s lightness curve, keep the same hue, chroma peaks at 500 and 600 and tapers toward both ends, and all of them fit inside sRGB, so the hex values are exact.

Like Tailwind’s own warm hues, this scale needs 600 for body text on white. Brand-500 gives 3.68:1, enough for large text and icons only.

| Class | Hex | On white |
| --- | --- | --- |
| brand-50 | #fcf3f0 | 1.09:1 |
| brand-100 | #fae4de | 1.22:1 |
| brand-200 | #f8cec3 | 1.44:1 |
| brand-300 | #f3ae9a | 1.85:1 |
| brand-400 | #ed7d5e | 2.73:1 |
| brand-500 | #e4572e | 3.68:1 |
| brand-600 | #ce3a00 | 4.97:1 |
| brand-700 | #ae3000 | 6.52:1 |
| brand-800 | #912600 | 8.46:1 |
| brand-900 | #77260e | 10.15:1 |
| brand-950 | #441508 | 15.48:1 |

```css
@theme {
    --color-brand-50: oklch(97% 0.01103 36.478);
    --color-brand-100: oklch(93.477% 0.02574 36.478);
    --color-brand-200: oklch(88.485% 0.04964 36.478);
    --color-brand-300: oklch(81.145% 0.08641 36.478);
    --color-brand-400: oklch(71.064% 0.14524 36.478);
    --color-brand-500: oklch(63.723% 0.18385 36.478);
    --color-brand-600: oklch(56.583% 0.19167 36.478);
    --color-brand-700: oklch(49.952% 0.16921 36.478);
    --color-brand-800: oklch(43.729% 0.14814 36.478);
    --color-brand-900: oklch(38.935% 0.11766 36.478);
    --color-brand-950: oklch(27% 0.07538 36.478);
}
```

Keep the full precision when you paste. Rounding lightness to 0.1% and chroma to three decimals pushes brand-600 just outside sRGB, which is harmless but no longer matches the hex exactly.

## How opacity modifiers like bg-blue-500/50 work

A slash after the color sets its alpha: bg-blue-500/50 is blue-500 at 50%. v3 compiled this to rgb(59 130 246 / 0.5), which only worked for colors Tailwind could split into channels. Custom colors defined as CSS variables needed a special rgb(var(--brand) / <alpha-value>) format.

v4 compiles the modifier to color-mix() in Oklab, mixing the color with transparent. That works with any color: theme variables, arbitrary values like bg-[#e4572e]/50 and your own CSS variables.

Opacity changes contrast. Over white, blue-500/50 renders as #95bfff and blue-500/10 as #eaf2ff. Text in blue-600 reads at 5.25:1, but text-blue-600/60 drops to 2.62:1 and fails even for large text.

- blue-500: #2b7fff
- blue-500/50 on white: #95bfff
- blue-500/20 on white: #d5e5ff
- blue-500/10 on white: #eaf2ff

```css
.bg-blue-500\/50 {
    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
}
```

## How to find the nearest Tailwind class for any hex

Compare the hex with all 286 shades by perceptual distance in Oklab (ΔEOK). Below about 0.02 the difference is hard to see side by side, so the Tailwind class can replace your color. Above about 0.04, add a custom color instead.

The table shows real matches. Old v3 hex values map back to the same v4 class, while a typical brand orange like #ff5733 falls between orange-600 and red-400. The PickShade Tailwind page does this lookup for any color and shows the three closest classes.

| Your color | Nearest v4 class | Class fallback | ΔEOK |
| --- | --- | --- | --- |
| #635bff | indigo-500 | #615fff | 0.008 |
| #1da1f2 | sky-500 | #00a6f4 | 0.020 |
| #10b981 | emerald-500 | #00bc7d | 0.021 |
| #3b82f6 | blue-500 | #2b7fff | 0.026 |
| #e4572e | orange-600 | #f54900 | 0.042 |
| #ff5733 | orange-600 | #f54900 | 0.046 |

## Questions and answers

### How many colors does Tailwind CSS have?

Tailwind CSS v4.3 has 26 color scales with 11 shades each, from 50 to 950, which makes 286 colors plus black and white. Seventeen scales are chromatic and nine are neutrals: slate, gray, zinc, neutral, stone, mauve, olive, mist and taupe.

### What is the hex code of Tailwind blue-500?

In Tailwind v4, blue-500 is oklch(62.3% 0.214 259.815), which is slightly outside sRGB; its nearest hex is #2b7fff. In Tailwind v3, blue-500 was #3b82f6, with the same lightness and hue but lower chroma.

### How do I add custom colors in Tailwind v4?

Add a variable in the --color- namespace inside @theme in your CSS, for example @theme { --color-brand-500: oklch(63.7% 0.184 36.48); }. Tailwind then generates bg-brand-500, text-brand-500 and every other color utility, and the value is available as var(--color-brand-500).

### Which Tailwind colors are accessible on a white background?

For 4.5:1 body text on white, use 600 for red, blue, violet, purple, fuchsia, pink and rose, 700 for orange, amber, yellow, lime, green, emerald, teal, cyan and sky, and 500 for indigo and most neutrals. Olive is the exception among neutrals and needs 600.

### Why do Tailwind v4 colors look more saturated than v3?

Tailwind v4 defines colors in OKLCH and raised their chroma. In the blue scale, for example, lightness and hue stayed almost exactly as in v3 while chroma of the middle steps went up by 0.02 to 0.03. 94 of the 286 colors are now outside sRGB and use the wider Display P3 gamut, so they look more vivid on P3 screens such as recent iPhones and Macs.

### Can I use hex colors in Tailwind v4 @theme?

Yes. Theme variables accept any CSS color, including hex, rgb(), hsl() and oklch(). Opacity modifiers work with all of them because v4 builds them with color-mix().

## Tools

- [Tailwind palette and nearest class finder](https://pickshade.com/tailwind)
- [Color converter: hex, RGB, HSL, OKLCH](https://pickshade.com/convert)
- [Palette generator](https://pickshade.com/palette)
- [Contrast checker](https://pickshade.com/contrast)

## Related guides

- [OKLCH explained: the color format that finally matches your eyes](https://pickshade.com/oklch)
- [Color gamut explained: sRGB, Display P3 and out-of-gamut colors](https://pickshade.com/gamut)
- [CSS color-mix() and relative colors: tints, hovers and transparency](https://pickshade.com/css-color-mix)