Tailwind Pink

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

  1. pink-50 #fdf2f8 · rgb(253, 242, 248) Black 19.2:1 AAA · White 1.1:1 Fail
  2. pink-100 #fce7f3 · rgb(252, 231, 243) Black 17.9:1 AAA · White 1.2:1 Fail
  3. pink-200 #fbcfe8 · rgb(251, 207, 232) Black 15.2:1 AAA · White 1.4:1 Fail
  4. pink-300 #f9a8d4 · rgb(249, 168, 212) Black 11.6:1 AAA · White 1.8:1 Fail
  5. pink-400 #f472b6 · rgb(244, 114, 182) Black 7.9:1 AAA · White 2.6:1 Fail
  6. pink-500 #ec4899 · rgb(236, 72, 153) Black 6.0:1 AA · White 3.5:1 Fail
  7. pink-600 #db2777 · rgb(219, 39, 119) Black 4.6:1 AA · White 4.6:1 AA
  8. pink-700 #be185d · rgb(190, 24, 93) Black 3.5:1 Fail · White 6.0:1 AA
  9. pink-800 #9d174d · rgb(157, 23, 77) Black 2.7:1 Fail · White 7.9:1 AAA
  10. pink-900 #831843 · rgb(131, 24, 67) Black 2.2:1 Fail · White 9.6:1 AAA
  11. pink-950 #500724 · rgb(80, 7, 36) Black 1.4:1 Fail · White 15.0:1 AAA

Copy into CSS

The official pink steps as Tailwind theme variables.

@theme {
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;
  --color-pink-950: #500724;
}