February 6, 2014 | Melanie Chandler

Using the Psychology of Color in Web Design

Psychology of Color

What's your favorite color?

Have you ever asked yourself why?

My favorite color is green; if I stop and think about why, I'd have to say that it has a spiritually uplifting effect on me.

Colors are subjective and contextual. They affect people's moods, emotions, and behaviors - that's why we talk about the psychology of color.Also, the psychological impact, or "meaning," of a color changes when it's paired with another color or a handful of colors. Different color combinations affect a viewer's impressions of everything from clothing to packaging and websites.

When choosing colors for your website project, keep in mind that these meanings have a direct impact on the way visitors see your brand and website. The colors you choose can work for or against your brand.

Color meanings are all about how we perceive colors. Think about what you associate with each color; for example, how does green make you feel? Most likely, it's the same as most of the population around you. Here's a quick guide to the general meanings behind different colors:

What do the colors mean

Red, orange, yellow, and any mixtures of these three colors are part of the warm color family. What comes to mind when you think of these three colors? Most likely you will start picturing fire, sunrises, sunsets, and autumn. These colors are generally passionate, energizing, and positive.

Green, blue, purple, and any color mixtures of these three colors are part of the cool color family. You most likely start picturing nature, the evening sky, and water. These colors are generally calming , relaxing, and mellow.

Black, white, gray, and anything in the brown family are considered neutral colors. Meanings and impressions of these colors are affected by the colors that surround them. Neutrals often serve as the backdrop in a design. Switzerland probably comes to mind when you think of things that are neutral - and a neutral white cross sits at the center of their flag, though, interestingly, the backdrop is a bright, passionate red.

Now that you have a general idea of emotions and meanings associated with the color families, you can start creating color schemes for your website. The traditional formulas for creating pleasing color relationships are based on a basic twelve-spoke color wheel, which is an important tool for creating color schemes.

Monochromatic color schemes are made up of different shades (adding black to the color) and tints (adding white to the color) of a single color.

Analogous color schemes are made by using two or more colors that sit next to each other on the color wheel.

Monochromatic and Analogous Color Schemes

Complementary color schemes are created by using color pairs that are directly opposite each other on the color wheel.

Split complementary color schemes consist of three colors - a single color and the two colors sitting on either side of its complement.

Complementary and Split Complementary Color Schemes

Double complementary color schemes use the combination of two complementary pairs. Be careful with this scheme, because not all color sets will be pleasing to the eye.

Triadic color schemes are combinations of any three colors that are spaced evenly around the wheel.

Double Complementary and Triadic Color Schemes

These basic formulas can be applied to create an infinite number of color combinations. You can create your own color scheme by following one of these basic formulas and mixing in different shades and tints of your colors. But be careful with how you mix colors - not all color combinations create visual interest and some can be rough on the eyes. The last thing you want is for your website to be an eyesore! (Read more about avoiding that effect here).

As I said above, the meanings of colors can be altered by pairing them with other colors. Take a complementary color scheme using oranges and blues, for example. Pairing shades and tints of orange with blue makes the color scheme look warm and rich. Using paler tints of these colors makes the whole color scheme appear more calm and "beachy."

Complementary Color Schemes

When you choose colors for your website or any project, think about how you want your audience to feel and what reaction they need to have, and choose a color scheme based on those answers. Remember, you want your colors to work for you, not against you!

Need help creating a color scheme? Play around with the Adobe Kuler color wheel for free to experiment with original color schemes and to explore other users' schemes.

So, what's your favorite color? Tell us why in the comments.

Need more help with a website redesign? Make the most of your time and energy - download our redesign checklist today!

Website Redesign Free Ebook


Melanie Chandler

Melanie Chandler

As design director, Melanie Chandler leads the design team and works with them to create consistently compelling and engaging website designs, images for digital marketing, and other visual content to communicate corporate identity and drive traffic on websites and social media.

Related Post: