Tailwind Violet
The Tailwind Violet shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| violet-50 | #f5f3ff |
1.09:1 / 19.14:1 |
| violet-100 | #ede9fe |
1.18:1 / 17.68:1 |
| violet-200 | #ddd6ff |
1.38:1 / 15.13:1 |
| violet-300 | #c4b4ff |
1.85:1 / 11.31:1 |
| violet-400 | #a684ff |
2.85:1 / 7.36:1 |
| violet-500 | #8e51ff |
4.40:1 / 4.77:1 |
| violet-600 | #7f22fe |
5.89:1 / 3.56:1 |
| violet-700 | #7008e7 |
7.29:1 / 2.87:1 |
| violet-800 | #5d0ec0 |
9.17:1 / 2.28:1 |
| violet-900 | #4d179a |
11.02:1 / 1.90:1 |
| violet-950 | #2f0d68 |
15.23:1 / 1.37:1 |
CSS variables
:root {
--color-violet-50: #f5f3ff;
--color-violet-100: #ede9fe;
--color-violet-200: #ddd6ff;
--color-violet-300: #c4b4ff;
--color-violet-400: #a684ff;
--color-violet-500: #8e51ff;
--color-violet-600: #7f22fe;
--color-violet-700: #7008e7;
--color-violet-800: #5d0ec0;
--color-violet-900: #4d179a;
--color-violet-950: #2f0d68;
}
Open as palette Shades and tints