Tailwind Indigo
The Tailwind Indigo shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| indigo-50 | #eef2ff |
1.11:1 / 18.78:1 |
| indigo-100 | #e0e7ff |
1.23:1 / 17.04:1 |
| indigo-200 | #c6d2ff |
1.49:1 / 14.06:1 |
| indigo-300 | #a3b3ff |
2.00:1 / 10.44:1 |
| indigo-400 | #7c86ff |
3.12:1 / 6.71:1 |
| indigo-500 | #615fff |
4.57:1 / 4.58:1 |
| indigo-600 | #4f39f6 |
6.46:1 / 3.24:1 |
| indigo-700 | #432dd7 |
8.09:1 / 2.59:1 |
| indigo-800 | #372aac |
10.05:1 / 2.08:1 |
| indigo-900 | #312c85 |
11.47:1 / 1.82:1 |
| indigo-950 | #1e1a4d |
16.02:1 / 1.31:1 |
CSS variables
:root {
--color-indigo-50: #eef2ff;
--color-indigo-100: #e0e7ff;
--color-indigo-200: #c6d2ff;
--color-indigo-300: #a3b3ff;
--color-indigo-400: #7c86ff;
--color-indigo-500: #615fff;
--color-indigo-600: #4f39f6;
--color-indigo-700: #432dd7;
--color-indigo-800: #372aac;
--color-indigo-900: #312c85;
--color-indigo-950: #1e1a4d;
}
Open as palette Shades and tints