Using Color Theory in Web Design

In an earlier post, 5 Dos of Great Blog Design, we discussed the concept behind color theory in the way it pertains to white, or negative, space.

Color theory tells us that different colors work together – or don’t – for specific reasons. (For a more in-depth definition of color theory, check out this article from NYU.)

While you may not think about how color will affect those visiting your blog, during the web design process the designer considers this as a very critical component of creating the perfect web site.

How Color Makes Us Feel

Take a look at this color block:

yellow

How does it make you feel?

And how about this block:

blue

Did you feel differently when looking at example A than you did when you viewed example B?

If so, it’s no surprise.

Yellow is electric, energizing.

Light blue is calming.

Color matters. Even the shade used will make a difference. A softer shade of blue evokes calming feelings while stronger shades denote strength.

Three Categories of Color

color wheel photo: color-wheel color-wheel.jpg
The Color Wheel

Chances are you learned about color theory during elementary art class; chances are you have forgotten much of it by now unless you work in graphic design!

The color wheel contains three types of colors:

  1. Primary
  2. Secondary
  3. Tertiary

Primary colors cannot be created by mixing other colors together.

Secondary colors are formed by mixing two primary colors: blue and yellow make green, red and yellow make orange.

Tertiary colors are derived by combining primary and secondary colors: blue-green or red-orange.

Web designers use these types of colors to evoke feelings when designing a blog.

Create Your Blog’s Mood Through Color

Want to know what colors are associated with which types of feelings? Here’s a handy guide:

Red – Warm, electric, energizing. Great as an accent for creating movement.
Blue – Calming, strength, professional. Sites for travel or relaxation work well with this shade.
Yellow – Exciting and electric. Too much can cause distraction on a site, so use it for accents.
Orange – Electric; however, browsers display this shade differently so stick with it as an accent. Green – Cool, calming, professional; great for sites referring to nature, finances, business.
Black – Strength and power. While black has been used as a main color in web design, it can also be straining to a reader’s eyes.
Gray – Can be used for strength, calmness, power, authority. Great shade to incorporate with most other colors; gray is used a lot in web design today.
White – Though it may seem an unnecessary color in web design, don’t forget what we said about white, or negative, space. Your readers need some white areas so the rest of the site comes into focus. Without this white space, your likely to overwhelm your readers, and they will likely turn away.

A Few Examples of Color Theory in Use

To show you how color theory is used in web development, what better than to offer a few visuals?

Suntrust implements blue, which is considered a corporate color, with an electric yellow center box to evoke a call to action. What is it they want us to do? Sign up with them!

suntrust

YogaWorks, a very popular yoga company, uses shades of green and gray to evoke a calm feeling in viewers on their website.

 

yogaworks

 

This website, for an artist, depicts a variety of electrifying images that catch the reader’s attention.

auystn