Pink colors
27 pink colors, sorted light to dark. The lightest is Pink Lace at 93 percent lightness, the darkest is Rubine Red at 41 percent. Each one has hex, HSL, OKLCH and the contrast it gives against white and ink black.
| Color | Hex | HSL | OKLCH | On white | On ink |
|---|---|---|---|---|---|
| Pink Lace | #FFDDF4 | hsl(319, 100%, 93%) | oklch(93.23% 0.0478 337.83) | 1.24:1 | 15.40:1 |
| Cotton Candy | #FBCCE7 | hsl(326, 85%, 89%) | oklch(89.36% 0.0632 343.03) | 1.41:1 | 13.57:1 |
| Pink | #FFC0CB | hsl(350, 100%, 88%) | oklch(86.77% 0.0735 7.09) | 1.54:1 | 12.44:1 |
| Cherry Blossom | #FFB7C5 | hsl(348, 100%, 86%) | oklch(85.02% 0.0851 6.19) | 1.64:1 | 11.69:1 |
| Light Pink | #FFB6C1 | hsl(351, 100%, 86%) | oklch(84.74% 0.0858 9.09) | 1.65:1 | 11.59:1 |
| Melon | #FDBCB4 | hsl(7, 95%, 85%) | oklch(85.26% 0.0765 26.73) | 1.61:1 | 11.87:1 |
| Amaranth Pink | #F19CBB | hsl(338, 75%, 78%) | oklch(78.62% 0.1078 356.40) | 2.06:1 | 9.31:1 |
| Flamingo | #FC8EAC | hsl(344, 95%, 77%) | oklch(77.24% 0.1362 3.30) | 2.19:1 | 8.75:1 |
| Salmon Pink | #F78FA7 | hsl(346, 87%, 76%) | oklch(76.64% 0.1279 5.71) | 2.22:1 | 8.60:1 |
| Fuchsia Pink | #FF77FF | hsl(300, 100%, 73%) | oklch(77.58% 0.2277 327.49) | 2.25:1 | 8.51:1 |
| Coral Pink | #F88379 | hsl(5, 90%, 72%) | oklch(73.82% 0.1445 26.21) | 2.47:1 | 7.76:1 |
| Hot Pink | #FF69B4 | hsl(330, 100%, 71%) | oklch(72.83% 0.1971 351.99) | 2.65:1 | 7.23:1 |
| Pale Violet Red | #DB7093 | hsl(340, 60%, 65%) | oklch(67.79% 0.1382 0.68) | 3.11:1 | 6.15:1 |
| Rose | #E75480 | hsl(342, 75%, 62%) | oklch(65.29% 0.1845 5.39) | 3.51:1 | 5.45:1 |
| Blush | #DE5D83 | hsl(342, 66%, 62%) | oklch(65.11% 0.1644 4.45) | 3.50:1 | 5.47:1 |
| Deep Cerise | #E75394 | hsl(334, 76%, 62%) | oklch(65.78% 0.1920 356.59) | 3.46:1 | 5.52:1 |
| Hot Magenta | #FF2D78 | hsl(339, 100%, 59%) | oklch(65.70% 0.2413 6.90) | 3.56:1 | 5.38:1 |
| Deep Pink | #FF1493 | hsl(328, 100%, 54%) | oklch(65.49% 0.2613 356.94) | 3.64:1 | 5.26:1 |
| Cerise | #DE3163 | hsl(343, 72%, 53%) | oklch(59.79% 0.2080 9.89) | 4.44:1 | 4.31:1 |
| Shocking Pink | #FC0FC0 | hsl(315, 98%, 52%) | oklch(66.64% 0.2815 343.01) | 3.52:1 | 5.44:1 |
| Magenta | #FF00FF | hsl(300, 100%, 50%) | oklch(70.17% 0.3225 328.36) | 3.14:1 | 6.10:1 |
| Fashion Fuchsia | #F400A1 | hsl(320, 100%, 48%) | oklch(63.74% 0.2658 350.15) | 3.92:1 | 4.89:1 |
| Ruby | #E0115F | hsl(337, 86%, 47%) | oklch(58.44% 0.2280 8.91) | 4.76:1 | 4.02:1 |
| Raspberry | #E30B5C | hsl(338, 91%, 47%) | oklch(58.77% 0.2315 10.16) | 4.70:1 | 4.07:1 |
| Mystic | #AA4069 | hsl(337, 45%, 46%) | oklch(52.84% 0.1444 359.26) | 5.76:1 | 3.32:1 |
| Medium Violet Red | #C71585 | hsl(322, 81%, 43%) | oklch(55.34% 0.2217 349.69) | 5.42:1 | 3.53:1 |
| Rubine Red | #D10056 | hsl(335, 100%, 41%) | oklch(55.07% 0.2203 9.10) | 5.46:1 | 3.50:1 |
Where pink sits on the wheel
In HSL terms this family covers roughly 290 to 345 degrees. Pink covers the magenta side of the wheel down to the reds. Most colors called pink are not high in hue saturation at all: they are reds and magentas with the lightness pushed up, which is why so many of them are tints rather than distinct hues.
Working with pink in an interface
Pinks are useful where a red would read as an error. They keep the warmth without triggering the destructive-action association, which makes them workable for highlights, tags and decorative accents.
In this set, 5 of 27 pink colors clear WCAG AA for normal text on a white background, and 21 of 27 clear it as text on ink black. The most saturated is Magenta at an OKLCH chroma of 0.323, the most muted is Pink Lace at 0.048. If you are building a ramp, those two are the practical edges of what this family gives you.
The mistake to avoid
Light pinks fail contrast with white text by a wide margin while looking bright enough that people assume they will pass. Always measure rather than assume from apparent brightness.
Check any pair you are unsure about in the contrast checker, or open the contrast matrix to see which library colors pair safely with each other.
Other families
Last updated by FusionStudios. Every value on this page is computed by the same functions the tools use. How this is calculated.