RecolorOpen Recolor

Eleven shades, from taupe-50 to taupe-950

Tailwind taupe colors

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

Last updated

  1. 50#fbfaf9
  2. 100#f3f1f1
  3. 200#e8e4e3
  4. 300#d8d2d0
  5. 400#aba09c
  6. 500#7c6d67
  7. 600#5b4f4b
  8. 700#473c39
  9. 800#2b2422
  10. 900#1d1816
  11. 950#0c0a09
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
taupe-50oklch(98.6% 0.002 67.8)#fbfaf91.04:1 fails20.14:1 passes
taupe-100oklch(96% 0.002 17.2)#f3f1f11.13:1 fails18.66:1 passes
taupe-200oklch(92.2% 0.005 34.3)#e8e4e31.26:1 fails16.64:1 passes
taupe-300oklch(86.8% 0.007 39.5)#d8d2d01.49:1 fails14.05:1 passes
taupe-400oklch(71.4% 0.014 41.2)#aba09c2.55:1 fails8.24:1 passes
taupe-500oklch(54.7% 0.021 43.1)#7c6d674.95:1 passes4.24:1 fails
taupe-600oklch(43.8% 0.017 39.3)#5b4f4b7.88:1 passes2.66:1 fails
taupe-700oklch(36.7% 0.016 35.7)#473c3910.64:1 passes1.97:1 fails
taupe-800oklch(26.8% 0.011 36.5)#2b242215.24:1 passes1.38:1 fails
taupe-900oklch(21.4% 0.009 43.1)#1d181617.58:1 passes1.19:1 fails
taupe-950oklch(14.7% 0.004 49.3)#0c0a0919.76:1 passes1.06:1 fails

Text on taupe, and taupe as text

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

Tailwind ships nine grays, and taupe is the one with a red-orange hint: its chroma never passes 0.021.

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

Sources