How does Color Theory work for web design?

[ali0020]

Hi everyone, I was wondering if anyone has an awesome resource on learning about applying color theory to web design. I read alot of sites about how certain colors represents coolness, control or to stir up emotions. That's great, but sites are generally more than one color.... I know that I should keep contrast for readability, but's really it. Then there's complementary and tertiary colors on the color which I also cannot seem to understand or apply. Any help?

I'm surprised there's no paid book on amazon or the net that really goes indepth about or maybe I didn't look enough. I'll still keep trying.

Thanks.

[logic_earth]

Color theory is no different on the web as it is for paintings.
Thus anything on color theory is valid.

[elbot]

It's like making music you have to do what you think is right, your design should however be readable, use the rule of third theory, 1st, 2nd, 3rd etc and make your 1st have more contrast than your 3rd. Do not use too many colours, keep your colour palette to a minimum again - rule of 3rd - no more than 3 colours in your palette, you can play with the brightness or saturation of a colour to create variation in your designs. Use complimentary, triads etc to harmonise your palette. It's not an easy subject you have to just do what you think is right.

[Stevie D]

I came across a good article a while ago, but I can't find it now ... I'll check on my computer at home this evening to see if I have saved it.

In essence, it said that a good way to pick a colour combination was to get a photo of something, particularly something natural, and pick out the key colours from that. This will often (although not always!) give you a selection of colours that work harmoniously together, and then you can play around with saturation and brightness levels as needed. The key point was that the photo doesn't need to be in any way related to the subject matter of the website.

[Stevie D]

I came across a good article a while ago, but I can't find it now ... I'll check on my computer at home this evening to see if I have saved it.

OK, one of the articles is The beautiful colors of the band of cats.

There is another good example at trishacupra.com.

[TehYoyo]

I'd recommend the book The Principles of Beautiful Web Design by Jason Beaird. A fantastic book, with a portion of it devoted to specifically color theory. I know that it tells exactly what emotions and connotations go along with it. Not only for color theory, but for an introduction into Web Design and just design in general, it's absolutely wonderful.

Highly recommended.
~TehYoyo

[JackWebdale]

Usually when you start a Web design your root of colour will be the brand (logo at a minimum). With this as a starting point it's fairly easy to experiment with complimentary or contrasting colours with tools like: http://colorschemedesigner.com/ and http://kuler.adobe.com/. That's not the end of course as it entirely matters how you use the colours, both in amounts, contrast, lightness, saturdation etc. But starting with some hue's that work (like a poster above me said about picking from nature photography).

As for how colours make people 'feel' - there's some generic feelings that are applied to colours (red - power / blue - open & fresh) though these are very subjective and you can always manipulate them in ways to change those feelings.

[TehYoyo]

As for how colours make people 'feel' - there's some generic feelings that are applied to colours (red - power / blue - open & fresh) though these are very subjective and you can always manipulate them in ways to change those feelings.

I would disagree with that statement. There have been proven studies detailing exactly how colors make people which is why we use certain colors for certain things.

TehYoyo

[JackWebdale]

I would disagree with that statement. There have been proven studies detailing exactly how colors make people which is why we use certain colors for certain things.

TehYoyo

It's not black and white (badum tshhh). There are proven studies of trends regarding colours, but not everyone feels the same about certain colours, certainly not down to an 'exact' set of rules. Those studies are focussed on high exposures to each colour, rather than when they are used harmoniously or complimentary with others.

Take HSBC: http://www.hsbc.co.uk/1/2/
And Barcleys: http://www.barclays.co.uk/PersonalBa...P1242557947640

Would you say HSBC felt more powerful or passionate?
and Barcleys more trustworty or intelligent?

Not really. They are both global banks doing the same thing.

[kohoutek]

As for how colours make people 'feel' - there's some generic feelings that are applied to colours (red - power / blue - open & fresh) though these are very subjective and you can always manipulate them in ways to change those feelings.

Yep, and I'd like to extend that statement and add the socio-cultural aspect as something to consider as well. Every culture uses color differently and each color has distinct meaning. An example I like to bring up when this question arises are sales. When something's on sale here, the price tags have a red, orange, or yellow(ish) background, thus these colors are often associated with "cheap" here, in Germany. One of the most popular book publishers here, called Reklam, have a series of books for students, all literature classics for which you normally would shell out at least 20 USD, you get for 1.50 USD. These books all have a yellow cover.

As a consequence, using bright shades of red, orange, or yellow as the primary color on a German shopping site for a German audience, more than a few people will associate these products being either cheap in terms of quality, or reduced in price.

Leslie Cabarga has a great, albeit somewhat brief introduction to global colors and their meaning. It's really good.

[phillipturner]

Using the right color palette is very essential for any designers before starting a web designing.
The two main reason why Color theory was invented are :-
1) Communication of colors &
2) Application of colors.
I strongly recommend to go through this websites and you'll definitely learn something new & interesting in detail i.e. http://www.smashingmagazine.com/2010...ning-of-color/ & http://www.colorzilla.com/firefox/.
Hope this will help you.