Tailwind Gray

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

  1. gray-50 #f9fafb · rgb(249, 250, 251) Black 20.1:1 AAA · White 1.0:1 Fail
  2. gray-100 #f3f4f6 · rgb(243, 244, 246) Black 19.1:1 AAA · White 1.1:1 Fail
  3. gray-200 #e5e7eb · rgb(229, 231, 235) Black 17.0:1 AAA · White 1.2:1 Fail
  4. gray-300 #d1d5db · rgb(209, 213, 219) Black 14.3:1 AAA · White 1.5:1 Fail
  5. gray-400 #9ca3af · rgb(156, 163, 175) Black 8.3:1 AAA · White 2.5:1 Fail
  6. gray-500 #6b7280 · rgb(107, 114, 128) Black 4.3:1 Fail · White 4.8:1 AA
  7. gray-600 #4b5563 · rgb(75, 85, 99) Black 2.8:1 Fail · White 7.6:1 AAA
  8. gray-700 #374151 · rgb(55, 65, 81) Black 2.0:1 Fail · White 10.3:1 AAA
  9. gray-800 #1f2937 · rgb(31, 41, 55) Black 1.4:1 Fail · White 14.7:1 AAA
  10. gray-900 #111827 · rgb(17, 24, 39) Black 1.2:1 Fail · White 17.7:1 AAA
  11. gray-950 #030712 · rgb(3, 7, 18) Black 1.0:1 Fail · White 20.1:1 AAA

Copy into CSS

The official gray steps as Tailwind theme variables.

@theme {
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
}