Why is it that this color gradient is so much more attractive than others?

I’ve been playing around with some gradients on a site I’m developing, and I’m really interested in the psychology or other meaning behind why certain colors appear more attractive than others.

Here’s the site right now:

Original Site Log-in
Original site main hub

The gradients there look quite natural to the design. But if I start mixing and matching, I end up with this:

Different gradient attempt
Different gradient attempt
Different gradient attempt

I can’t seem to find another decent gradient that looks “natural”. I’m wondering what the psychology is behind how we perceive these mixes of colors… is there some kind of rule to find colors that go well together in a gradient? I imagine it depends on the kind of feel you’re going for. I appreciate any and all input!


The main difference between the initial example and your experiments is that the original does not cover nearly as drastic a change in hue.

Colour wheel of saturated hues

Going from golden-yellow to magenta/pink is about a 1/6 turn on the colour wheel. In contrast, your experiments (orange-red to blue-violet, blue-violet to yellow-green, and cyan to blue-violet) are all more than 1/4 turn.

That much change isn’t perceived as a single shift in a colour, but rather as a progression through multiple colours. Because your gradient is rather condensed in your headers, that comes off as quite a sharp change and may explain why it doesn’t feel “natural” to you.

If you want to have a different colour for your main “destination” colour blocks, pick a neighbouring colour for the start of the gradient. E.g., for blue-violet as the endpoint, pick a deep blue or a magenta for the starting point. For yellow-green as the endpoint, start with bright green or red.

Of course, these will still give you different “moods” depending on the mood of the colours involved — the blue-violet is a much cooler, calmer colour than the pink in the original. But at least the gradients should look a little smoother.

Source : Link , Question Author : Hayden McAfee , Answer Author : AmeliaBR

Leave a Comment