Tailwind Emerald
The Tailwind Emerald shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| emerald-50 | #ecfdf5 |
1.05:1 / 19.93:1 |
| emerald-100 | #d0fae5 |
1.13:1 / 18.48:1 |
| emerald-200 | #a4f4cf |
1.27:1 / 16.41:1 |
| emerald-300 | #5ee9b5 |
1.52:1 / 13.79:1 |
| emerald-400 | #00d492 |
1.93:1 / 10.83:1 |
| emerald-500 | #00bc7d |
2.47:1 / 8.48:1 |
| emerald-600 | #009966 |
3.65:1 / 5.74:1 |
| emerald-700 | #007a55 |
5.36:1 / 3.91:1 |
| emerald-800 | #006045 |
7.61:1 / 2.75:1 |
| emerald-900 | #004f3b |
9.62:1 / 2.18:1 |
| emerald-950 | #002c22 |
15.18:1 / 1.38:1 |
CSS variables
:root {
--color-emerald-50: #ecfdf5;
--color-emerald-100: #d0fae5;
--color-emerald-200: #a4f4cf;
--color-emerald-300: #5ee9b5;
--color-emerald-400: #00d492;
--color-emerald-500: #00bc7d;
--color-emerald-600: #009966;
--color-emerald-700: #007a55;
--color-emerald-800: #006045;
--color-emerald-900: #004f3b;
--color-emerald-950: #002c22;
}
Open as palette Shades and tints