Tailwind Orange
The Tailwind Orange shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| orange-50 | #fff7ed |
1.06:1 / 19.77:1 |
| orange-100 | #ffedd4 |
1.14:1 / 18.31:1 |
| orange-200 | #ffd6a7 |
1.36:1 / 15.42:1 |
| orange-300 | #ffb86a |
1.70:1 / 12.31:1 |
| orange-400 | #ff8904 |
2.37:1 / 8.83:1 |
| orange-500 | #ff6900 |
2.88:1 / 7.27:1 |
| orange-600 | #f54900 |
3.59:1 / 5.83:1 |
| orange-700 | #ca3500 |
5.22:1 / 4.02:1 |
| orange-800 | #9f2d00 |
7.36:1 / 2.84:1 |
| orange-900 | #7e2a0c |
9.44:1 / 2.22:1 |
| orange-950 | #441306 |
15.65:1 / 1.34:1 |
CSS variables
:root {
--color-orange-50: #fff7ed;
--color-orange-100: #ffedd4;
--color-orange-200: #ffd6a7;
--color-orange-300: #ffb86a;
--color-orange-400: #ff8904;
--color-orange-500: #ff6900;
--color-orange-600: #f54900;
--color-orange-700: #ca3500;
--color-orange-800: #9f2d00;
--color-orange-900: #7e2a0c;
--color-orange-950: #441306;
}
Open as palette Shades and tints