CodeinWP content is free. When you purchase through referral links on our site, we earn a commission. Learn more

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:

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. 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. With some simple fixes, you can reduce your loading time by even 50-80%:

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)!

Most Searched Articles

14 of the Best JavaScript Libraries and Frameworks to Try Out in 2020

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 ...

50+ Best Free WordPress Themes for 2020 (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 60+ such themes for you right ...

10+ Best WordPress Hosting Providers of 2020 Compared & 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 Beginners and Advanced Users Alike

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 From Scratch (In 10 Steps)

Is 2020 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. ...

Scroll to Top