RecolorOpen Recolor

Eleven shades, from stone-50 to stone-950

Tailwind stone colors

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

Last updated

  1. 50#fafaf9
  2. 100#f5f5f4
  3. 200#e7e5e4
  4. 300#d6d3d1
  5. 400#a6a09b
  6. 500#79716b
  7. 600#57534d
  8. 700#44403b
  9. 800#292524
  10. 900#1c1917
  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
stone-50oklch(98.5% 0.001 106.423)#fafaf91.04:1 fails20.11:1 passes
stone-100oklch(97% 0.001 106.424)#f5f5f41.09:1 fails19.25:1 passes
stone-200oklch(92.3% 0.003 48.717)#e7e5e41.26:1 fails16.73:1 passes
stone-300oklch(86.9% 0.005 56.366)#d6d3d11.49:1 fails14.10:1 passes
stone-400oklch(70.9% 0.01 56.259)#a6a09b2.59:1 fails8.12:1 passes
stone-500oklch(55.3% 0.013 58.071)#79716b4.79:1 passes4.39:1 fails
stone-600oklch(44.4% 0.011 73.639)#57534d7.64:1 passes2.75:1 fails
stone-700oklch(37.4% 0.01 67.558)#44403b10.28:1 passes2.04:1 fails
stone-800oklch(26.8% 0.007 34.298)#29252415.17:1 passes1.38:1 fails
stone-900oklch(21.6% 0.006 56.043)#1c191717.49:1 passes1.20:1 fails
stone-950oklch(14.7% 0.004 49.25)#0c0a0919.76:1 passes1.06:1 fails

Text on stone, and stone as text

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

Tailwind ships nine grays, and stone is the one with a orange hint: its chroma never passes 0.013.

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

Sources