Shades of Pink
Every useful pink, generated rather than hand-listed.
There are 17 named CSS colors in the pink family, ranging from Bubblegum (#ffc1cc) at the light end to Bordeaux (#5c0120) at the dark end. The shades generated on this page all sit at hue 5° in OKLCH, so their lightness steps look evenly spaced instead of bunching up in the shadows the way an HSL ramp does.
Every shade of pink on this page is generated, not copied from a list. Each swatch sits at hue 5° in OKLCH with an even perceptual lightness step, so the ramp reads smoothly instead of bunching up at the dark end the way an HSL ramp does — and nothing is clipped outside what an sRGB display can actually show.
Click any swatch to copy its hex code. The sliders let you change how many shades you get, how intense they are, and how much the hue drifts across the ramp.
Three pink shades worth starting from
If you just need a pink that works, these three are safe picks at the light, mid and dark ends of the range.
| Role | Hex | RGB | Contrast on white |
|---|---|---|---|
| Light pink — backgrounds, tints | #fbc8d2 | rgb(251 200 210) | 1.47:1 |
| Mid pink — accents, buttons | #cb4f73 | rgb(203 79 115) | 4.28:1 |
| Dark pink — text, borders | #60082b | rgb(96 8 43) | 13.4:1 |
Named shades of pink
17 named colors that fall in the pink range, sorted from darkest to lightest, with the contrast ratio each one achieves against a white background. Anything below 4.5:1 is not safe for body text on white.
| Name | Hex | RGB | HSL | On white |
|---|---|---|---|---|
| Bordeaux | #5c0120 | rgb(92 1 32) | hsl(339.6 97.8% 18.2%) | 14.19:1 |
| Eggplant | #614051 | rgb(97 64 81) | hsl(329.1 20.5% 31.6%) | 8.9:1 |
| Medium Violet Red | #c71585 | rgb(199 21 133) | hsl(322.2 80.9% 43.1%) | 5.42:1 |
| Raspberry | #e30b5c | rgb(227 11 92) | hsl(337.5 90.8% 46.7%) | 4.7:1 |
| Mulberry | #c54b8c | rgb(197 75 140) | hsl(328 51.3% 53.3%) | 4.41:1 |
| Cerise | #de3163 | rgb(222 49 99) | hsl(342.7 72.4% 53.1%) | 4.44:1 |
| Blush | #de5d83 | rgb(222 93 131) | hsl(342.3 66.2% 61.8%) | 3.5:1 |
| Deep Pink | #ff1493 | rgb(255 20 147) | hsl(327.6 100% 53.9%) | 3.64:1 |
| Dragonfruit | #f0479a | rgb(240 71 154) | hsl(330.5 84.9% 61%) | 3.46:1 |
| Pale Violet Red | #db7093 | rgb(219 112 147) | hsl(340.4 59.8% 64.9%) | 3.11:1 |
| Watermelon | #fc6c85 | rgb(252 108 133) | hsl(349.6 96% 70.6%) | 2.75:1 |
| Hot Pink | #ff69b4 | rgb(255 105 180) | hsl(330 100% 70.6%) | 2.65:1 |
| Flamingo | #fc8eac | rgb(252 142 172) | hsl(343.6 94.8% 77.3%) | 2.19:1 |
| Lightpink | #ffb6c1 | rgb(255 182 193) | hsl(351 100% 85.7%) | 1.65:1 |
| Shell Pink | #f8c1cc | rgb(248 193 204) | hsl(348 79.7% 86.5%) | 1.56:1 |
| Pink | #ffc0cb | rgb(255 192 203) | hsl(349.5 100% 87.6%) | 1.54:1 |
| Bubblegum | #ffc1cc | rgb(255 193 204) | hsl(349.4 100% 87.8%) | 1.53:1 |
Using pink in an interface
The two badges next to each generated shade are its contrast ratio against white and against black. The first step where one of them turns green is the lightest pink you can safely set body text in on that background — everything lighter is decoration, not copy.
For large areas, pick from the light end and let a darker shade of the same hue carry the text. That keeps the whole surface in one hue family, which is what makes an interface feel deliberate rather than assembled.
Frequently asked questions
What are the hex codes for shades of pink?
The ramp at the top of this page generates them — click any swatch to copy it. Three reliable picks are #fbc8d2 for light, #cb4f73 for mid and #60082b for dark pink.
What is the hex code for pink?
The closest single answer is Dragonfruit at #f0479a, but pink is a range rather than one value. This page lists 17 named pink shades and generates as many more as you want.
How many shades of pink are there?
Effectively unlimited — an 8-bit display can show over 16 million colors, and a large share of them read as this family. The useful question is how many distinguishable steps you need, which is usually somewhere between 9 and 12 for a design system.
What colors go well with pink?
Its perceptual complement sits at hue 185°, and the two neighbors either side of that make a softer split-complementary set. The palette generator builds all of them from any starting pink.
Which shade of pink is accessible for text?
On a white background you need 4.5:1 for body text. In the table above that is every row at or above 4.5:1 — generally the darker half of the family. The contrast checker will confirm any specific pair and suggest the nearest passing color if it fails.