Yellow & Purple Gradients

About yellow & purple gradients

Yellow and purple come from opposite sides of the colour wheel, so this is a contrast pairing rather than a blend: brightness and optimism against creativity and a premium feel. The contrast is the point — it is what makes these gradients stop the eye — but it has a cost: mixed in plain sRGB, the midpoint between two distant hues turns grey and muddy.

There are two fixes, both plain CSS. Add a third stop in a hue that sits between them, or let the browser mix in a perceptual colour space: linear-gradient(in oklch 225deg, #FACC15, #8B5CF6) keeps the middle bright in current browsers. The most common angle across these 8 gradients is 225°.

Start a yellow & purple gradient in the generator, or see every yellow and purple gradient on its own.