Tailwind Slate

Eleven steps from slate-50 to slate-950. slate-500 is #64748b. Open any hex in the explorer to see its OKLCH, a generated scale, and how it looks in color-vision simulations.

  1. slate-50 #f8fafc · rgb(248, 250, 252) Black 20.1:1 AAA · White 1.0:1 Fail
  2. slate-100 #f1f5f9 · rgb(241, 245, 249) Black 19.2:1 AAA · White 1.1:1 Fail
  3. slate-200 #e2e8f0 · rgb(226, 232, 240) Black 17.0:1 AAA · White 1.2:1 Fail
  4. slate-300 #cbd5e1 · rgb(203, 213, 225) Black 14.1:1 AAA · White 1.5:1 Fail
  5. slate-400 #94a3b8 · rgb(148, 163, 184) Black 8.2:1 AAA · White 2.6:1 Fail
  6. slate-500 #64748b · rgb(100, 116, 139) Black 4.4:1 Fail · White 4.8:1 AA
  7. slate-600 #475569 · rgb(71, 85, 105) Black 2.8:1 Fail · White 7.6:1 AAA
  8. slate-700 #334155 · rgb(51, 65, 85) Black 2.0:1 Fail · White 10.4:1 AAA
  9. slate-800 #1e293b · rgb(30, 41, 59) Black 1.4:1 Fail · White 14.6:1 AAA
  10. slate-900 #0f172a · rgb(15, 23, 42) Black 1.2:1 Fail · White 17.9:1 AAA
  11. slate-950 #020617 · rgb(2, 6, 23) Black 1.0:1 Fail · White 20.2:1 AAA

Copy into CSS

The official slate steps as Tailwind theme variables.

@theme {
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
}