Tailwind Stone
The Tailwind Stone shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| stone-50 | #fafaf9 |
1.04:1 / 20.10:1 |
| stone-100 | #f5f5f4 |
1.09:1 / 19.24:1 |
| stone-200 | #e7e5e4 |
1.25:1 / 16.72:1 |
| stone-300 | #d6d3d1 |
1.48:1 / 14.09:1 |
| stone-400 | #a6a09b |
2.58:1 / 8.12:1 |
| stone-500 | #79716b |
4.78:1 / 4.38:1 |
| stone-600 | #57534d |
7.63:1 / 2.74:1 |
| stone-700 | #44403b |
10.28:1 / 2.04:1 |
| stone-800 | #292524 |
15.16:1 / 1.38:1 |
| stone-900 | #1c1917 |
17.48:1 / 1.20:1 |
| stone-950 | #0c0a09 |
19.75:1 / 1.06:1 |
CSS variables
:root {
--color-stone-50: #fafaf9;
--color-stone-100: #f5f5f4;
--color-stone-200: #e7e5e4;
--color-stone-300: #d6d3d1;
--color-stone-400: #a6a09b;
--color-stone-500: #79716b;
--color-stone-600: #57534d;
--color-stone-700: #44403b;
--color-stone-800: #292524;
--color-stone-900: #1c1917;
--color-stone-950: #0c0a09;
}
Open as palette Shades and tints