Color and web design
Color is all around us. It is such a big part of our lives, that we take it for granted. However, even if we don’t realize it, color has a huge influence on our emotions and our behavior. Same with web design. If you choose your colors right, you’ll get a result that is more appealing to the eye, and a greater influence on what you want the visitor to experience.
First for the technical part. If we take the computer screen as our reference (and we have to, after all, it is “color and web design”), there are the three basic colors from which a pixel is formed: red, green and blue. Every other color consists of a mix between these three.
But what exactly do colors mean? Color symbolism can vary from culture to culture, or even from one person to another, and you may want to consider that if your design addresses a more specific target group. In general however, colors suggest about the same thing to the majority of people. Below is a table taken from an article about color symbolism from Wikipedia with positive and negative connotations of some basic colors.
|
Color |
Positives |
Negatives |
|---|---|---|
| Gray | Elegance, humility, respect, reverence, stability, subtlety, timelessness, wisdom | Anachronism, boredom, decay, decrepitude, dullness, dust, pollution, urban sprawl |
| White | Reverence, purity, snow, peace, innocence, cleanliness, simplicity, security, humility, marriage, sterility, winter | Coldness, sterility, clinicism, surrender, cowardice, fearfulness, winter, unimaginative |
| Black | Modernity, power, sophistication, formality, elegance, wealth, mystery, style | Evil, death, fear, anonymity, anger, sadness, remorse, mourning, unhappiness, mystery |
| Red | Passion, strength, energy, fire, love, sex, excitement, speed, heat, leadership, masculinity, power | Danger, fire, gaudiness, blood, war, anger, revolution, radicalism, aggression, stop |
| Blue | Seas, skies, peace, unity, harmony, tranquility, calmness, coolness, confidence, water, ice, loyalty, conservatism, dependability, cleanliness, technology, winter | Depression, coldness, conservatism, idealism, obscenity, ice, tackiness, winter |
| Green | Nature, spring, fertility, youth, environment, wealth, money (US), good luck, vigor, generosity, go, grass | Aggression, inexperience, envy, misfortune, jealousy, money, illness, greed |
| Yellow | Sunlight, joy, happiness, optimism, liberalism, idealism, wealth (gold), summer, hope, air | Cowardice, illness (quarantine), hazards, dishonesty, liberalism, avarice, sissification, weakness, greed |
| Purple | Sensuality, spirituality, creativity, wealth, royalty, nobility, ceremony, mystery, wisdom, enlightenment | Arrogance, flamboyance, gaudiness, mourning, profanity, exaggeration, confusion |
| Orange | Buddhism, energy, balance, heat, fire, enthusiasm, flamboyance, playfulness | Aggression, arrogance, flamboyance, gaudiness, over emotion, warning, danger, fire |
| Brown | Calm, depth, natural organisms, nature, richness, rusticism, stability, tradition | Anachronism, boorishness, dirt, dullness, filth, heaviness, poverty, roughness |
So, by knowing what you want your design to “feel like”, you can choose an appropriate color to complement it. For more information on color psychology and symbolism, do a web search using these keywords and you will find a lot more useful articles.
Now that we know what colors mean, let’s look at some tips on using them in your design:
Use a high enough contrast between the foreground and the background colors, especially for the main content, to make it easier to read. Avoid “gray on gray” situations, similar colors with very little difference between them. Use bright saturated colors to attract attention. But don’t overdo it, as it will have the opposite effect. Don’t use a lot of colors, because it can get confusing. Instead, use one, two or three main colors and lightness variations on them. Keep consistency between the colors you choose. A good way to vary them is to use complementary colors. Don’t use color combinations like blue on red, red on green, etc., because they hurt the eye and are almost impossible to read. Always view your design in every browser that you can get access to. This has less to do with color and more with how each browser renders the same web page (another whole topic which I’m not going to open here), but it’s very important.
One more thing that you should consider. When using different colors, keep in mind that some people (about 15%) suffer from some kind of color related disability. So what you might see as green on red, for example, someone with deuteranopia (daltonism) will see as one single color. Use the tool below to make sure that doesn’t happen.
And finally, no amount of theory is worth anything if you don’t put it into practice. So, for something more practical, here’s an excellent tool I’ve found
http://wellstyled.com/tools/colorscheme2/index-en.html.
You can use it to build color palettes through different methods, and it even has an option to view it as through the eyes of someone with a disability.
Well, I hope this article has helped you in some way. I wish you trouble-free designing.
Download Design
August 31st, 2006 at 1:05 am
I feel very strongly about colour, and it’s uses on websites, and I find it’s a very over-looked area when it comes to web design.
Many designers don’t really there are simple checks you can perform to make sure that you aren’t doing something that is going to affect people with colour related disabilities as you mention.
Even the W3C have guidelines as to the use of contrasting colours and there are tools available which can give designers a good starting point.
As I use Firefox for most of my initial design, I use the following extension which allows me to see the results easily:
http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php
Good article, and on one of my favourite subjects!
September 9th, 2006 at 10:33 am
Outstanding article. I utilize ColorImpact when I design from http://www.tigercolor.com/