Tailwind Zinc
The Tailwind Zinc shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| zinc-50 | #fafafa |
1.04:1 / 20.11:1 |
| zinc-100 | #f4f4f5 |
1.09:1 / 19.10:1 |
| zinc-200 | #e4e4e7 |
1.26:1 / 16.55:1 |
| zinc-300 | #d4d4d8 |
1.47:1 / 14.20:1 |
| zinc-400 | #9f9fa9 |
2.62:1 / 8.00:1 |
| zinc-500 | #71717b |
4.82:1 / 4.35:1 |
| zinc-600 | #52525c |
7.71:1 / 2.72:1 |
| zinc-700 | #3f3f46 |
10.44:1 / 2.01:1 |
| zinc-800 | #27272a |
14.89:1 / 1.40:1 |
| zinc-900 | #18181b |
17.71:1 / 1.18:1 |
| zinc-950 | #09090b |
19.89:1 / 1.05:1 |
CSS variables
:root {
--color-zinc-50: #fafafa;
--color-zinc-100: #f4f4f5;
--color-zinc-200: #e4e4e7;
--color-zinc-300: #d4d4d8;
--color-zinc-400: #9f9fa9;
--color-zinc-500: #71717b;
--color-zinc-600: #52525c;
--color-zinc-700: #3f3f46;
--color-zinc-800: #27272a;
--color-zinc-900: #18181b;
--color-zinc-950: #09090b;
}
Open as palette Shades and tints