Tailwind Teal
The Tailwind Teal shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| teal-50 | #f0fdfa |
1.04:1 / 20.13:1 |
| teal-100 | #cbfbf1 |
1.12:1 / 18.60:1 |
| teal-200 | #96f7e4 |
1.25:1 / 16.72:1 |
| teal-300 | #46ecd5 |
1.47:1 / 14.21:1 |
| teal-400 | #00d5be |
1.86:1 / 11.26:1 |
| teal-500 | #00bba7 |
2.42:1 / 8.66:1 |
| teal-600 | #009689 |
3.66:1 / 5.72:1 |
| teal-700 | #00786f |
5.36:1 / 3.91:1 |
| teal-800 | #005f5a |
7.54:1 / 2.78:1 |
| teal-900 | #0b4f4a |
9.41:1 / 2.23:1 |
| teal-950 | #022f2e |
14.49:1 / 1.44:1 |
CSS variables
:root {
--color-teal-50: #f0fdfa;
--color-teal-100: #cbfbf1;
--color-teal-200: #96f7e4;
--color-teal-300: #46ecd5;
--color-teal-400: #00d5be;
--color-teal-500: #00bba7;
--color-teal-600: #009689;
--color-teal-700: #00786f;
--color-teal-800: #005f5a;
--color-teal-900: #0b4f4a;
--color-teal-950: #022f2e;
}
Open as palette Shades and tints