Tailwind Cyan
The Tailwind Cyan shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| cyan-50 | #ecfeff |
1.04:1 / 20.18:1 |
| cyan-100 | #cefafe |
1.12:1 / 18.72:1 |
| cyan-200 | #a2f4fd |
1.24:1 / 16.89:1 |
| cyan-300 | #53eafd |
1.44:1 / 14.55:1 |
| cyan-400 | #00d3f2 |
1.81:1 / 11.59:1 |
| cyan-500 | #00b8db |
2.36:1 / 8.87:1 |
| cyan-600 | #0092b8 |
3.61:1 / 5.80:1 |
| cyan-700 | #007595 |
5.27:1 / 3.97:1 |
| cyan-800 | #005f78 |
7.22:1 / 2.90:1 |
| cyan-900 | #104e64 |
9.14:1 / 2.29:1 |
| cyan-950 | #053345 |
13.41:1 / 1.56:1 |
CSS variables
:root {
--color-cyan-50: #ecfeff;
--color-cyan-100: #cefafe;
--color-cyan-200: #a2f4fd;
--color-cyan-300: #53eafd;
--color-cyan-400: #00d3f2;
--color-cyan-500: #00b8db;
--color-cyan-600: #0092b8;
--color-cyan-700: #007595;
--color-cyan-800: #005f78;
--color-cyan-900: #104e64;
--color-cyan-950: #053345;
}
Open as palette Shades and tints