Pink Colors
Every shade of pink in one reference — from soft blush and rose to magenta and hot pink. Each color shows HEX, RGB and HSL values you can copy in one click.
Pink color reference
A systematic pink scale with hex, RGB and HSL values.
| Name | HEX | RGB | HSL | |
|---|---|---|---|---|
| Pink 100 | #FCE7F3 |
252, 231, 243 | 327°, 78%, 95% | |
| Pink 200 | #FBCFE8 |
251, 207, 232 | 327°, 85%, 90% | |
| Pink 300 | #F9A8D4 |
249, 168, 212 | 327°, 87%, 82% | |
| Pink 400 | #F472B6 |
244, 114, 182 | 329°, 85%, 70% | |
| Pink 500 | #EC4899 |
236, 72, 153 | 330°, 81%, 60% | |
| Pink 600 | #DB2777 |
219, 39, 119 | 333°, 72%, 51% | |
| Pink 700 | #BE185D |
190, 24, 93 | 336°, 78%, 42% | |
| Pink 800 | #9D174D |
157, 23, 77 | 336°, 74%, 35% | |
| Pink 900 | #831843 |
131, 24, 67 | 336°, 69%, 30% | |
| Pink 950 | #500724 |
80, 7, 36 | 336°, 84%, 17% |
Named pinks
Common named pinks from CSS and design practice.
Complementary and harmonious colors
Pink sits at 330° on the color wheel. Here are the relationships that pair well with pink.
| Relationship | Angle | Example hue |
|---|---|---|
| Complementary | 180° | Sea green / Teal |
| Split-complementary | 150° / 210° | Lime / Cyan |
| Triadic | 120° / 240° | Cyan / Amber |
| Analogous | −30° / +30° | Purple / Red |
Pink in design and accessibility
Pink spans an unusually wide range — from barely-there blush to full-on magenta. In design it can read as playful, romantic, youthful or bold, depending entirely on saturation and lightness. Light pinks are common in lifestyle, beauty and wellness brands; deep magenta carries energy similar to red but with more sophistication.
Common uses in interfaces
- Beauty and fashion brands — the default hue family for cosmetics and apparel.
- Youth-oriented products — apps and services for teens and young adults.
- Highlights and accents — a single pink element draws attention in an otherwise neutral UI.
- Gradients — pink with orange, purple or violet is one of the most popular gradient combinations.
Accessibility notes
Light pinks have very low contrast on white and should not be used for text. Deeper pinks pass contrast easily: #DB2777 reaches about 5.4:1 (AA) and #BE185D reaches about 8.4:1 (AAA). If you need pink for a text accent, use the deeper end of the scale or pair pink with a dark surface.
Frequently asked questions
What is the purest pink hex code?
CSS pink is #FFC0CB, a soft light pink. The brightest, most saturated pink in modern design is closer to #EC4899 at hue 330°, or #FF69B4 for a classic "hot pink". Magenta sits next door at hue 300° (#FF00FF).
What colors go well with pink?
Neutrals — white, cream, gray, black — are universal. For contrast, its complementary is sea green or teal. Analogous partners are purple and red. Deep pink with charcoal or burgundy feels sophisticated; pastel pink with mint or sky blue feels fresh and modern.
What is the complementary color of pink?
Green — specifically sea green or teal — sits opposite pink at approximately 180°. Pink at 330° is opposite green at 150°. Split-complementary partners are lime and cyan, and the pink-and-green combination feels particularly fresh and natural.
Is pink accessible for text?
Light pinks fail contrast on white and should not be used for text. Deeper pinks work well: #DB2777 reaches about 5.4:1 (AA) and #BE185D reaches about 8.4:1 (AAA). Always test the exact value you plan to use.
How do I generate a full pink scale?
Use our shades generator. Enter any pink as the base and it produces an 11-step 50–950 scale ready for CSS variables or Tailwind configs.