Tailwind Violet

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

  1. violet-50 #f5f3ff · rgb(245, 243, 255) Black 19.1:1 AAA · White 1.1:1 Fail
  2. violet-100 #ede9fe · rgb(237, 233, 254) Black 17.7:1 AAA · White 1.2:1 Fail
  3. violet-200 #ddd6fe · rgb(221, 214, 254) Black 15.1:1 AAA · White 1.4:1 Fail
  4. violet-300 #c4b5fd · rgb(196, 181, 253) Black 11.4:1 AAA · White 1.8:1 Fail
  5. violet-400 #a78bfa · rgb(167, 139, 250) Black 7.7:1 AAA · White 2.7:1 Fail
  6. violet-500 #8b5cf6 · rgb(139, 92, 246) Black 5.0:1 AA · White 4.2:1 Fail
  7. violet-600 #7c3aed · rgb(124, 58, 237) Black 3.7:1 Fail · White 5.7:1 AA
  8. violet-700 #6d28d9 · rgb(109, 40, 217) Black 3.0:1 Fail · White 7.1:1 AAA
  9. violet-800 #5b21b6 · rgb(91, 33, 182) Black 2.3:1 Fail · White 9.0:1 AAA
  10. violet-900 #4c1d95 · rgb(76, 29, 149) Black 1.9:1 Fail · White 11.0:1 AAA
  11. violet-950 #2e1065 · rgb(46, 16, 101) Black 1.4:1 Fail · White 15.2:1 AAA

Copy into CSS

The official violet steps as Tailwind theme variables.

@theme {
  --color-violet-50: #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-200: #ddd6fe;
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;
  --color-violet-800: #5b21b6;
  --color-violet-900: #4c1d95;
  --color-violet-950: #2e1065;
}