Tailwind Fuchsia

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

  1. fuchsia-50 #fdf4ff · rgb(253, 244, 255) Black 19.6:1 AAA · White 1.1:1 Fail
  2. fuchsia-100 #fae8ff · rgb(250, 232, 255) Black 18.1:1 AAA · White 1.2:1 Fail
  3. fuchsia-200 #f5d0fe · rgb(245, 208, 254) Black 15.3:1 AAA · White 1.4:1 Fail
  4. fuchsia-300 #f0abfc · rgb(240, 171, 252) Black 11.9:1 AAA · White 1.8:1 Fail
  5. fuchsia-400 #e879f9 · rgb(232, 121, 249) Black 8.5:1 AAA · White 2.5:1 Fail
  6. fuchsia-500 #d946ef · rgb(217, 70, 239) Black 6.1:1 AA · White 3.5:1 Fail
  7. fuchsia-600 #c026d3 · rgb(192, 38, 211) Black 4.5:1 Fail · White 4.7:1 AA
  8. fuchsia-700 #a21caf · rgb(162, 28, 175) Black 3.3:1 Fail · White 6.3:1 AA
  9. fuchsia-800 #86198f · rgb(134, 25, 143) Black 2.5:1 Fail · White 8.2:1 AAA
  10. fuchsia-900 #701a75 · rgb(112, 26, 117) Black 2.1:1 Fail · White 10.0:1 AAA
  11. fuchsia-950 #4a044e · rgb(74, 4, 78) Black 1.4:1 Fail · White 14.8:1 AAA

Copy into CSS

The official fuchsia steps as Tailwind theme variables.

@theme {
  --color-fuchsia-50: #fdf4ff;
  --color-fuchsia-100: #fae8ff;
  --color-fuchsia-200: #f5d0fe;
  --color-fuchsia-300: #f0abfc;
  --color-fuchsia-400: #e879f9;
  --color-fuchsia-500: #d946ef;
  --color-fuchsia-600: #c026d3;
  --color-fuchsia-700: #a21caf;
  --color-fuchsia-800: #86198f;
  --color-fuchsia-900: #701a75;
  --color-fuchsia-950: #4a044e;
}