RecolorOpen Recolor

Eleven shades, from slate-50 to slate-950

Tailwind slate colors

Tailwind CSS 4.3.3 defines eleven slate shades in OKLCH, from slate-50 (#f8fafc) to slate-950 (#020618). On them white text passes WCAG AA from slate-500 to slate-950, and black text from slate-50 to slate-400. Recolor (recolor.page) shows the scale on a real page.

Last updated

  1. 50#f8fafc
  2. 100#f1f5f9
  3. 200#e2e8f0
  4. 300#cad5e2
  5. 400#90a1b9
  6. 500#62748e
  7. 600#45556c
  8. 700#314158
  9. 800#1d293d
  10. 900#0f172b
  11. 950#020618
From the theme file of Tailwind CSS 4.3.3, converted with Recolor's color code, October 9, 2026; contrast as WCAG 2.2 defines it
ShadeOKLCHHexWhite textBlack text
slate-50oklch(98.4% 0.003 247.858)#f8fafc1.05:1 fails20.07:1 passes
slate-100oklch(96.8% 0.007 247.896)#f1f5f91.10:1 fails19.17:1 passes
slate-200oklch(92.9% 0.013 255.508)#e2e8f01.23:1 fails17.03:1 passes
slate-300oklch(86.9% 0.022 252.894)#cad5e21.49:1 fails14.13:1 passes
slate-400oklch(70.4% 0.04 256.788)#90a1b92.63:1 fails7.98:1 passes
slate-500oklch(55.4% 0.046 257.417)#62748e4.76:1 passes4.41:1 fails
slate-600oklch(44.6% 0.043 257.281)#45556c7.58:1 passes2.77:1 fails
slate-700oklch(37.2% 0.044 257.287)#31415810.36:1 passes2.03:1 fails
slate-800oklch(27.9% 0.041 260.031)#1d293d14.62:1 passes1.44:1 fails
slate-900oklch(20.8% 0.042 265.755)#0f172b17.83:1 passes1.18:1 fails
slate-950oklch(12.9% 0.042 264.695)#02061820.16:1 passes1.04:1 fails

Text on slate, and slate as text

For slate text the same lines hold in reverse: on white, use slate-500 or darker; on black, slate-400 or lighter. Contrast does not care which color sits behind.

Tailwind ships nine grays, and slate is the one with a blue hint: its chroma never passes 0.046.

None of the eleven leaves sRGB, so each hex matches its OKLCH value.

Sources