Tailwind Neutral
The Tailwind Neutral shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| neutral-50 | #fafafa |
1.04:1 / 20.11:1 |
| neutral-100 | #f5f5f5 |
1.09:1 / 19.26:1 |
| neutral-200 | #e5e5e5 |
1.25:1 / 16.67:1 |
| neutral-300 | #d4d4d4 |
1.48:1 / 14.16:1 |
| neutral-400 | #a1a1a1 |
2.58:1 / 8.12:1 |
| neutral-500 | #737373 |
4.74:1 / 4.42:1 |
| neutral-600 | #525252 |
7.81:1 / 2.68:1 |
| neutral-700 | #404040 |
10.36:1 / 2.02:1 |
| neutral-800 | #262626 |
15.13:1 / 1.38:1 |
| neutral-900 | #171717 |
17.92:1 / 1.17:1 |
| neutral-950 | #0a0a0a |
19.79:1 / 1.06:1 |
CSS variables
:root {
--color-neutral-50: #fafafa;
--color-neutral-100: #f5f5f5;
--color-neutral-200: #e5e5e5;
--color-neutral-300: #d4d4d4;
--color-neutral-400: #a1a1a1;
--color-neutral-500: #737373;
--color-neutral-600: #525252;
--color-neutral-700: #404040;
--color-neutral-800: #262626;
--color-neutral-900: #171717;
--color-neutral-950: #0a0a0a;
}
Open as palette Shades and tints