Tailwind Neutral
All 11 Neutral shades, 50 to 950 — click any value to copy it as hex, OKLCH, RGB, HSL or class name.
Neutral is Tailwind's pure achromatic gray — no hue at all. Choose it when you want colours to stay perfectly true and let your accent do all the talking, common in editorial and photography sites.
Click any value to copy it. All 11 Neutral shades (50–950) in hex, OKLCH, RGB, HSL and Tailwind class.
| Swatch | Shade | Class | Hex | OKLCH | RGB | HSL |
|---|---|---|---|---|---|---|
| 50 | ||||||
| 100 | ||||||
| 200 | ||||||
| 300 | ||||||
| 400 | ||||||
| 500 | ||||||
| 600 | ||||||
| 700 | ||||||
| 800 | ||||||
| 900 | ||||||
| 950 |
What is Tailwind Neutral?
Tailwind Neutral is one of the 22 default color families in Tailwind CSS, published as 11 shades running from neutral-50 (lightest) to neutral-950 (darkest). Tailwind CSS v4 defines every shade in OKLCH, with a hex fallback for older browsers. Reach them through utility classes such as bg-neutral-500, text-neutral-700 and border-neutral-200 — no config needed.
Where to use Tailwind Neutral
- Truly neutral backgrounds:
bg-neutral-100/bg-neutral-900. - Text:
text-neutral-900/text-neutral-100. - Subtle borders:
border-neutral-200.
Related Tailwind colors
Related tools
- Tailwind Colors — the full palette, all 22 families and 242 shades.
- Shadcn Theme Generator — turn Neutral into light and dark shadcn tokens.
- OKLCH Converter — convert any Neutral hex to OKLCH, RGB or HSL.
- Color Shades Generator — turn your own brand color into an OKLCH tint and shade scale.
