Tailwind Mist
The Tailwind Mist shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| mist-50 | #f9fbfb |
1.03:1 / 20.21:1 |
| mist-100 | #f1f3f3 |
1.11:1 / 18.85:1 |
| mist-200 | #e3e7e8 |
1.24:1 / 16.86:1 |
| mist-300 | #d0d6d8 |
1.46:1 / 14.29:1 |
| mist-400 | #9ca8ab |
2.44:1 / 8.60:1 |
| mist-500 | #67787c |
4.61:1 / 4.55:1 |
| mist-600 | #4b585b |
7.37:1 / 2.84:1 |
| mist-700 | #394447 |
10.03:1 / 2.09:1 |
| mist-800 | #22292b |
14.78:1 / 1.42:1 |
| mist-900 | #161b1d |
17.37:1 / 1.20:1 |
| mist-950 | #090b0c |
19.72:1 / 1.06:1 |
CSS variables
:root {
--color-mist-50: #f9fbfb;
--color-mist-100: #f1f3f3;
--color-mist-200: #e3e7e8;
--color-mist-300: #d0d6d8;
--color-mist-400: #9ca8ab;
--color-mist-500: #67787c;
--color-mist-600: #4b585b;
--color-mist-700: #394447;
--color-mist-800: #22292b;
--color-mist-900: #161b1d;
--color-mist-950: #090b0c;
}
Open as palette Shades and tints