Tailwind Blue

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

  1. blue-50 #eff6ff · rgb(239, 246, 255) Black 19.3:1 AAA · White 1.1:1 Fail
  2. blue-100 #dbeafe · rgb(219, 234, 254) Black 17.2:1 AAA · White 1.2:1 Fail
  3. blue-200 #bfdbfe · rgb(191, 219, 254) Black 14.8:1 AAA · White 1.4:1 Fail
  4. blue-300 #93c5fd · rgb(147, 197, 253) Black 11.6:1 AAA · White 1.8:1 Fail
  5. blue-400 #60a5fa · rgb(96, 165, 250) Black 8.3:1 AAA · White 2.5:1 Fail
  6. blue-500 #3b82f6 · rgb(59, 130, 246) Black 5.7:1 AA · White 3.7:1 Fail
  7. blue-600 #2563eb · rgb(37, 99, 235) Black 4.1:1 Fail · White 5.2:1 AA
  8. blue-700 #1d4ed8 · rgb(29, 78, 216) Black 3.1:1 Fail · White 6.7:1 AA
  9. blue-800 #1e40af · rgb(30, 64, 175) Black 2.4:1 Fail · White 8.7:1 AAA
  10. blue-900 #1e3a8a · rgb(30, 58, 138) Black 2.0:1 Fail · White 10.4:1 AAA
  11. blue-950 #172554 · rgb(23, 37, 84) Black 1.4:1 Fail · White 14.7:1 AAA

Copy into CSS

The official blue steps as Tailwind theme variables.

@theme {
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;
}