Tailwind Taupe
The Tailwind Taupe shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| taupe-50 | #fbfaf9 |
1.04:1 / 20.14:1 |
| taupe-100 | #f3f1f1 |
1.12:1 / 18.66:1 |
| taupe-200 | #e8e4e3 |
1.26:1 / 16.63:1 |
| taupe-300 | #d8d2d0 |
1.49:1 / 14.04:1 |
| taupe-400 | #aba09c |
2.54:1 / 8.23:1 |
| taupe-500 | #7c6d67 |
4.95:1 / 4.24:1 |
| taupe-600 | #5b4f4b |
7.88:1 / 2.66:1 |
| taupe-700 | #473c39 |
10.64:1 / 1.97:1 |
| taupe-800 | #2b2422 |
15.23:1 / 1.37:1 |
| taupe-900 | #1d1816 |
17.58:1 / 1.19:1 |
| taupe-950 | #0c0a09 |
19.75:1 / 1.06:1 |
CSS variables
:root {
--color-taupe-50: #fbfaf9;
--color-taupe-100: #f3f1f1;
--color-taupe-200: #e8e4e3;
--color-taupe-300: #d8d2d0;
--color-taupe-400: #aba09c;
--color-taupe-500: #7c6d67;
--color-taupe-600: #5b4f4b;
--color-taupe-700: #473c39;
--color-taupe-800: #2b2422;
--color-taupe-900: #1d1816;
--color-taupe-950: #0c0a09;
}
Open as palette Shades and tints