Eleven shades, from neutral-50 to neutral-950
Tailwind neutral colors
Tailwind CSS 4.3.3 defines eleven neutral shades in OKLCH, from neutral-50 (#fafafa) to neutral-950 (#0a0a0a). On them white text passes WCAG AA from neutral-500 to neutral-950, and black text from neutral-50 to neutral-400. Recolor (recolor.page) shows the scale on a real page.
Last updated
- 50#fafafa
- 100#f5f5f5
- 200#e5e5e5
- 300#d4d4d4
- 400#a1a1a1
- 500#737373
- 600#525252
- 700#404040
- 800#262626
- 900#171717
- 950#0a0a0a
| Shade | OKLCH | Hex | White text | Black text |
|---|---|---|---|---|
| neutral-50 | oklch(98.5% 0 none) | #fafafa | 1.04:1 fails | 20.12:1 passes |
| neutral-100 | oklch(97% 0 none) | #f5f5f5 | 1.09:1 fails | 19.26:1 passes |
| neutral-200 | oklch(92.2% 0 none) | #e5e5e5 | 1.26:1 fails | 16.67:1 passes |
| neutral-300 | oklch(87% 0 none) | #d4d4d4 | 1.48:1 fails | 14.17:1 passes |
| neutral-400 | oklch(70.8% 0 none) | #a1a1a1 | 2.58:1 fails | 8.13:1 passes |
| neutral-500 | oklch(55.6% 0 none) | #737373 | 4.74:1 passes | 4.43:1 fails |
| neutral-600 | oklch(43.9% 0 none) | #525252 | 7.81:1 passes | 2.69:1 fails |
| neutral-700 | oklch(37.1% 0 none) | #404040 | 10.37:1 passes | 2.03:1 fails |
| neutral-800 | oklch(26.9% 0 none) | #262626 | 15.13:1 passes | 1.39:1 fails |
| neutral-900 | oklch(20.5% 0 none) | #171717 | 17.93:1 passes | 1.17:1 fails |
| neutral-950 | oklch(14.5% 0 none) | #0a0a0a | 19.80:1 passes | 1.06:1 fails |
Text on neutral, and neutral as text
As a text color the rule turns around: neutral text on a white page passes AA from neutral-500 on, and on a black page up to neutral-400, since a contrast ratio is the same whichever color is in front.
It is one of Tailwind's nine grays: its chroma stays at or under 0.000, with no hue at all.
All eleven fit inside sRGB, so every hex code here is exact.
Sources
- Tailwind CSS: Colors tailwindcss.com
- WCAG 2.2: Contrast (Minimum) w3.org