Tailwind neutral color palette
neutral-50 to neutral-950 in Tailwind v4 OKLCH, sRGB hex and the v3 hex. neutral-500 is #737373 in v4 and #737373 in v3.
Every neutral shade: class, OKLCH, hex and v3 hex
| Shade | Class | v4 OKLCH | v4 hex | v3 hex | Nearest named color |
|---|---|---|---|---|---|
| neutral-50 | bg-neutral-50 | oklch(98.5% 0 none) | #FAFAFA | #FAFAFA | Cultured #F8F9FA |
| neutral-100 | bg-neutral-100 | oklch(97% 0 none) | #F5F5F5 | #F5F5F5 | White Smoke exact |
| neutral-200 | bg-neutral-200 | oklch(92.2% 0 none) | #E5E5E5 | #E5E5E5 | Platinum #E0E1DD |
| neutral-300 | bg-neutral-300 | oklch(87% 0 none) | #D4D4D4 | #D4D4D4 | Light Gray #D3D3D3 |
| neutral-400 | bg-neutral-400 | oklch(70.8% 0 none) | #A1A1A1 | #A3A3A3 | Cool Grey #95A3A6 |
| neutral-500 | bg-neutral-500 | oklch(55.6% 0 none) | #737373 | #737373 | Battleship Gray #6C757D |
| neutral-600 | bg-neutral-600 | oklch(43.9% 0 none) | #525252 | #525252 | Dark Slate Gray #2F4F4F |
| neutral-700 | bg-neutral-700 | oklch(37.1% 0 none) | #404040 | #404040 | Charcoal Grey #3C4142 |
| neutral-800 | bg-neutral-800 | oklch(26.9% 0 none) | #262626 | #262626 | Jet #212529 |
| neutral-900 | bg-neutral-900 | oklch(20.5% 0 none) | #171717 | #171717 | Rich Black #0D1B2A |
| neutral-950 | bg-neutral-950 | oklch(14.5% 0 none) | #0A0A0A | #0A0A0A | Almost Black #070D0D |
neutral contrast on white and black
WCAG AA needs 4.5:1 for body text. On white, neutral shades 500, 600, 700, 800, 900, 950 pass; on black, neutral shades 50, 100, 200, 300, 400 pass.
| Shade | Hex | On white | On black |
|---|---|---|---|
| neutral-50 | #FAFAFA | 1.04:1 Fail | 20.11:1 AA |
| neutral-100 | #F5F5F5 | 1.09:1 Fail | 19.26:1 AA |
| neutral-200 | #E5E5E5 | 1.25:1 Fail | 16.67:1 AA |
| neutral-300 | #D4D4D4 | 1.48:1 Fail | 14.16:1 AA |
| neutral-400 | #A1A1A1 | 2.58:1 Fail | 8.12:1 AA |
| neutral-500 | #737373 | 4.74:1 AA | 4.42:1 AA large |
| neutral-600 | #525252 | 7.81:1 AA | 2.68:1 Fail |
| neutral-700 | #404040 | 10.36:1 AA | 2.02:1 Fail |
| neutral-800 | #262626 | 15.13:1 AA | 1.38:1 Fail |
| neutral-900 | #171717 | 17.92:1 AA | 1.17:1 Fail |
| neutral-950 | #0A0A0A | 19.79:1 AA | 1.06:1 Fail |
Use neutral in your project
Utility class: bg-neutral-500. CSS variable: var(--color-neutral-500). Override the ramp in @theme:
@import "tailwindcss";
@theme {
--color-neutral-50: oklch(98.5% 0 none);
--color-neutral-100: oklch(97% 0 none);
--color-neutral-200: oklch(92.2% 0 none);
--color-neutral-300: oklch(87% 0 none);
--color-neutral-400: oklch(70.8% 0 none);
--color-neutral-500: oklch(55.6% 0 none);
--color-neutral-600: oklch(43.9% 0 none);
--color-neutral-700: oklch(37.1% 0 none);
--color-neutral-800: oklch(26.9% 0 none);
--color-neutral-900: oklch(20.5% 0 none);
--color-neutral-950: oklch(14.5% 0 none);
}
More Tailwind colors
slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose
Build your own scale like this
Start from #737373 and get a custom OKLCH 50 to 950 scale with Tailwind v4 and v3 exports.