Tailwind Indigo

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

  1. indigo-50 #eef2ff · rgb(238, 242, 255) Black 18.8:1 AAA · White 1.1:1 Fail
  2. indigo-100 #e0e7ff · rgb(224, 231, 255) Black 17.0:1 AAA · White 1.2:1 Fail
  3. indigo-200 #c7d2fe · rgb(199, 210, 254) Black 14.1:1 AAA · White 1.5:1 Fail
  4. indigo-300 #a5b4fc · rgb(165, 180, 252) Black 10.5:1 AAA · White 2.0:1 Fail
  5. indigo-400 #818cf8 · rgb(129, 140, 248) Black 7.0:1 AAA · White 3.0:1 Fail
  6. indigo-500 #6366f1 · rgb(99, 102, 241) Black 4.7:1 AA · White 4.5:1 Fail
  7. indigo-600 #4f46e5 · rgb(79, 70, 229) Black 3.3:1 Fail · White 6.3:1 AA
  8. indigo-700 #4338ca · rgb(67, 56, 202) Black 2.7:1 Fail · White 7.9:1 AAA
  9. indigo-800 #3730a3 · rgb(55, 48, 163) Black 2.1:1 Fail · White 9.9:1 AAA
  10. indigo-900 #312e81 · rgb(49, 46, 129) Black 1.8:1 Fail · White 11.4:1 AAA
  11. indigo-950 #1e1b4b · rgb(30, 27, 75) Black 1.3:1 Fail · White 16.0:1 AAA

Copy into CSS

The official indigo steps as Tailwind theme variables.

@theme {
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;
  --color-indigo-950: #1e1b4b;
}