Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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!

share|improve this question
1  
This is purely a subjective, opinion-based question. Just because you feel some gradients are better, it doesn't mean anyone else will. –  Scott Apr 10 at 15:17
4  
I agree with scott and I will go so far as to answer "Why do they look good?" with "Who says they look good?". But that is subjective. My objective comment is: I guarantee you that you are evaluating the colors within the context of the whole screen that includes the light green window border. This color alone will prejudice you against certain color choices within the viewport. –  horatio Apr 10 at 15:23
    
I think @horatio is spot on about the browser skin colour influencing the way you're perceiving it. I would also like to add that while there are generalisations that can be made about colours, it is very subjective and most of what you can count on as fact is also quite logical. Just one simple example, blue is a colour of trust (amongst many other things) why? Some say it's because most of the world is covered in blue and it's all around us; whilst it can't be proven I like the theory, agree with it and try to use it to my advantage when relevant. –  Mr E. Upvoter Apr 10 at 15:42
    
Very good points on both the browser skin and the blue color. I'd upvote if I had the rep! I'll start looking at these in full-screen mode to prevent that bias. –  Hayden McAfee Apr 10 at 16:20

4 Answers 4

up vote 33 down vote accepted

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.

share|improve this answer
    
I calculated the hue offset for the original two colors, and came out with a value of 96 (out of 360 possible hue values). So about a quarter turn around the color wheel. I started finding other color values with the same difference, and still the values felt strange, albeit more natural. Forgive my unfamiliarity with colors and such, but can you think of any particular reason for this? Perhaps they're just colors of a different mood. i.imgur.com/utU1Oex.png –  Hayden McAfee Apr 10 at 15:14
    
In that case my feeling is that it's not so much about the gradient as about the final colour; the bright green is quite jarring. Compare it to the version in @cockypup's test, which is a much softer (less saturated/bright) green. It's much harder to quantify the moods of colours, but in general less saturated or secondary colours are a little calmer than bright reds and greens. It does get very subjective, but there are lots of resources out there, many with examples of good colour combinations. –  AmeliaBR Apr 10 at 15:46
3  
Here is another thing to consider: contrast. Yellow is the brightest colour, having its max contrast against black. In your 1st example, yellow is only the very top of your gradient. It does not stick out. It "feels" almost like a highlight at the top. It helps move the eye from bottom to top of the gradient. In your third example, yellow is the main colour of the gradient. The body of the gradient sticks out. The top of the gradient, which culturally is read as the max value, feels less important than the body. The eye fights between up and down. This might make it look less natural. –  cockypup Apr 10 at 15:58

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.

share|improve this answer
    
Fantastic response! Thank you for the clear explanation; seems my answer is really the combination of these responses. –  Hayden McAfee Apr 10 at 17:42
    
This is an incredible response. I'm sure this combined with Hayden's response can result in some awesome results. –  Qix Apr 10 at 22:49
    
Great answer, needs more upvotes. –  Ally Apr 11 at 16:30
1  
Note that this is somewhat complicated by display gamma. To get an accurate luminescence value for a display RGB color, you should first apply gamma correction to convert the R/G/B values to a linear color space before averaging them using your formula. For a typical display gamma of 2.2, the correct formula is thus L = ( 0.2126 R^2.2 + 0.7152 G^2.2 + 0.0722 B^2.2 )^(1/2.2). –  Ilmari Karonen Apr 11 at 16:46

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.

share|improve this answer

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.

enter image description here

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

share|improve this answer
    
I see, that's a good way to approach it. Maybe I should take some color theory classes to get a better idea of how certain colors are perceived in general! –  Hayden McAfee Apr 10 at 15:32

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.