Blue purple gradient: 20 codes that blend cleanly

A blue purple gradient runs between neighbouring hues on the colour wheel: blue #3b82f6, indigo #4f46e5, violet #7c3aed and the soft periwinkles and lavenders around them. Because the hues sit side by side, the blend stays clean almost automatically. The harder part is making one that doesn't look like the thousands of app icons and conference slides that already use one. Below are twenty codes in four moods, the cases where the blend does go dull, and the text colours that read on each.

Why blue and purple blend so well

Purple is blue with some red in it. Walk from one to the other and every step in between is a real, saturated colour: blue, indigo, violet. Compare that with blending blue into orange, where the halfway point is a flat grey. Analogous colours explains the principle, and the colour wheel shows where each hue sits.

Dark blue purple gradients: night and depth

Start dark and the gradient instantly looks less generic. A midnight ground with indigo and violet light feels like a night sky, a concert hall or a premium app. These five carry light text beautifully.

Soft blue purple gradients: periwinkle and lavender

Lighten the family and it turns calm, dreamy and a little nostalgic. These suit wellness, sleep, stationery and anything aimed at a gentle mood. Keep the ink dark; white disappears on most of them. There are more in pastel gradients.

Electric blue purple gradients

Push saturation up and the pair becomes loud, synthetic and very digital. These suit gaming, music, tech launches and anything nocturnal. Use them in bands or glows rather than across a whole poster, and pair with near black so they have something to glow against. Neon gradients has the full technique.

Blue purple gradients with a third colour

The fastest way to make a blue purple gradient your own is one extra colour used sparingly. Pink takes it towards dusk, teal towards aurora, gold towards luxury and peach towards a soft sunrise.

When a blue purple gradient goes muddy

Blue to violet is safe. Two related blends are not. Cyan into pink crosses a lot of the wheel, and dull, greyish blues into dull purples give a lifeless middle. In both cases the fix is the same: interpolate in OKLCH, which keeps brightness and saturation even across the blend. Muddy gradients and gradient interpolation go deeper.

/* Default sRGB blend: can dull in the middle */
.card--srgb {
  background: linear-gradient(90deg, #06b6d4, #ec4899);
}

/* OKLCH blend: stays bright, passes through violet */
.card--oklch {
  background: linear-gradient(90deg in oklch, #06b6d4, #ec4899);
}

/* A safe blue purple hero with a fallback */
.hero {
  background-color: #1e1b4b;
  background-image: linear-gradient(160deg in oklch, #0f0a2e, #4f46e5 60%, #7c3aed);
  color: #eef2ff;
}

How to make a blue purple gradient look less generic

The violet to blue diagonal is so familiar that people read it as a default before they read anything you wrote on it. You don't need exotic colours to avoid that. Small, deliberate decisions are enough, and they compound.

• Choose a ground first. A midnight or paper ground sets the mood more than the blue or purple does, and immediately separates you from the bright default.
• Move the light off the diagonal. Put the brightest violet in one corner with a radial gradient instead of running it edge to edge at 135 degrees.
• Use uneven stops. Let indigo hold 60 per cent of the surface and violet only the last stretch. Equal thirds look machine made.
• Add one accent in one place. A sliver of pink, teal or gold, as in the set above, is remembered far more than the base colours.
• Finish with grain. A fine noise layer hides banding and turns a screen blend into a surface; grainy gradients has the code.
• Render each size separately. The light should land somewhere sensible on a story and on a banner, not wherever a crop leaves it.

Mood names help as well. "Midnight indigo with a gold edge" is a decision you can repeat across a whole year of posts; "blue purple gradient" is not.

Text on a blue purple gradient

When words cross from the dark end to the light end of the same gradient, no single ink works everywhere. Text on a gradient covers the options. In Gradiently, Auto ink handles this per line, choosing light or dark type from the Mark's own palette, so a blue purple background never swallows a headline.