8: Colour Theory

What colors to include on your web site is a very important design decision for you to make. What mood do you want to convey with your web site, and how do you ensure that color choices make your content easier to access, not harder? In this article Linda Goin takes you through basic color theory, including typical color schemes.

( Read the article )

I don't like this article because describe the world of colors in an old and not so good way.

I think was better to describe the RGB (red, green, blue) code that is the real eye code and web too (#FF0000, #00FF00, #0000FF).

Ciao, Igor

It is a background error.
Primary colors are not #ff0000, #ffff00, and #0033cc but are #FF0000, #00FF00, #0000FF and secondary are #00FFFF, #FF00FF and #FFFF00.
The second one is more usefull to remember and is the right color perception of the eye and how the world (including computers) work. Printers basis is soctractive colouring and so they use secondary (ciano, yellow and magenta). Monitors work with additive colouring and so they use primary (red, green and blu).
This #ff0000, #ffff00, and #0033cc are the old artistic colors used by artists to painting but are not correct; are based on a tecnical problem to get material primary colors so they used them that are colors similar to ciano (blu), yellow (a darker yellow) and magenta (red). This is the pictorical color theory but is not the right and so now (and expecially for web) have to be teached the real color theory based on RGB.

This is a really good article to read: http://en.wikipedia.org/wiki/RGB

Sorry but is difficult for me talk about it in english.

Ciao, Igor

Edit: See this too:
http://webvision.med.utah.edu/ (expecially http://webvision.med.utah.edu/photo2.html#cones )

Post edited Wednesday, 9. July 2008, 09:25:20

Hello Igor - this is Linda. I'm sorry if you found the article lacking...You're correct in that some of the primaries have been designated with certain hex colors, and you are even more perceptive in that the colors that I use are those that often are used in subtractive color situations. I began my career as a painter, and I'm much more comfortable within the subtractive arena. With that said, I have also learned that my experience has helped many people understand color theory (both additive and subtractive) in ways where they couldn't grasp by using just additive theories alone.

This is the difficulty - the difference between subtractive and additive colors. I agree with your objections wholeheartedly. However, for this series of articles I did not have the time, room or inclination to fully explain color theory from both angles. I specifically did not go deeply into color theory for the Web, as this series of articles had a purpose - to initiate those who had no experience with color theory with some thoughts about how to apply color schemes to their work in real-life situations.

You sound experienced enough with color theory to agree with the fact that it takes years to fully understand and utilize color theory - and even then, new ideas are presented constantly that challenge those original theories. But, in the end, the subtractive color theory is a standard, and one that has provided a basis for all other color theories - even those used in additive color situations. So, I used the method I've always used to explain color theory to beginners - that of understanding historical subtractive color theory and then applying it to additive color situations. Every teacher has different methods, and this is mine.

Thank you for providing yet another link for others to use so they can understand additive color theory in more depth. Thank you further for bringing up a topic that I knew would be addressed eventually - you helped to bring this topic to the forefront immediately!

Cheers!
Linda

Well, is clear your intent but in the article you have never told about the fact you based it on subtractive theory.
And to be clear the subcractive theory today is based on ciano, yellow and magenta; the pictorical old subtractive theory (the basis) was "red yellow and blu" because were the simple material colors.

However, the article is not bad but the color theory in all the web (and the world) is RGB based and hex colors are like this.
The first two values are for red, the second one for green and the two last one for blue.

I think if someone is really interested will read this discussion too and will see more about it.
So, leaveing as it is can be good at the end.

Ciao, Igor

Just a technical note on the number of colours - browsers are not 32-bit, but 24-bit, or 8-bits per red/green/blue channel, which totals 16,777,216 colours. Other than that, I quite liked the article. Very interesting to read the methods behind good colour selection. Thanks.

Keep up the good work Linda, it helped me.

this is a very well written article on color theory. it may be "off by 1", which means that while it is not totally right, it is not totally wrong either. the concepts are all there and they are easily understood. once that is done, learning about other models is not very difficult. i finally understood stuff like monochromatic, triad etc.

I have to agree with Igor. It is confusing to state that green is a secondary and yellow a primary color when in web design practice, working with light instead of dye, this is just not the case.
Although the RGB reality may not be entirely compatible with the RYB story about the color wheel (which is pretty clear) I think it would be better if it were addressed in this web design context.

The Color Scheme Generator II has been renamed the Color Scheme Designer and moved to http://colorschemedesigner.com (there is a redirect page). It still works basically as described in the article and is a great tool.

The "color theory" is kind of the "don't want to think about it"/"don't care about it" old school way of doing it. Color is going to heavily depend on your content; just place one image on your site and voilà all your color generating has turned against you.

* A color theme wheel is not going to care about your eyesight
* A color theme wheel is not going to give a damn about contrast
* A color theme wheel is not going to care what colors your website should use/should not use
* A color theme wheel is not going to care for the composition of your site

Learn to determine the theory/practice behind color with out it, you are better of.

I also have to agree with Igor. While the red-yellow-blue system may be the most familiar to those that have no background in color theory, it is a subtractive color system and therefore irrelevant to the additive color system that is used on the web. What's more, to start with the "wrong" one can be really harmful to students' final understanding of the topic.

Why not start with something like this?

You might be familiar with the red-yellow-blue color system that you learned in school. That system is useful for pigments (like paint or ink) that absorb some colors and reflect the rest. So when mixing two pigments, you have to think about which colors they reflect to understand what color will result.

However, computer monitors emit light, and light mixes differently than pigment. When choosing colors for the web, we don't have to think about which colors get absorbed because we can just tell the computer monitor what colors of light to emit. Monitors use combinations of red, green, and blue (the primary colors of light) to produce any other color.

I think this does a good job of connecting to what people already understand (the red-yellow-blue color system), but immediately explains why it's not relevant to the web. It then goes on to explain that when mixing light, the primary colors are red, green, and blue. And then the discussion can continue in an additive context.

Thoughts?

Originally posted by chrismills:

The Color Scheme Generator II has been renamed the Color Scheme Designer and moved to http://colorschemedesigner.com

The interface has also been changed slightly. The graphic examples should also be changed to match the Color Scheme Designer. According to their website, there was a major redesign on 2009-07-06.