Tailwind Amber
The Tailwind Amber shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| amber-50 | #fffbeb |
1.03:1 / 20.25:1 |
| amber-100 | #fef3c6 |
1.11:1 / 18.84:1 |
| amber-200 | #fee685 |
1.24:1 / 16.87:1 |
| amber-300 | #ffd230 |
1.44:1 / 14.51:1 |
| amber-400 | #ffb900 |
1.72:1 / 12.19:1 |
| amber-500 | #fe9a00 |
2.13:1 / 9.83:1 |
| amber-600 | #e17100 |
3.19:1 / 6.56:1 |
| amber-700 | #bb4d00 |
5.03:1 / 4.17:1 |
| amber-800 | #973c00 |
7.08:1 / 2.96:1 |
| amber-900 | #7b3306 |
9.05:1 / 2.31:1 |
| amber-950 | #461901 |
15.00:1 / 1.39:1 |
CSS variables
:root {
--color-amber-50: #fffbeb;
--color-amber-100: #fef3c6;
--color-amber-200: #fee685;
--color-amber-300: #ffd230;
--color-amber-400: #ffb900;
--color-amber-500: #fe9a00;
--color-amber-600: #e17100;
--color-amber-700: #bb4d00;
--color-amber-800: #973c00;
--color-amber-900: #7b3306;
--color-amber-950: #461901;
}
Open as palette Shades and tints