# Pink gradients that feel modern, not saccharine

[Canonical HTML page](https://gradiently.design/guide/pink-gradient)

Pink can look like a sweet shop or a fashion magazine. The difference is rarely the pink itself; it is what you put next to it. Here are palettes, pairings and codes for pink that feels current.

## The short version

- A pink gradient blends shades of pink, from pale blush and dusty rose to coral and hot pink, often with a neighbouring peach, red or violet.
- Pink looks saccharine when it is pale, saturated and paired only with other pastels, and modern when it is paired with a deep tone.
- Deep partners such as oxblood, navy, forest green and near-black give pink contrast and make it feel editorial.
- White text works on deep pinks such as #be185d, but falls below body-text contrast on brighter pinks such as #ec4899.
- Dusty, slightly greyed pinks feel more grown-up than pure candy pinks, and suit fashion, beauty and culture brands.

A **pink gradient** blends shades of pink, from pale blush and dusty rose through coral to hot pink and raspberry, often with a neighbouring peach, red or violet. Pink is having a long moment in fashion, beauty, food and culture, but it has a well-known failure mode: too pale, too sweet, too sugary. The fix is almost always contrast. Pair pink with something deep and it turns sharp and editorial. Below are palettes, pairings and CSS codes for pink gradients that feel modern.

## The range of pinks

Pink is a lighter red, but the family is wide. Blush and dusty rose are soft and slightly greyed, which makes them feel calm and grown-up. Coral and salmon lean towards orange and feel warm and sunny. Hot pink and fuchsia lean towards violet and feel loud and playful. Raspberry and berry are deep enough to carry white text.

- Blush: #fbe4e4
- Dusty rose: #e8b4b8
- Salmon: #f9a28b
- Coral pink: #fb7185
- Hot pink: #ec4899
- Fuchsia: #c026d3
- Raspberry: #be185d
- Berry: #831843

Eight pinks from palest to deepest. Soft and greyed on the left, loud in the middle, deep on the right.

Which pink you choose sets the tone before anything else does:

- **Beauty and skincare:** blush and dusty rose, often with cream and a warm brown.
- **Fashion and publishing:** dusty or hot pink against black, navy or oxblood.
- **Food and drink:** coral, salmon and raspberry, the colours of fruit and sorbet.
- **Music and nightlife:** hot pink and fuchsia glowing on near-black.
- **Weddings and stationery:** blush and rose on warm paper, with deep green or burgundy detail.

Pale pinks overlap with the wider pastel family; [pastel gradients](https://gradiently.design/guide/pastel-gradients) covers how to keep them fresh across several hues.

## Why pink turns saccharine

### Saccharine

- Pale pink blended with baby blue or lilac
- Every colour a pastel, nothing dark
- Pure, bright candy pink with no grey in it
- Rounded, bubbly type in the same pink

### Modern

- Pink set against a deep tone
- One strong dark for text and weight
- Dusty, slightly muted pinks
- Crisp type in near-black or cream

None of the saccharine choices is wrong on its own; children's brands and confectionery use them on purpose. But if you want pink to read as confident rather than cute, you need weight somewhere in the design, and a deep partner colour is the quickest way to get it.

## Soft pink gradients

Soft pinks feel calm, warm and tactile. They suit skincare, stationery, weddings and wellness. Keep them slightly dusty rather than bright, and use dark ink for text.

- Blush paper: `linear-gradient(135deg, #fdf2f0 0%, #f6cfd2 100%)`
- Dusty rose: `linear-gradient(160deg, #f5e1dc 0%, #e8b4b8 55%, #c98b95 100%)`
- Rose to apricot: `linear-gradient(135deg, #fde2e4 0%, #fed7aa 100%)`
- Petal glow: `radial-gradient(circle at 30% 30%, #fff1f2 0%, #fbcfe8 45%, #e9a6c0 100%)`

Soft pink gradients. Apricot and muted rose keep them warm without sugar.

## Pink with deep tones

This is where pink becomes editorial. A deep partner gives the pink something to glow against and gives type a solid place to sit. The pairings below are common in fashion, publishing and hospitality for good reason.

- Oxblood to rose: `linear-gradient(160deg, #2a0a12 0%, #6b1d2a 50%, #f4a6b8 100%)`
- Navy to pink: `linear-gradient(160deg, #0f1a33 0%, #3a2a5c 50%, #f9a8c2 100%)`
- Forest and pink, split: `linear-gradient(90deg, #14352a 0% 50%, #f7b6c2 50% 100%)`
- Cocoa to rose: `linear-gradient(160deg, #1c1210 0%, #4a2c25 50%, #e9a8a0 100%)`
- Pink light on black: `radial-gradient(circle at 70% 80%, #ff7ab8 0%, #7a1f4b 40%, #0d0508 80%)`
- Plum to raspberry: `linear-gradient(135deg, #3b0764 0%, #9d174d 55%, #fda4af 100%)`

Pink with deep partners. The forest pairing uses a hard split because pink and green are near opposites and would blend to grey.

Green and pink sit almost opposite each other on the colour wheel, so they make a striking pair and a poor blend. Keep them in separate areas, as in the split above. [Complementary colours](https://gradiently.design/guide/complementary-colors) explains why opposites turn grey when mixed.

## Bold and hot pink gradients

Hot pinks are the loudest colours in the family. They suit music, nightlife, sale moments and brands that want to be seen from across a room. Blend them towards orange or violet, never towards green or teal.

- Pink to tangerine: `linear-gradient(135deg, #db2777 0%, #f97316 100%)`
- Raspberry rise: `linear-gradient(135deg, #be185d 0%, #ec4899 50%, #f9a8d4 100%)`
- Violet to pink: `linear-gradient(135deg, #7c3aed 0%, #ec4899 100%)`
- Pink sunset: `linear-gradient(180deg, #ff4d8d 0%, #ff8a5c 60%, #ffd29d 100%)`

Vivid pink gradients. Each blends towards a warm or violet neighbour, so the middle stays bright.

Violet to pink is one of the most familiar gradients on the internet. If you use it, make it yours with a deep ground, a warm highlight or grain. The [purple gradients](https://gradiently.design/guide/purple-gradient) guide has more on that.

## Pink in editorial design

A portrait editorial cover titled The softness issue on a pink-toned gradient

Pink as a magazine cover: calm field, confident type.

A square quote post with dark type on a soft gradient

A quote post where dark type gives the pink weight.

Editorial pink works because it treats the colour as a ground, not a decoration. A single large field, generous space, sharp serif or grotesque type in near-black or cream, and one detail in a deep partner colour. [Editorial design for social](https://gradiently.design/guide/editorial-design-for-social) covers the devices in detail.

## Text on pink gradients

| Text on background | Contrast | Verdict |
| --- | --- | --- |
| White on `#831843` | 9.7:1 | Excellent |
| White on `#be185d` | 6.0:1 | Good for body text |
| White on `#db2777` | 4.6:1 | Just passes for body text |
| White on `#ec4899` | 3.5:1 | Large text only |
| `#3b0a1e` on `#f472b6` | 6.4:1 | Dark ink works here |
| `#1f2a44` on `#f9c6d0` | 9.5:1 | Navy on pink: excellent |

WCAG contrast ratios, calculated. Body text needs 4.5:1, large text 3:1.

```css
.cover {
  background-color: #2a0a12;
  background-image: linear-gradient(160deg, #2a0a12 0%, #6b1d2a 50%, #f4a6b8 100%);
  color: #fdf2f0;
}
```

Oxblood to rose, with cream text. Set the words in the upper, darker part of the field.

On a gradient, always check contrast where the pink is lightest behind the text. [Text on a gradient](https://gradiently.design/guide/text-on-gradient) shows how to find the calm zone.

## FAQ

### What colours go with pink in a gradient?

Peach, coral, red and violet blend cleanly with pink. For contrast, pair pink with deep tones like oxblood, navy, cocoa or near-black. Keep green in a separate area, because pink and green blend to grey.

### How do I make pink look less childish?

Use dusty or deep pinks instead of bright candy pink, add a deep partner colour and set type in near-black or cream rather than another pink.

### What text colour works on a pink gradient?

White works on deep pinks like raspberry and berry. On lighter pinks, use a dark ink such as a deep burgundy or navy.

### What is the CSS for a pink gradient?

For example, linear-gradient(160deg, #2a0a12 0%, #6b1d2a 50%, #f4a6b8 100%) gives an oxblood to rose gradient. All the palettes on this page can be copied as CSS.