Tailwind Purple
The Tailwind Purple shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| purple-50 | #faf5ff |
1.07:1 / 19.56:1 |
| purple-100 | #f3e8ff |
1.17:1 / 17.79:1 |
| purple-200 | #e9d4ff |
1.37:1 / 15.32:1 |
| purple-300 | #dab2ff |
1.78:1 / 11.79:1 |
| purple-400 | #c27aff |
2.79:1 / 7.52:1 |
| purple-500 | #ad46ff |
4.12:1 / 5.09:1 |
| purple-600 | #9810fa |
5.54:1 / 3.78:1 |
| purple-700 | #8200db |
7.06:1 / 2.97:1 |
| purple-800 | #6e11b0 |
8.86:1 / 2.37:1 |
| purple-900 | #59168b |
10.98:1 / 1.91:1 |
| purple-950 | #3c0366 |
15.03:1 / 1.39:1 |
CSS variables
:root {
--color-purple-50: #faf5ff;
--color-purple-100: #f3e8ff;
--color-purple-200: #e9d4ff;
--color-purple-300: #dab2ff;
--color-purple-400: #c27aff;
--color-purple-500: #ad46ff;
--color-purple-600: #9810fa;
--color-purple-700: #8200db;
--color-purple-800: #6e11b0;
--color-purple-900: #59168b;
--color-purple-950: #3c0366;
}
Open as palette Shades and tints