Skip to main content
← Back to All Colors

Tailwind Pink Color Palette

Soft and approachable, perfect for lifestyle brands and friendly interfaces.
Click any button to copy className, HEX, RGB, HSL, or OKLCH.

50
pink-50
#fdf2f8
100
pink-100
#fce7f3
200
pink-200
#fbcfe8
300
pink-300
#f9a8d4
400
pink-400
#f472b6
500
pink-500
#ec4899
600
pink-600
#db2777
700
pink-700
#be185d
800
pink-800
#9d174d
900
pink-900
#831843
950
pink-950
#500724

Quick Reference

ShadeClassHEXRGBHSLOKLCH
pink-50#fdf2f8rgb(253, 242, 248)hsl(327, 73%, 97%)oklch(0.971 0.014 343.198)
pink-100#fce7f3rgb(252, 231, 243)hsl(326, 78%, 95%)oklch(0.948 0.028 342.258)
pink-200#fbcfe8rgb(251, 207, 232)hsl(326, 85%, 90%)oklch(0.899 0.061 343.231)
pink-300#f9a8d4rgb(249, 168, 212)hsl(327, 87%, 82%)oklch(0.823 0.12 346.018)
pink-400#f472b6rgb(244, 114, 182)hsl(329, 86%, 70%)oklch(0.718 0.202 349.761)
pink-500#ec4899rgb(236, 72, 153)hsl(330, 81%, 60%)oklch(0.656 0.241 354.308)
pink-600#db2777rgb(219, 39, 119)hsl(333, 71%, 51%)oklch(0.592 0.249 0.584)
pink-700#be185drgb(190, 24, 93)hsl(335, 78%, 42%)oklch(0.525 0.223 3.958)
pink-800#9d174drgb(157, 23, 77)hsl(336, 74%, 35%)oklch(0.459 0.187 3.815)
pink-900#831843rgb(131, 24, 67)hsl(336, 69%, 30%)oklch(0.408 0.153 2.432)
pink-950#500724rgb(80, 7, 36)hsl(336, 84%, 17%)oklch(0.284 0.109 3.907)

Usage Examples

Background

bg-pink-500

Text

text-pink-500

Sample Text

Border

border-pink-300

Ring

ring-pink-500