Color Theory 101: Creating the “Mood” of Your Website

Design frequently gets the short end of the stick in the website building world – whether due to new webmasters who simply pick the colors they like the most or due to more experienced builders who emphasize function over form.  However, the colors you select for your site may be just as important as your navigation structures or content development, so pay special attention to the colors you select and the moods they create on your site.

First though, let’s cover a little background information on what color theory is and how you can use specific color formulas to select the best color combinations for your website.

Color theory is the system of grouping colors according to a logical structure.  The most widely known color theory structure is the color wheel, which was first developed by Sir Isaac Newton in 1666:

At its base, the color wheel is built around primary, secondary and tertiary colors:

• Primary colors – including red, yellow and blue – are those that can’t be created by mixing any other paints or pigments.  All other colors are created from these base hues, but they themselves cannot be derived from other combinations.
• The secondary colors include orange, green and purple, and are formed by mixing two of the primary colors.  Orange results from a combination of red and yellow, green comes from a mix of yellow and blue, and red and blue come together to form purple.
• Finally, the tertiary colors represent the mixings between primary and secondary colors and include red-orange, yellow-orange, yellow-green, blue-green, red-purple and blue-purple.  These color combinations play an important role in bringing a cohesive design strategy together.

From these color classifications, web designers can make use of a number of different color harmony theories in order to select color pairings that work well together.  An analogous color harmony, for example, makes use of adjacent colors on the color wheel in order to create a pleasing design.  Based on the tertiary color wheel above, yellow, yellow-green and green could all form the basis of a successful color scheme, as could a combination of blue, blue-green and green.

Alternatively, a color palette of complimentary colors can be a good choice for a website as well.  Complimentary colors refer to those that sit directly across from one another on the color wheel – for example, red and green, yellow and purple and blue and orange as in the secondary color wheel above.  Combining these two theories can be a great way to form the basis of a website’s color palette as well, if you consider utilizing the complimentary color across from the analogous color grouping as an accent color on your site.

But while this basic color theory provides a starting point for driving your decisions on website color selection, it’s also important to consider the “mood” created by each color.  It may sound a little “New Age”, but colors themselves affect the way we feel or think, with specific colors creating different emotions amongst viewers.

According to Leslie Harrington of The Color Association of The United States:

“We react on multiple levels of association with colors — there are social or culture levels as well as personal relationships with particular colors.  You also have an innate reaction to color. For example, when you look at red, it does increase your heart rate. It is a stimulating color. This goes back to caveman days of fire and danger and alarm.”

Being aware of these emotional associations with color is incredibly important, as selecting the wrong color combinations for your site could result in your meaning or content being misconstrued.  For example, in the case above, Harrington states that red is a stimulating color.  For this reason, you can imagine that it’d be out of place on a spa or massage services website, where visitors are seeking a relaxing, therapeutic experience.

The following are some of the typical feelings associated with common colors:

Red – As discussed above, red is an energy color that we associate with movement, excitement and important things.  There’s a reason ambulances, fire trucks and other emergency vehicles make heavy use of this color – it’s attention-grabbing and powerful when used correctly.  On websites, it’s best not to base a design around the color red (which can be too distracting from the information you’re trying to share), but to use it as an accent color to highlight buttons or important pieces of text instead.

Orange – Like red, orange is a high energy color.  It’s flamboyant, fun and exciting, which makes it a great color to use to draw attention to specific elements of your site.  But although it’s great as an accent color, orange isn’t used widely as a base color in website design, as many monitors have trouble displaying this powerful hue correctly and consistently across different browser platforms.

Yellow – In small doses, the color yellow brings out laughter and feelings of happiness and optimism.  In fact, the brain actually produces more serotonin when surrounded by this color, providing a chemical basis for the feelings of happiness this color evokes.  However, like red and orange, this color is best used sparingly.  When overpowering, the color yellow can evoke flames and an intensity that’s overwhelming for viewers.

Green – Green is a very powerful color to use in web design, as it’s associated with nature, peace, harmony, growth, nurturing, generosity and fertility.  The color green is commonly used on financial websites and other advice-based pages as it evokes a sense of mastery and assurance – both of which can be incredibly important associations to create when branding oneself as an authority in a given field.

Blue – Traditionally, blue is a calm, restorative color (although be cautious, as blue-gray shades can make a site feel cold and uncaring).  The color blue is found frequently throughout the natural environment, which makes it evoke a general sense of well-being and restfulness.  Use these properties to your advantage by incorporating blue hues when you want your readers to feel settled and comfortable on your site.

Purple – Purple is an interesting one.  Traditionally associated with wealth and prosperity (drawing from its frequent use in the garments of past royal families), it can actually evoke feelings of artificiality or “putting on airs” when used to excess.  As with red, orange and yellow, use true purple as an accent color, or blend it with blue to mitigate these effects before using it as a background color.

White – White (technically the compression of all colors) is incredibly important in web design, as – apart from any emotional implications – it provides a much-needed rest for readers’ eyes when used in conjunction with other color or text elements.  On its own, it creates a sense of purity and cleanliness, although be aware that it’s associated with mourning in some areas of the world.

Black – Black is an incredibly powerful color to use on your site, as it represents strength, stability, authority and power.  As such, “all black” websites can be overpowering and dark, making this color (again, technically the absence of all colors) best used for accents, text and other structural elements on your site.

Of course, it’s important to remember that these common color associations represent only a starting point for your color selections, as their emotional impacts may be altered when used side-by-side or mixed together.  However, they can provide an important starting point for your design considerations, where it’s important to consider the ideal mood and mindset you’d like to evoke in your reader.

Image: christianocious