# Pink and purple gradient codes, from candy to dusk

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

Pink and purple can be sugary, glamorous or quietly moody, depending on how light and how saturated you go. Here are the codes for each step of that range, and how to choose.

## The short version

- A pink and purple gradient blends neighbouring hues such as pink #ec4899, magenta #c026d3 and violet #9333ea, so the transition stays bright without a bridge colour.
- The same pair reads as candy when it is pale, as glamour when it is saturated and as dusk when it is dark.
- White text fails on bright pink and pale lilac, so use a deep plum ink there and keep white for magenta, violet and dark grounds.
- Adding a small amount of orange, blue or gold to a pink and purple gradient makes it far less expected than the standard two colour blend.
- Pink and purple suit beauty, nightlife, music, celebrations and creator brands, and a dark ground keeps them from feeling childish.

A **pink and purple gradient** blends two neighbours on the colour wheel, pink like `#ec4899` and violet like `#9333ea`, with magenta and orchid in between. Because the hues are adjacent, the blend stays vivid all the way across. What changes everything is lightness: keep it pale and you get candy floss, push saturation and you get glamour, take it dark and you get dusk. The codes below run from light to dark, so you can pick the mood first and the hex values second.

## Pink and purple gradient moods at a glance

| Mood | Typical stops | Feels | Works for |
| --- | --- | --- | --- |
| Candy | `#fbcfe8` to `#e9d5ff` | Sweet, soft, young | Bakeries, baby showers, stationery |
| Orchid | `#f0abfc` to `#c084fc` | Dreamy, romantic | Beauty, weddings, wellness |
| Magenta | `#ec4899` to `#9333ea` | Bold, glamorous | Nightlife, music, creators |
| Dusk | `#2e0a2f` to `#9d174d` | Moody, grown up | Fragrance, cocktails, late events |

Four moods from one pair. Each step down the table is darker or more saturated than the last.

- Candy pink: #fbcfe8
- Bubblegum: #f9a8d4
- Hot pink: #ec4899
- Magenta: #c026d3
- Orchid violet: #a855f7
- Violet: #9333ea
- Lilac: #e9d5ff
- Plum ink: #2e0a2f

A working palette for the pair, including the light and dark ends you need for text.

## Candy pink and purple gradients

Pale pinks and lilacs together are as soft as colour gets. They suit anything sweet or gentle, but they can tip into childish quickly. The fix is a slightly warm ground, a peach or cream at one end, and very confident dark type.

- Candy floss: `linear-gradient(135deg, #fce7f3 0%, #fbcfe8 45%, #e9d5ff 100%)`
- Strawberry milk: `linear-gradient(180deg, #fff1f2 0%, #f5d0fe 100%)`
- Peach, pink, lilac: `radial-gradient(circle at 25% 25%, #ffedd5 0%, #fbcfe8 45%, #ddd6fe 100%)`

Candy blends, all set in a deep plum ink. The peach in the third keeps it from feeling sugary.

For more of this softness, [pastel gradients](https://gradiently.design/guide/pastel-gradients) covers the whole family, and [lavender gradients](https://gradiently.design/guide/lavender-gradient) leans further towards purple.

## Orchid and magenta gradients

Turn saturation up and the pair becomes glamorous. This is the territory of nail polish, festival wristbands and album covers. Use a slight angle or a radial glow rather than a flat diagonal, and leave a calmer area for words.

- Hot pink to violet: `linear-gradient(135deg, #ec4899 0%, #c026d3 50%, #9333ea 100%)`
- Orchid bloom: `radial-gradient(circle at 70% 30%, #f0abfc 0%, #c026d3 45%, #6b21a8 100%)`
- Berry glamour: `linear-gradient(160deg, #db2777 0%, #a21caf 60%, #581c87 100%)`
- Iridescent swirl: `conic-gradient(from 90deg at 40% 60%, #f472b6, #a855f7, #e879f9, #f472b6)`

Saturated pink and purple gradients. The conic one reads as a shimmer, close to [holographic gradients](https://gradiently.design/guide/holographic-gradients).

## Dusk: dark pink and purple gradients

Take the pair dark and it grows up instantly. A plum black ground with raspberry and violet light reads like the sky twenty minutes after sunset, or a cocktail bar with low lighting. These are the most versatile of the set and carry white or pale pink text easily.

- Twenty past sunset: `linear-gradient(180deg, #1e0b2e 0%, #581c87 50%, #be185d 100%)`
- Raspberry glow: `radial-gradient(circle at 80% 85%, #db2777 0%, #4a044e 40%, #12041a 80%)`
- Plum to rose: `linear-gradient(135deg, #2e0a2f 0%, #6b21a8 55%, #f472b6 100%)`
- Violet stage light: `radial-gradient(ellipse at 50% 0%, #a855f7 0%, #3b0764 45%, #0c0414 85%)`

Dark pink and purple gradients. Add a fine grain, because dark blends band first.

These sit close to [sunset gradients](https://gradiently.design/guide/sunset-gradient) and [galaxy gradients](https://gradiently.design/guide/galaxy-gradient), and you can borrow freely from either.

## Adding a third colour without muddying it

The standard hot pink to violet diagonal is everywhere, so one extra colour is the quickest way to make it yours. Choose a colour that neighbours either pink or purple: orange and coral sit beside pink, blue and indigo beside purple. Green sits opposite magenta, which is why pink into green goes grey in the middle.

- Violet, pink, tangerine: `linear-gradient(120deg, #7c3aed 0%, #ec4899 55%, #fb923c 100%)`
- Blue hour: `linear-gradient(160deg, #1e3a8a 0%, #7e22ce 50%, #f472b6 100%)`
- Magenta with gold: `radial-gradient(circle at 85% 15%, #fcd34d 0%, #a21caf 35%, #2e0a2f 80%)`

Three pink and purple gradients with a neighbouring third colour. Every step stays saturated.

## How to choose a pink and purple gradient for your brand

1. **Decide light or dark first** Most of the mood comes from lightness. A pale blend says gentle; a plum ground says evening. Pick one and keep it for every post.
2. **Choose which colour leads** Pink leading feels warmer and more playful. Purple leading feels cooler and more mysterious. Give the leader roughly two thirds of the surface.
3. **Plan where the words sit** Put the headline over the darker, calmer end and the brightest pink in a corner, so you never fight the background for attention.
4. **Test it at every size** A blend that works on a square post can drop its brightest area behind the text on a story. Check post, story and banner before you commit.

If you post often, write the result down as a short recipe: ground, lead colour, accent, where the light sits. That one line keeps a whole feed consistent, which matters more than any single beautiful gradient. [Brand consistency](https://gradiently.design/guide/brand-consistency) goes further.

## Text colours on pink and purple

Bright pink is lighter than it looks, so white headlines on hot pink are weaker than people expect. Violet and magenta carry white well. On the pale end, a deep plum is the ink that keeps the design in one family. Ratios are WCAG contrast; aim for 4.5:1 for small text and 3:1 at minimum for large headlines. [Colour contrast and accessibility](https://gradiently.design/guide/color-contrast-accessibility) explains the thresholds.

| Background | Text | Contrast | Verdict |
| --- | --- | --- | --- |
| Hot pink `#ec4899` | White | 3.5:1 | Large headlines only |
| Deep pink `#db2777` | White | 4.6:1 | Good |
| Magenta `#c026d3` | White | 4.7:1 | Good |
| Violet `#9333ea` | White | 5.4:1 | Good |
| Bubblegum `#f9a8d4` | Plum ink `#3b0a3f` | 8.9:1 | Excellent |
| Plum ink `#2e0a2f` | Bubblegum `#f9a8d4` | 9.6:1 | Excellent, pink as ink |

Measure behind each line of text, at the lightest point of the gradient.

A portrait nail salon post with white lettering on a saturated pink and violet gradient

A nail salon post on saturated orchid, white type on the violet side.

A vertical club night story with pale pink lettering on a dark plum gradient lit with raspberry at the bottom

A club night story on dusk plum with raspberry light low in the frame.

## Pink and purple gradient CSS

```css
.dusk {
  background-color: #1e0b2e;
  background-image:
    radial-gradient(circle at 80% 85%, #db2777 0%, transparent 45%),
    linear-gradient(180deg in oklch, #1e0b2e 0%, #581c87 100%);
  color: #fce7f3;
}

.headline-gradient {
  background: linear-gradient(90deg, #ec4899, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```

A dusk section with a raspberry glow, and a pink to violet headline using clipped background text.

Gradient text is striking but use it for short display words only, never body copy. [CSS gradient text](https://gradiently.design/guide/css-gradient-text) covers the fallbacks. If you want a pink and purple look that nobody else can publish, Gradiently's Market lets you search Marks by colour words such as "orchid". Each Mark is one of a kind, and once you claim it only you can export with it; it also keeps type readable across both ends of the blend by itself.

## FAQ

### What is a good pink and purple gradient code?

A classic is `linear-gradient(135deg, #ec4899 0%, #c026d3 50%, #9333ea 100%)`. For something moodier, try `linear-gradient(180deg, #1e0b2e 0%, #581c87 50%, #be185d 100%)`.

### Do pink and purple go together?

Yes. They are neighbours on the colour wheel, with magenta between them, so they blend cleanly at any lightness.

### What colour text goes on a pink and purple gradient?

White reads well on magenta, violet and dark plum. On hot pink use white only for large headlines, and on pale pink or lilac use a deep plum such as `#3b0a3f`.

### How do I make a pink and purple gradient look less childish?

Go darker or more saturated, use a plum ground, and add a grown up third colour such as gold or deep blue in a small area.

### What colour is between pink and purple?

Magenta, around `#c026d3`, with orchid as its lighter version.