December 21, 2011

An Introduction to Color Theory and Web Design

Color Theory, or in our case Color Psychology, is a field dedicated to unraveling the relationships between pure colors and their meaning to us. Its use has become widely spread throughout the design industry in everything ranging from photography to web design. If you’ve ever noticed how fast food restaurants are almost always red and yellow themed then you’ve begun to notice some color theory at work. Although you don’t need to be a color theory professional to design a web page correctly; knowing some of the basics is sure to help.

The first “rule” of color theory is that there aren’t any absolutes in term of color relationships. The emotions associated with any particular color or combination is subjective. While typical Westerners will think of white as a symbol of purity or innocence, it can also be perceived as a color for mourning in many Eastern countries.

When considering your web page’s color scheme and layout, it’s often best to consider what kind of feeling you wish to create from your audience. Do you want them to feel calm and secure, excited and energetic, confident, trusting, etc.? Determining which of these attributes you wish your website to exude is the first step in laying out your color pallet.

The “Big 4” Groups

Cool Colors – Blue, Green, White, Grey

Cool colors tend to have a calming effect and set off a tone of relaxation most often. Obviously not a website related example, but if you walk into a spa you’re most likely to see these colors because of the calming connotation they carry. Blue, in its various shades, is used very often as a color for corporations trying to relax a customer and make them feel at ease about the company at hand. Blue can also send a message of confidence depending on the vibrancy of it. If you were looking to associate your website’s feel with a vibrant, young, youthful premise then you might use a brighter blue. However, for an older, experienced feel you might consider using either a pale blue or a dark blue. Case and point from the 2008 election. Mr. Obama’s blue was used as a message to say that his campaign and consequently he himself are vibrant and full of change. Mr. McCain’s blue was chosen as a dark blue to say to voters that he is the time tested, experienced candidate that is capable of the job.

Warm Colors – Red, Pink, Orange, Yellow

The counterpart of cool colors, the warm variety, is usually used to excite a particular emotion or rouse a response. Most often a use of red is meant to draw your attention to a particular point that is trying to be made in plain sight, such as a discount or special sale. Because red easily overpowers cool colors, on the whole it isn’t used very widely in web design. A great example of the use of red is found at chromebagstore.com. It is the only color on the page and it is used specifically to create a sense of vibrancy for their product and direct your attention to particular areas on the site.

Mixed Warm and Cools – Purple, some Greens, Lavender, Turquoise

Mixed Warm and Cools can be the hardest colors to implement because their feeling is particularly ambiguous most of the time unless used in conjunction with other colors to solidify their meaning. These colors can easily take on the role of excitation of relaxation and it’s mostly dependent on the amount of colors that go into the mix. If for example a green had much more blue in it than yellow, as a forest green, this would be a good color to use both on a website that wanted a “natural” feel and to varying degrees for use in a calming setting. Its counterpart, a more yellow tinted green like “neon green” is explicitly an excitation type of color. Unfortunately, it rarely shows up in web design because as you move towards the yellow end of this color combination it becomes harder and harder to look at such a vibrant color on the screen.

Neutrals – White, Black, Brown, Beige, Ivory, Grey

If the previous three sets of colors are used to set various moods, the neutrals are the colors that pull the whole package together. Neutrals are best used as a unifying color to tie your entire color palette together and the majority of your site will be set in neutrals. In street terms it is simply annoying to look at a site splashed with color everywhere, but in all reality it is annoying because there is too much information being given to a user when too many colors populate a page. Some times, such is the case with Apple’s site; no colors are used in the layout of the site itself. This choice is coherent with their product’s zen-like minimalist aesthetic and makes for a consistent company image; however that is a topic for another time.

In practical terms, white, ivory and grey are often used to dictate the majority of web layouts because we are most familiar with reading black text on a white background. Some particular schools of thought suggest using grey text instead of black on white to break the contrast between the two and make the text softer on the eyes. Either way, this is more a product of our upbringing rather than explicit color theory itself.

What to choose?

While this article has attempted to give you an introduction to color theory, it is certainly not an end all be all of articles on the topic. Colors being as subjective as they are will evoke emotions from various crowds in ways you might not have imagined. When in doubt about the color palette you want to choose for your website, it’s not a bad idea to check out other websites that you like the color of and modify on a “theme” from there.

=
About the Author: Jesse Funk is a long-time artist, designer, teacher and student of many things art. He currently is working on helping people design websites with a video series found at www.scholastechinstitute.com