RecolorOpen Recolor

Eleven shades, from gray-50 to gray-950

Tailwind gray colors

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

Last updated

  1. 50#f9fafb
  2. 100#f3f4f6
  3. 200#e5e7eb
  4. 300#d1d5dc
  5. 400#99a1af
  6. 500#6a7282
  7. 600#4a5565
  8. 700#364153
  9. 800#1e2939
  10. 900#101828
  11. 950#030712
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
gray-50oklch(98.5% 0.002 247.839)#f9fafb1.05:1 fails20.10:1 passes
gray-100oklch(96.7% 0.003 264.542)#f3f4f61.10:1 fails19.08:1 passes
gray-200oklch(92.8% 0.006 264.531)#e5e7eb1.24:1 fails16.96:1 passes
gray-300oklch(87.2% 0.01 258.338)#d1d5dc1.47:1 fails14.26:1 passes
gray-400oklch(70.7% 0.022 261.325)#99a1af2.60:1 fails8.07:1 passes
gray-500oklch(55.1% 0.027 264.364)#6a72824.84:1 passes4.34:1 fails
gray-600oklch(44.6% 0.03 256.802)#4a55657.56:1 passes2.78:1 fails
gray-700oklch(37.3% 0.034 259.733)#36415310.30:1 passes2.04:1 fails
gray-800oklch(27.8% 0.033 256.848)#1e293914.67:1 passes1.43:1 fails
gray-900oklch(21% 0.034 264.665)#10182817.75:1 passes1.18:1 fails
gray-950oklch(13% 0.028 261.692)#03071220.13:1 passes1.04:1 fails

Text on gray, and gray as text

As a text color the rule turns around: gray text on a white page passes AA from gray-500 on, and on a black page up to gray-400, since a contrast ratio is the same whichever color is in front.

It is one of Tailwind's nine grays: its chroma stays at or under 0.034, with a hint of blue.

All eleven fit inside sRGB, so every hex code here is exact.

Sources