3 Simple Rules for Picking Superb Web Colors

6453137689_1192ddbfa0_z

Professionalism is important.  First impressions matter.  In just a couple of minutes, we’ll teach you how to choose colors for your website with confidence.


It’s still too easy to make a site that looks like crap.  Even with all the modern website design tools we have in 2015.  Choosing the wrong colors is one extremely effective way to ramp up the crapiness.

Let’s face it, creating a new website can be massively intimidating.  I have years of experience in web development, and I still feel the pit fall out of my stomach when I have to choose a brand new color scheme for a project.

If you’re like me, you probably don’t trust your own ability to judge which items “look good” together.  And you most likely ask your significant other for help when picking clothing and matching colors in outfits.

What’s worse, if you’re running a business, and you’re on a budget, then you don’t want to spend the money hiring a User Interface Designer to make sure your website looks good.

So what do you do?

There are more tutorials and books on the subject of color than you could read in a lifetime.

Fortunately, you don’t need most of that information.  You probably don’t care which of the 100 shades of blue proved most pleasing to Google users, nor do you need to know which color to paint a hotel lobby to evoke the feeling of hospitality.

So let’s simplify.

You want to make your site look professional without spending an arm and a leg.  You want the confidence that comes with knowing you’re making a good first impression.

Following these 3 rules will get you there.

Out of the countless tutorials I’ve read about color, Oliver Emberton’s incredible answer on Quora has proved the most useful.  This guide is loosely adapted from what he mentions.

1) Adjacent colors typically look good together.

When we say “adjacent” we mean colors that sit next to one another on the standard color wheel.

adjacent_scheme

A more concrete example:

Ajacent

On the web, Facebook uses variations of blue and green.

facebook

Home Depot looks great using oranges and reds.

home_depot

This is your bread and butter scheme.  If ever in doubt when picking the color for a new accent or feature, it’s a safe bet to use a different variation of a color already on your page.
Or try a color which is close by on the color wheel.

2) Avoid putting colors together which are distant on the color wheel.

An example on the color wheel:

tetrad_scheme

These color combinations can be very painful to look at. And they’re particularly awful for reading text.

NotWorking

Every rule has an exception.  And if done with care, the contrast created by opposing colors can really bring certain items to life.  Just look at the oranges and blues used by the Denver Broncos.

Notice how the blue lines highlight the bronco on the left.

broncos

Only use distant color combinations very carefully.  An exception is if you’re trying to highlight certain items.  Then, you can use the contrast between a much darker color and a lighter one to make the item pop.

In the bronco above, notice how the blue is much darker than the orange, and they contrast nicely.

3) Use blacks and whites everywhere.

Black and white go with everything. It’s why black shoes will go with any outfit. They will make any color scheme work.

Look at how CopyBlogger uses black as an anchor for their adjacent color scheme.

copyblogger

Google is often identified with their bright and colorful logo.  But they also prided themselves on having a large amount of whitespace on their homepage.

google

So when you’re designing a new website what should you do?

  • Choose one color to lead with.  This could be a logo, or it could be a color taken from another website you like.  This will take up the majority of the accents on the page.
  • Use the rules above to avoid clashing with the lead color.
  • Add blacks and whites freely as needed.

There are countless tools you can use to aid you in this process.

Do you have any simple tips and tricks when it comes to picking colors for web design?  Share your thoughts below.

Photo Credit: Michael Gil