Tailwind pink color palette
pink-50 to pink-950 in Tailwind v4 OKLCH, sRGB hex and the v3 hex. pink-500 is #F6339A in v4 and #EC4899 in v3.
Every pink shade: class, OKLCH, hex and v3 hex
| Shade | Class | v4 OKLCH | v4 hex | v3 hex | Nearest named color |
|---|---|---|---|---|---|
| pink-50 | bg-pink-50 | oklch(97.1% 0.014 343.198) | #FDF2F8 | #FDF2F8 | Lavender Blush #FFF0F5 |
| pink-100 | bg-pink-100 | oklch(94.8% 0.028 342.258) | #FCE7F3 | #FCE7F3 | Misty Rose #FFE4E1 |
| pink-200 | bg-pink-200 | oklch(89.9% 0.061 343.231) | #FCCEE8 | #FBCFE8 | Pale Pink #FFCFDC |
| pink-300 | bg-pink-300 | oklch(82.3% 0.12 346.018) | #FDA5D5 | #F9A8D4 | Powder Pink #FFB2D0 |
| pink-400 | bg-pink-400 | oklch(71.8% 0.202 349.761) | #FB64B6 | #F472B6 | Hot Pink #FF69B4 |
| pink-500 | bg-pink-500 | oklch(65.6% 0.241 354.308) | #F6339A | #EC4899 | Deep Pink #FF1493 |
| pink-600 | bg-pink-600 | oklch(59.2% 0.249 0.584) | #E60076 | #DB2777 | Cerise #DE0C62 |
| pink-700 | bg-pink-700 | oklch(52.5% 0.223 3.958) | #C6005C | #BE185D | Ruby #CA0147 |
| pink-800 | bg-pink-800 | oklch(45.9% 0.187 3.815) | #A3004C | #9D174D | Violet Red #A50055 |
| pink-900 | bg-pink-900 | oklch(40.8% 0.153 2.432) | #861043 | #831843 | Red Purple #820747 |
| pink-950 | bg-pink-950 | oklch(28.4% 0.109 3.907) | #510424 | #500724 | Burgundy #610023 |
pink contrast on white and black
WCAG AA needs 4.5:1 for body text. On white, pink shades 600, 700, 800, 900, 950 pass; on black, pink shades 50, 100, 200, 300, 400, 500, 600 pass.
| Shade | Hex | On white | On black |
|---|---|---|---|
| pink-50 | #FDF2F8 | 1.09:1 Fail | 19.23:1 AA |
| pink-100 | #FCE7F3 | 1.17:1 Fail | 17.86:1 AA |
| pink-200 | #FCCEE8 | 1.38:1 Fail | 15.13:1 AA |
| pink-300 | #FDA5D5 | 1.82:1 Fail | 11.51:1 AA |
| pink-400 | #FB64B6 | 2.76:1 Fail | 7.60:1 AA |
| pink-500 | #F6339A | 3.58:1 AA large | 5.85:1 AA |
| pink-600 | #E60076 | 4.53:1 AA | 4.62:1 AA |
| pink-700 | #C6005C | 5.90:1 AA | 3.55:1 AA large |
| pink-800 | #A3004C | 7.88:1 AA | 2.66:1 Fail |
| pink-900 | #861043 | 9.68:1 AA | 2.16:1 Fail |
| pink-950 | #510424 | 15.07:1 AA | 1.39:1 Fail |
Use pink in your project
Utility class: bg-pink-500. CSS variable: var(--color-pink-500). Override the ramp in @theme:
@import "tailwindcss";
@theme {
--color-pink-50: oklch(97.1% 0.014 343.198);
--color-pink-100: oklch(94.8% 0.028 342.258);
--color-pink-200: oklch(89.9% 0.061 343.231);
--color-pink-300: oklch(82.3% 0.12 346.018);
--color-pink-400: oklch(71.8% 0.202 349.761);
--color-pink-500: oklch(65.6% 0.241 354.308);
--color-pink-600: oklch(59.2% 0.249 0.584);
--color-pink-700: oklch(52.5% 0.223 3.958);
--color-pink-800: oklch(45.9% 0.187 3.815);
--color-pink-900: oklch(40.8% 0.153 2.432);
--color-pink-950: oklch(28.4% 0.109 3.907);
}
More Tailwind colors
Previous: fuchsia | Next: rose
slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose
Build your own scale like this
Start from #F6339A and get a custom OKLCH 50 to 950 scale with Tailwind v4 and v3 exports.