How to Use Color on Your Website

  •    Robert is a design strategist who has authored several renowned books and dozens of articles on User Experience. He is also a columnist and contributing editor at Iron & Air.

One of the big secrets to good web design is how you use color. It's not just about picking out a nice palette. It's about choosing colors for different jobs, and then using them in strategic ways. Here are some ways to bring color to your website.

Get oriented

Color can help a visitor get oriented by leading the eye from one place to the next. It creates the perfect path to help explain what your site does, and how it can help the visitor accomplish a goal or complete a desired action.

Make use of complementary or contrasting color to send a visitor’s eye from one point to the next, in a diagonal line. This is called diagonal balance. This works for sites targeting regions like North America and Europe, because those visitors are already trained to read from top bottom and left to right. All the color does is accentuate what they already want to do.

On rm-harrison.com, for example, color makes a few key things stand out: the logo, the site's value proposition (“Refresh your mind + biz"), and a button that says how to get moving (“I Want This"). The user's eye moves right along a line, consuming key information at each step.

Attract attention

Got something big you need to tell the user right away? Color does that well, too. Just use something strong in the center of the page (or anywhere else, as long as it's the boldest thing on the page) and your user will go straight for it. Consider Loft Opera's homepage.

Loft Opera homepage

Loft Opera uses black and white as a contrast to all the red for a powerful effect. This helps communicate the organization’s mission statement — challenging the traditional opera model — with strong visual punctuation.

Pop the primary

Every task on a website has a degree of importance. “Sign Up" is or “Buy Now” is one of the most important tasks, so they’re considered a primary actions. “Cancel" is never a primary task; it's the kind of task you hope people will never need, and don't really want to draw attention to. It's a secondary action. To make this point visually, it's good to design primary actions to stand out more than secondary actions. Imagine if Cancel was a giant button and “Sign Up" was a small text link. Doesn't work so well, eh? (Because a primary action's purpose is to tell a user what to do next, it's commonly referred to as the “Call To Action," or the “CTA.")

To make a primary action pop out, you can pull out the contrasting color from your palette and put it to work. Besides making the button larger than the others on the page, you can use the contrasting color for the button's background to make sure everyone sees it.

Like this one on Leashboss.com.

Leashboss product page

The "View Products" button, by being the only thing on the page in that color, becomes the first thing you notice.

Minimize the rest

Let's go back to that situation where the primary action is to “Sign Up" and the secondary action is to “Cancel." If “Sign Up" is a button, then “Cancel," being the secondary action, should be a small text link that sits next to or below it. This way, it already has less visual weight than the button.

To top things off, just change the color of the text link to a light gray or something else that makes it fade into the background. Besides making the secondary action stand out less, it makes the primary action stand out even more.

Launchpadairplants.com product page

See the social network buttons (Facebook, etc.) on launchpadairplants.com? They're light gray while the "Add to Cart" button stands out in blue. The social buttons are secondary, so color is applied to the primary action, taking attention away from the social buttons.

If you're not doing these things already, apply these few concepts to your website soon. You should see a nice bump in customer conversion.