Tailwind Blue
The Tailwind Blue shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| blue-50 | #eff6ff |
1.08:1 / 19.29:1 |
| blue-100 | #dbeafe |
1.22:1 / 17.21:1 |
| blue-200 | #bedbff |
1.42:1 / 14.76:1 |
| blue-300 | #8ec5ff |
1.81:1 / 11.58:1 |
| blue-400 | #51a2ff |
2.63:1 / 7.96:1 |
| blue-500 | #2b7fff |
3.76:1 / 5.58:1 |
| blue-600 | #155dfc |
5.24:1 / 4.00:1 |
| blue-700 | #1447e6 |
6.83:1 / 3.07:1 |
| blue-800 | #193cb8 |
8.82:1 / 2.37:1 |
| blue-900 | #1c398e |
10.36:1 / 2.02:1 |
| blue-950 | #162456 |
14.77:1 / 1.42:1 |
CSS variables
:root {
--color-blue-50: #eff6ff;
--color-blue-100: #dbeafe;
--color-blue-200: #bedbff;
--color-blue-300: #8ec5ff;
--color-blue-400: #51a2ff;
--color-blue-500: #2b7fff;
--color-blue-600: #155dfc;
--color-blue-700: #1447e6;
--color-blue-800: #193cb8;
--color-blue-900: #1c398e;
--color-blue-950: #162456;
}
Open as palette Shades and tints