Tailwind Sky
The Tailwind Sky shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| sky-50 | #f0f9ff |
1.06:1 / 19.69:1 |
| sky-100 | #dff2fe |
1.14:1 / 18.26:1 |
| sky-200 | #b8e6fe |
1.33:1 / 15.78:1 |
| sky-300 | #74d4ff |
1.66:1 / 12.60:1 |
| sky-400 | #00bcff |
2.17:1 / 9.63:1 |
| sky-500 | #00a6f4 |
2.70:1 / 7.76:1 |
| sky-600 | #0084d1 |
4.02:1 / 5.22:1 |
| sky-700 | #0069a8 |
5.85:1 / 3.58:1 |
| sky-800 | #00598a |
7.51:1 / 2.79:1 |
| sky-900 | #024a70 |
9.47:1 / 2.21:1 |
| sky-950 | #052f4a |
13.88:1 / 1.51:1 |
CSS variables
:root {
--color-sky-50: #f0f9ff;
--color-sky-100: #dff2fe;
--color-sky-200: #b8e6fe;
--color-sky-300: #74d4ff;
--color-sky-400: #00bcff;
--color-sky-500: #00a6f4;
--color-sky-600: #0084d1;
--color-sky-700: #0069a8;
--color-sky-800: #00598a;
--color-sky-900: #024a70;
--color-sky-950: #052f4a;
}
Open as palette Shades and tints