Tailwind Slate
The Tailwind Slate shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| slate-50 | #f8fafc |
1.04:1 / 20.07:1 |
| slate-100 | #f1f5f9 |
1.09:1 / 19.16:1 |
| slate-200 | #e2e8f0 |
1.23:1 / 17.03:1 |
| slate-300 | #cad5e2 |
1.48:1 / 14.12:1 |
| slate-400 | #90a1b9 |
2.63:1 / 7.98:1 |
| slate-500 | #62748e |
4.76:1 / 4.40:1 |
| slate-600 | #45556c |
7.58:1 / 2.76:1 |
| slate-700 | #314158 |
10.35:1 / 2.02:1 |
| slate-800 | #1d293d |
14.61:1 / 1.43:1 |
| slate-900 | #0f172b |
17.83:1 / 1.17:1 |
| slate-950 | #020618 |
20.15:1 / 1.04:1 |
CSS variables
:root {
--color-slate-50: #f8fafc;
--color-slate-100: #f1f5f9;
--color-slate-200: #e2e8f0;
--color-slate-300: #cad5e2;
--color-slate-400: #90a1b9;
--color-slate-500: #62748e;
--color-slate-600: #45556c;
--color-slate-700: #314158;
--color-slate-800: #1d293d;
--color-slate-900: #0f172b;
--color-slate-950: #020618;
}
Open as palette Shades and tints