Tailwind Gray
The Tailwind Gray shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| gray-50 | #f9fafb |
1.04:1 / 20.09:1 |
| gray-100 | #f3f4f6 |
1.10:1 / 19.08:1 |
| gray-200 | #e5e7eb |
1.23:1 / 16.96:1 |
| gray-300 | #d1d5dc |
1.47:1 / 14.26:1 |
| gray-400 | #99a1af |
2.60:1 / 8.07:1 |
| gray-500 | #6a7282 |
4.83:1 / 4.34:1 |
| gray-600 | #4a5565 |
7.55:1 / 2.77:1 |
| gray-700 | #364153 |
10.30:1 / 2.03:1 |
| gray-800 | #1e2939 |
14.67:1 / 1.43:1 |
| gray-900 | #101828 |
17.74:1 / 1.18:1 |
| gray-950 | #030712 |
20.13:1 / 1.04:1 |
CSS variables
:root {
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5dc;
--color-gray-400: #99a1af;
--color-gray-500: #6a7282;
--color-gray-600: #4a5565;
--color-gray-700: #364153;
--color-gray-800: #1e2939;
--color-gray-900: #101828;
--color-gray-950: #030712;
}
Open as palette Shades and tints