Tailwind Purple

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

  1. purple-50 #faf5ff · rgb(250, 245, 255) Black 19.6:1 AAA · White 1.1:1 Fail
  2. purple-100 #f3e8ff · rgb(243, 232, 255) Black 17.8:1 AAA · White 1.2:1 Fail
  3. purple-200 #e9d5ff · rgb(233, 213, 255) Black 15.4:1 AAA · White 1.4:1 Fail
  4. purple-300 #d8b4fe · rgb(216, 180, 254) Black 11.9:1 AAA · White 1.8:1 Fail
  5. purple-400 #c084fc · rgb(192, 132, 252) Black 7.9:1 AAA · White 2.6:1 Fail
  6. purple-500 #a855f7 · rgb(168, 85, 247) Black 5.3:1 AA · White 4.0:1 Fail
  7. purple-600 #9333ea · rgb(147, 51, 234) Black 3.9:1 Fail · White 5.4:1 AA
  8. purple-700 #7e22ce · rgb(126, 34, 206) Black 3.0:1 Fail · White 7.0:1 AA
  9. purple-800 #6b21a8 · rgb(107, 33, 168) Black 2.4:1 Fail · White 8.7:1 AAA
  10. purple-900 #581c87 · rgb(88, 28, 135) Black 1.9:1 Fail · White 10.9:1 AAA
  11. purple-950 #3b0764 · rgb(59, 7, 100) Black 1.4:1 Fail · White 15.0:1 AAA

Copy into CSS

The official purple steps as Tailwind theme variables.

@theme {
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;
  --color-purple-950: #3b0764;
}