Tailwind Red
The Tailwind Red shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| red-50 | #fef2f2 |
1.09:1 / 19.19:1 |
| red-100 | #ffe2e2 |
1.21:1 / 17.22:1 |
| red-200 | #ffc9c9 |
1.45:1 / 14.45:1 |
| red-300 | #ffa2a2 |
1.91:1 / 10.94:1 |
| red-400 | #ff6467 |
2.88:1 / 7.27:1 |
| red-500 | #fb2c36 |
3.80:1 / 5.51:1 |
| red-600 | #e7000b |
4.76:1 / 4.40:1 |
| red-700 | #c10007 |
6.42:1 / 3.27:1 |
| red-800 | #9f0712 |
8.35:1 / 2.51:1 |
| red-900 | #82181a |
10.02:1 / 2.09:1 |
| red-950 | #460809 |
16.16:1 / 1.29:1 |
CSS variables
:root {
--color-red-50: #fef2f2;
--color-red-100: #ffe2e2;
--color-red-200: #ffc9c9;
--color-red-300: #ffa2a2;
--color-red-400: #ff6467;
--color-red-500: #fb2c36;
--color-red-600: #e7000b;
--color-red-700: #c10007;
--color-red-800: #9f0712;
--color-red-900: #82181a;
--color-red-950: #460809;
}
Open as palette Shades and tints