Tailwind Red

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

  1. red-50 #fef2f2 · rgb(254, 242, 242) Black 19.2:1 AAA · White 1.1:1 Fail
  2. red-100 #fee2e2 · rgb(254, 226, 226) Black 17.2:1 AAA · White 1.2:1 Fail
  3. red-200 #fecaca · rgb(254, 202, 202) Black 14.5:1 AAA · White 1.4:1 Fail
  4. red-300 #fca5a5 · rgb(252, 165, 165) Black 11.1:1 AAA · White 1.9:1 Fail
  5. red-400 #f87171 · rgb(248, 113, 113) Black 7.6:1 AAA · White 2.8:1 Fail
  6. red-500 #ef4444 · rgb(239, 68, 68) Black 5.6:1 AA · White 3.8:1 Fail
  7. red-600 #dc2626 · rgb(220, 38, 38) Black 4.3:1 Fail · White 4.8:1 AA
  8. red-700 #b91c1c · rgb(185, 28, 28) Black 3.2:1 Fail · White 6.5:1 AA
  9. red-800 #991b1b · rgb(153, 27, 27) Black 2.5:1 Fail · White 8.3:1 AAA
  10. red-900 #7f1d1d · rgb(127, 29, 29) Black 2.1:1 Fail · White 10.0:1 AAA
  11. red-950 #450a0a · rgb(69, 10, 10) Black 1.3:1 Fail · White 16.1:1 AAA

Copy into CSS

The official red steps as Tailwind theme variables.

@theme {
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
}