RecolorOpen Recolor

Eleven shades, from zinc-50 to zinc-950

Tailwind zinc colors

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

Last updated

  1. 50#fafafa
  2. 100#f4f4f5
  3. 200#e4e4e7
  4. 300#d4d4d8
  5. 400#9f9fa9
  6. 500#71717b
  7. 600#52525c
  8. 700#3f3f46
  9. 800#27272a
  10. 900#18181b
  11. 950#09090b
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
zinc-50oklch(98.5% 0 none)#fafafa1.04:1 fails20.12:1 passes
zinc-100oklch(96.7% 0.001 286.375)#f4f4f51.10:1 fails19.11:1 passes
zinc-200oklch(92% 0.004 286.32)#e4e4e71.27:1 fails16.55:1 passes
zinc-300oklch(87.1% 0.006 286.286)#d4d4d81.48:1 fails14.21:1 passes
zinc-400oklch(70.5% 0.015 286.067)#9f9fa92.62:1 fails8.01:1 passes
zinc-500oklch(55.2% 0.016 285.938)#71717b4.83:1 passes4.35:1 fails
zinc-600oklch(44.2% 0.017 285.786)#52525c7.72:1 passes2.72:1 fails
zinc-700oklch(37% 0.013 285.805)#3f3f4610.44:1 passes2.01:1 fails
zinc-800oklch(27.4% 0.006 286.033)#27272a14.89:1 passes1.41:1 fails
zinc-900oklch(21% 0.006 285.885)#18181b17.72:1 passes1.19:1 fails
zinc-950oklch(14.1% 0.005 285.823)#09090b19.90:1 passes1.06:1 fails

Text on zinc, and zinc as text

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

Tailwind ships nine grays, and zinc is the one with a indigo hint: its chroma never passes 0.017.

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

Sources