Tailwind Pink
The Tailwind Pink shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| pink-50 | #fdf2f8 |
1.09:1 / 19.23:1 |
| pink-100 | #fce7f3 |
1.17:1 / 17.86:1 |
| pink-200 | #fccee8 |
1.38:1 / 15.13:1 |
| pink-300 | #fda5d5 |
1.82:1 / 11.51:1 |
| pink-400 | #fb64b6 |
2.76:1 / 7.60:1 |
| pink-500 | #f6339a |
3.58:1 / 5.85:1 |
| pink-600 | #e60076 |
4.53:1 / 4.62:1 |
| pink-700 | #c6005c |
5.90:1 / 3.55:1 |
| pink-800 | #a3004c |
7.88:1 / 2.66:1 |
| pink-900 | #861043 |
9.68:1 / 2.16:1 |
| pink-950 | #510424 |
15.07:1 / 1.39:1 |
CSS variables
:root {
--color-pink-50: #fdf2f8;
--color-pink-100: #fce7f3;
--color-pink-200: #fccee8;
--color-pink-300: #fda5d5;
--color-pink-400: #fb64b6;
--color-pink-500: #f6339a;
--color-pink-600: #e60076;
--color-pink-700: #c6005c;
--color-pink-800: #a3004c;
--color-pink-900: #861043;
--color-pink-950: #510424;
}
Open as palette Shades and tints