Pink and purple gradient codes, from candy to dusk

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

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.

For more of this softness, pastel gradients covers the whole family, and lavender gradients 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.

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.

These sit close to sunset gradients and galaxy gradients, 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.

How to choose a pink and purple gradient for your brand

1. 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. 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. 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. 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 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 explains the thresholds.

Pink and purple gradient 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;
}

Gradient text is striking but use it for short display words only, never body copy. 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.