Tailwind Rose
The Tailwind Rose shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| rose-50 | #fff1f2 |
1.09:1 / 19.11:1 |
| rose-100 | #ffe4e6 |
1.20:1 / 17.49:1 |
| rose-200 | #ffccd3 |
1.41:1 / 14.82:1 |
| rose-300 | #ffa1ad |
1.91:1 / 10.95:1 |
| rose-400 | #ff637e |
2.86:1 / 7.33:1 |
| rose-500 | #ff2056 |
3.75:1 / 5.59:1 |
| rose-600 | #ec003f |
4.52:1 / 4.63:1 |
| rose-700 | #c70036 |
6.03:1 / 3.48:1 |
| rose-800 | #a50036 |
7.91:1 / 2.65:1 |
| rose-900 | #8b0836 |
9.60:1 / 2.18:1 |
| rose-950 | #4d0218 |
15.70:1 / 1.33:1 |
CSS variables
:root {
--color-rose-50: #fff1f2;
--color-rose-100: #ffe4e6;
--color-rose-200: #ffccd3;
--color-rose-300: #ffa1ad;
--color-rose-400: #ff637e;
--color-rose-500: #ff2056;
--color-rose-600: #ec003f;
--color-rose-700: #c70036;
--color-rose-800: #a50036;
--color-rose-900: #8b0836;
--color-rose-950: #4d0218;
}
Open as palette Shades and tints