Tailwind Stone

Eleven steps from stone-50 to stone-950. stone-500 is #78716c. Open any hex in the explorer to see its OKLCH, a generated scale, and how it looks in color-vision simulations.

  1. stone-50 #fafaf9 · rgb(250, 250, 249) Black 20.1:1 AAA · White 1.0:1 Fail
  2. stone-100 #f5f5f4 · rgb(245, 245, 244) Black 19.2:1 AAA · White 1.1:1 Fail
  3. stone-200 #e7e5e4 · rgb(231, 229, 228) Black 16.7:1 AAA · White 1.3:1 Fail
  4. stone-300 #d6d3d1 · rgb(214, 211, 209) Black 14.1:1 AAA · White 1.5:1 Fail
  5. stone-400 #a8a29e · rgb(168, 162, 158) Black 8.3:1 AAA · White 2.5:1 Fail
  6. stone-500 #78716c · rgb(120, 113, 108) Black 4.4:1 Fail · White 4.8:1 AA
  7. stone-600 #57534e · rgb(87, 83, 78) Black 2.8:1 Fail · White 7.6:1 AAA
  8. stone-700 #44403c · rgb(68, 64, 60) Black 2.0:1 Fail · White 10.3:1 AAA
  9. stone-800 #292524 · rgb(41, 37, 36) Black 1.4:1 Fail · White 15.2:1 AAA
  10. stone-900 #1c1917 · rgb(28, 25, 23) Black 1.2:1 Fail · White 17.5:1 AAA
  11. stone-950 #0c0a09 · rgb(12, 10, 9) Black 1.1:1 Fail · White 19.8:1 AAA

Copy into CSS

The official stone steps as Tailwind theme variables.

@theme {
  --color-stone-50: #fafaf9;
  --color-stone-100: #f5f5f4;
  --color-stone-200: #e7e5e4;
  --color-stone-300: #d6d3d1;
  --color-stone-400: #a8a29e;
  --color-stone-500: #78716c;
  --color-stone-600: #57534e;
  --color-stone-700: #44403c;
  --color-stone-800: #292524;
  --color-stone-900: #1c1917;
  --color-stone-950: #0c0a09;
}