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!

4/10/2014 2:48:00 PM

Accepted Answer

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.

4/10/2014 3:01:00 PM

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.

enter image description here

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.

enter image description here

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.

enter image description here

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.