Tailwind Yellow
The Tailwind Yellow shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| yellow-50 | #fefce8 |
1.03:1 / 20.30:1 |
| yellow-100 | #fef9c2 |
1.07:1 / 19.54:1 |
| yellow-200 | #fff085 |
1.16:1 / 18.05:1 |
| yellow-300 | #ffdf20 |
1.32:1 / 15.82:1 |
| yellow-400 | #fdc700 |
1.57:1 / 13.34:1 |
| yellow-500 | #f0b100 |
1.91:1 / 10.99:1 |
| yellow-600 | #d08700 |
2.93:1 / 7.14:1 |
| yellow-700 | #a65f00 |
4.93:1 / 4.25:1 |
| yellow-800 | #894b00 |
6.84:1 / 3.07:1 |
| yellow-900 | #733e0a |
8.66:1 / 2.42:1 |
| yellow-950 | #432004 |
14.51:1 / 1.44:1 |
CSS variables
:root {
--color-yellow-50: #fefce8;
--color-yellow-100: #fef9c2;
--color-yellow-200: #fff085;
--color-yellow-300: #ffdf20;
--color-yellow-400: #fdc700;
--color-yellow-500: #f0b100;
--color-yellow-600: #d08700;
--color-yellow-700: #a65f00;
--color-yellow-800: #894b00;
--color-yellow-900: #733e0a;
--color-yellow-950: #432004;
}
Open as palette Shades and tints