Skip to content

Using Color Theory in Web Design

In an earlier post, 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:


How does it make you feel?

And how about this block:


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. We all have instinctive psychological associations with certain colors. Some of these are common psychological associations with color, while others are individual associations created by the context of our lives. 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

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.

Complementary colors

To master design you must also understand what colors look good together. Complementary colors are found on opposite sides of the color wheel from each other. When used together, these colors contrast against each other, giving your designs a vibrant look. These complementary colors can also be used to enhance a specific feeling or to layer additional feelings on top of the main emotion you want to give your visitor. For example, you might use red on your call-to-action buttons to convey urgency and combine it with greens throughout your layout to give your visitors a sense of security.

You can use a tool like the Color Calculator on the Sessions College website to find the perfect pair of complementary colors for your design project.

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?

Perhaps the most famous example of a website that uses the color blue to evoke a feeling of security and trust is Facebook:

Using color theory in web design: Facebook

Natural Awakenings, a healthy living magazine, uses a combination of greens and blues to put readers in a calm, energized frame of mind. There’s also a tiny splash of orange to encourage action.

Natural Awakenings

Oi Polloi is an ecommerce website that uses a variety of vibrant colors to draw customers into their store. Initially, their color scheme might seem chaotic, but the variety is intentional: it represents the wide range of brands available in their shop.

Oi Polloi

Final advice

If your website isn’t getting the traction you want, there’s a good chance color is part of your problem. Take the time to really understand what you want people to feel when they enter your website, then build a new design that uses colors chosen to evoke those feelings.

For more help with the basics of blogging, check out our articles 5 do’s of great blog design and a whole guide on how to start a blog.

Don’t forget to join our crash course on speeding up your WordPress site. Learn more below:

Yay! 🎉 You made it to the end of the article!
WPShout Editorial

Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

Would love your thoughts, please comment.x

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

20 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...