Tailwind Green
The Tailwind Green shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| green-50 | #f0fdf4 |
1.04:1 / 20.06:1 |
| green-100 | #dcfce7 |
1.09:1 / 19.12:1 |
| green-200 | #b9f8cf |
1.20:1 / 17.39:1 |
| green-300 | #7bf1a8 |
1.40:1 / 14.98:1 |
| green-400 | #05df72 |
1.77:1 / 11.80:1 |
| green-500 | #00c950 |
2.21:1 / 9.47:1 |
| green-600 | #00a63e |
3.21:1 / 6.52:1 |
| green-700 | #008236 |
4.94:1 / 4.24:1 |
| green-800 | #016630 |
7.13:1 / 2.94:1 |
| green-900 | #0d542b |
9.05:1 / 2.32:1 |
| green-950 | #032e15 |
14.94:1 / 1.40:1 |
CSS variables
:root {
--color-green-50: #f0fdf4;
--color-green-100: #dcfce7;
--color-green-200: #b9f8cf;
--color-green-300: #7bf1a8;
--color-green-400: #05df72;
--color-green-500: #00c950;
--color-green-600: #00a63e;
--color-green-700: #008236;
--color-green-800: #016630;
--color-green-900: #0d542b;
--color-green-950: #032e15;
}
Open as palette Shades and tints