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

Question

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:

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

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!

Answer 1

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

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.

Answer 2

Since you are asking "why are they perceived differently", here is another (very geeky) thing to consider: the perceived luminescence of an RGB colour. This is hard to apply, so take my answer almost just as trivia : )

The luminescence value of a colour of indicates how "lit up" you perceive it. If the colour would be a light bulb, a colour with low luminescence would be perceived as dim (40W bulb), while a colour with high luminescence would be perceived as very bright (100W bulb).

RGB colours are in fact displayed using little "light bulbs". The screens are made up of tiny "light bulbs", three for each pixel: R(ed), G(reen) and B(lue). The specific R, G ad B values of a colour indicate how bright each tiny light bulb should be lit up to create the illusion of that colour. For example the colour orange RGB(255, 100, 0) is created by turning the red bulb to its maximum potency (255), making the green bulb semi-dim (100) and turning off the blue bulb (0).

Here is an illustration showing some colours and how "bright" each of the RGB components should be made to create the illusion of the colour. The little dots under each the colour indicate how dim or bright the component is made.

As you can see in the illustration, to create white, for example, you turn the 3 components to the maximum (255). This combination of the 3 tiny "light bulbs" gets perceived by the eye as white (explaining why would be a big digression). To create black, you turn all of them off. That is easy: no light no colour.

The luminescence of each colour is calculated by adding "how bright" each of the 3 components are. White would be the colour with highest luminescence, since the 3 components are turned to its maximum value. Black, would be the one with the lowest. Yellow would have a highest luminescence than green since to make yellow you need 2 components to its max but to make green you only need one. So, more or less you could say that

L = R + G + B

It is a bit more complicated though. By looking at the illustration you will notice that the green component seems to be brighter. It is, in fact, perceived by the eye as the brightest one. Blue, on the other side, is perceived as very dim. The exact formula to calculate luminescence takes that into account.

L = 0.2126 R + 0.7152 G + 0.0722 B

Here is the illustration again, with the calculated luminescence for each colour.

You will notice that, as your eye could have told you, yellow is more luminous than orange but orange is more or less as luminous as magenta.

Now, I have taken the colours from two of your original palettes and calculated their luminescence.

In the first case, the one you like, you will notice that the luminescence of the first colour, at the bottom is lower (125) than the one of the second colour, at the top (200). The gradient, then, gets perceived as an increase in luminosity, as if it would be lighting up.

In the second case, there is no much difference, so the gradient gets perceived just as a change in hue.

In the third case, the bottom colour has a higher luminescence than the top one, so the gradient gets perceived as a decrease in luminosity, as if it would be dimming.

This would explain why, even when you select 2 hues that are placed relatively the same distance from each other on the colour wheel than the ones you like, the result would be perceived differently.

Answer 3

Just adding to AmeliaBR's answer (should be a comment, but I want to post an image). One way of trying "shifting" your hue but keeping the same relative distance between starting and ending colours could be using Photoshop's hue tool.

Take the first image (the one with the gradient you like) and open it in Photoshop. Then open the Hue/Saturation tool (Image->Adjustment->Hue Saturation or Ctr+U) and play with the first slider (Hue). This will shift the hue of the whole image but keep the same relationship between all the existing hues (in particular the starting and the ending hue of your gradients). Since the back of your interface is black (or neutral gray) the shift in hue will not affect it.

If you find a combination you like, then just accept the Hue/Saturation changes (click OK) and using the eyedropper tool (press I) pick the starting and ending colours of the gradient.

In this example I have shifted the hue -155 and the gradient now goes from the (ever trendy) Aquamarine Green to Blue, which is a cool, calming gradient with nautical echoes.

Mind you, colour perception has a very personal component. What you might find "natural" for some other person might be perceived as an aberration.

Answer 4

From http://www.colormatters.com/color-and-design/basic-color-theory

1 - A color scheme based on analogous colors

Analogous colors are any three colors which are side by side on a 12 part color wheel, such as yellow-green, yellow, and yellow-orange. Usually one of the three colors predominates.

2 - A color scheme based on complementary colors

Complementary colors are any two colors which are directly opposite each other, such as red and green and red-purple and yellow-green. In the illustration above, there are several variations of yellow-green in the leaves and several variations of red-purple in the orchid. These opposing colors create maximum contrast and maximum stability.

3 - A color scheme based on nature

Nature provides a perfect departure point for color harmony. In the illustration above, red yellow and green create a harmonious design, regardless of whether this combination fits into a technical formula for color harmony.