Tailwind Mauve
The Tailwind Mauve shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| mauve-50 | #fafafa |
1.04:1 / 20.11:1 |
| mauve-100 | #f3f1f3 |
1.12:1 / 18.68:1 |
| mauve-200 | #e7e4e7 |
1.26:1 / 16.64:1 |
| mauve-300 | #d7d0d7 |
1.51:1 / 13.89:1 |
| mauve-400 | #a89ea9 |
2.58:1 / 8.12:1 |
| mauve-500 | #79697b |
5.09:1 / 4.11:1 |
| mauve-600 | #594c5b |
8.04:1 / 2.60:1 |
| mauve-700 | #463947 |
10.84:1 / 1.93:1 |
| mauve-800 | #2a212c |
15.52:1 / 1.35:1 |
| mauve-900 | #1d161e |
17.71:1 / 1.18:1 |
| mauve-950 | #0c090c |
19.81:1 / 1.06:1 |
CSS variables
:root {
--color-mauve-50: #fafafa;
--color-mauve-100: #f3f1f3;
--color-mauve-200: #e7e4e7;
--color-mauve-300: #d7d0d7;
--color-mauve-400: #a89ea9;
--color-mauve-500: #79697b;
--color-mauve-600: #594c5b;
--color-mauve-700: #463947;
--color-mauve-800: #2a212c;
--color-mauve-900: #1d161e;
--color-mauve-950: #0c090c;
}
Open as palette Shades and tints