Tailwind slate color palette
slate-50 to slate-950 in Tailwind v4 OKLCH, sRGB hex and the v3 hex. slate-500 is #62748E in v4 and #64748B in v3.
Every slate shade: class, OKLCH, hex and v3 hex
| Shade | Class | v4 OKLCH | v4 hex | v3 hex | Nearest named color |
|---|---|---|---|---|---|
| slate-50 | bg-slate-50 | oklch(98.4% 0.003 247.858) | #F8FAFC | #F8FAFC | Cultured #F8F9FA |
| slate-100 | bg-slate-100 | oklch(96.8% 0.007 247.896) | #F1F5F9 | #F1F5F9 | White Smoke #F5F5F5 |
| slate-200 | bg-slate-200 | oklch(92.9% 0.013 255.508) | #E2E8F0 | #E2E8F0 | Lavender #E6E6FA |
| slate-300 | bg-slate-300 | oklch(86.9% 0.022 252.894) | #CAD5E2 | #CBD5E1 | Cadet Gray #CED4DA |
| slate-400 | bg-slate-400 | oklch(70.4% 0.04 256.788) | #90A1B9 | #94A3B8 | Bluey Grey #89A0B0 |
| slate-500 | bg-slate-500 | oklch(55.4% 0.046 257.417) | #62748E | #64748B | Metallic Blue #4F738E |
| slate-600 | bg-slate-600 | oklch(44.6% 0.043 257.281) | #45556C | #475569 | YInMn Blue #415A77 |
| slate-700 | bg-slate-700 | oklch(37.2% 0.044 257.287) | #314158 | #334155 | Dark Grey Blue #29465B |
| slate-800 | bg-slate-800 | oklch(27.9% 0.041 260.031) | #1D293D | #1E293B | Oxford Blue #1B263B |
| slate-900 | bg-slate-900 | oklch(20.8% 0.042 265.755) | #0F172B | #0F172A | Rich Black #0D1B2A |
| slate-950 | bg-slate-950 | oklch(12.9% 0.042 264.695) | #020618 | #020617 | Almost Black #070D0D |
slate contrast on white and black
WCAG AA needs 4.5:1 for body text. On white, slate shades 500, 600, 700, 800, 900, 950 pass; on black, slate shades 50, 100, 200, 300, 400 pass.
| Shade | Hex | On white | On black |
|---|---|---|---|
| slate-50 | #F8FAFC | 1.04:1 Fail | 20.07:1 AA |
| slate-100 | #F1F5F9 | 1.09:1 Fail | 19.16:1 AA |
| slate-200 | #E2E8F0 | 1.23:1 Fail | 17.03:1 AA |
| slate-300 | #CAD5E2 | 1.48:1 Fail | 14.12:1 AA |
| slate-400 | #90A1B9 | 2.63:1 Fail | 7.98:1 AA |
| slate-500 | #62748E | 4.76:1 AA | 4.40:1 AA large |
| slate-600 | #45556C | 7.58:1 AA | 2.76:1 Fail |
| slate-700 | #314158 | 10.35:1 AA | 2.02:1 Fail |
| slate-800 | #1D293D | 14.61:1 AA | 1.43:1 Fail |
| slate-900 | #0F172B | 17.83:1 AA | 1.17:1 Fail |
| slate-950 | #020618 | 20.15:1 AA | 1.04:1 Fail |
Use slate in your project
Utility class: bg-slate-500. CSS variable: var(--color-slate-500). Override the ramp in @theme:
@import "tailwindcss";
@theme {
--color-slate-50: oklch(98.4% 0.003 247.858);
--color-slate-100: oklch(96.8% 0.007 247.896);
--color-slate-200: oklch(92.9% 0.013 255.508);
--color-slate-300: oklch(86.9% 0.022 252.894);
--color-slate-400: oklch(70.4% 0.04 256.788);
--color-slate-500: oklch(55.4% 0.046 257.417);
--color-slate-600: oklch(44.6% 0.043 257.281);
--color-slate-700: oklch(37.2% 0.044 257.287);
--color-slate-800: oklch(27.9% 0.041 260.031);
--color-slate-900: oklch(20.8% 0.042 265.755);
--color-slate-950: oklch(12.9% 0.042 264.695);
}
More Tailwind colors
slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose
Build your own scale like this
Start from #62748E and get a custom OKLCH 50 to 950 scale with Tailwind v4 and v3 exports.