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:
- Primary
- Secondary
- 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:
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.
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.
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:
