Website Colors: How to Choose and Use Them

Let’s face it: if you’re not a trained artist or designer, color can be a tricky thing to use currently.

When you’ve got your website colors working right, your brand will look polished, professional, and cohesive.

But if you don’t get your colors right — or you simply use too much color, your website can end up looking like a carnival.

Which is perfect … if you sell carnival supplies. But not for the rest of us!

This week on Hit Publish, you’ll hear from three Copyblogger experts who share their thoughts on using color on the web.

Tune in to hear from Brian Gardner, Rafal Tomal, and Brian Clark as we discuss:

• How to approach your color choices with your audience in mind
• The super simple approach Rafal Tomal uses when choosing colors that works every single time
• How to handle color like a professional, even if you aren’t artistic at all

The Show Notes

• Which Colors Are Best for Your Business?
• Business Colors: You Already Know The Most Important Rule
• Five Free Tools for Getting Your Business Color Right

Website Colors: How to Choose and Use Them

Voiceover: This is Rainmaker.FM, the digital marketing podcast network. It’s built on the Rainmaker Platform, which empowers you to build your own digital marketing sales platform. Start your free 14-day trial at RainmakerPlatform.com.

Pamela Wilson: Hi, it’s Pamela Wilson. You’re listening to Hit Publish, where I cover simple ways to get better results with your online business.

On today’s episode, we’re going to talk about using color on your website. Color can be a bit of a mine field. When you use it right, it adds a nice polished touch to the appearance of your site.

But when you use color wrong, it can make your site look just about as color coordinated as a carnival — if you’re not selling carnival supplies, that’s a problem.

Today, we’re going to cover how to approach your color choices with your audience in mind.

We’ll also talk about the super simple approach that Rafal Tomal uses when choosing colors that work every single time, and we’ll cover how to handle color like a professional … even if you aren’t artistic at all.

I want to thank you for downloading this podcast, and I want to thank Rainmaker.FM for hosting it.

Are you ready to choose and use colors like a pro?

Let’s Hit Publish.

Hit Publish is brought to you by the Rainmaker Platform, which handles all the technical elements of good online business practices, including design, content, traffic, and conversion. To check it out, head on over to Rainmaker.FM/Platform and get started building your online business today.

How to Approach Your Color Choices with Your Audience in Mind

We’ll start off today with Brian Gardner. Brian is responsible for the look and feel of many of the StudioPress premium WordPress themes that Copyblogger sells and that we feature on the Rainmaker Platform.

I’ve noticed that most of Brian’s designs are pretty low-key in terms of color, so I asked Brian to share how he picks out the colors he uses for the themes he designs.

Brian Gardner: That’s a great question, primarily because I don’t use color a lot. For some reason, I’ve gravitated towards a more simple, minimalistic approach. A lot of that has to do with a lack of color and more emphasis on gray scale — blacks and whites. I do, however, always include an accent color that would predominantly be used in links and call to action buttons because that really draws attention in at that point.

Pamela Wilson: How do you determine what accent color you’re going to use?

Brian Gardner: Another great question. It really depends on the use of the design. If I’m creating a theme for StudioPress and I want to aim that theme towards a particular niche, depending on that niche, that’s usually what I’ll consider when I go to pick a color that would go for an accent.

Pamela Wilson: You’re thinking about the audience you want to try to reach, it sounds like?

Brian Gardner: Yeah, the design crowd, they tend to gravitate towards colors like teals and things like that. They’re turned off maybe by an orange or a red. So if my target audience is designers, I’ll pick a particular color, or area of colors.

Where on the flip side of that, maybe I’m creating a theme for marketers and I’m thinking ‘call to action’ in the back of my mind, so bright reds or bright oranges might be something that would be more appealing in that particular instance.

Pamela Wilson: It sounds like it totally depends on who you’re trying to appeal to, and you’re just thinking about them as you’re looking at your color wheel.

Brian Gardner: Yeah. Honestly, that’s the way to go when it comes to any part of the design — consider the audience because, after all, they’re the ones who are going to experience it.

Pamela Wilson: Brian has a philosophy about color that says less is more, and this approach is smart. When you don’t surround your words and images with too many competing colors, they have a chance to shine and get the attention they deserve.

The Super Simple Approach Rafal Tomal Uses When Choosing Colors That Works Every Single Time

Next up is Rafal Tomal. Rafal is responsible for some of our most important design work at Copyblogger Media.

His aesthetic sense of color is similar to Brian’s, so I asked Rafal, what technique does he use to put together a color palette for a website that he’s designing?

Rafal Tomal: It’s a very good question. I think many people are wondering what’s the best way, maybe what’s the easiest way. The simplest color palette is usually the best one. I would recommend to not choose more than three or four colors.

One of the safest options would be to pick one accent color and match it with grayscale tones. You can’t go wrong by matching any colors with grays.

For example, maybe your headings are black, the body text is dark gray, your background is very light gray, and you use one pink color for accent — like buttons, links, and more important elements. You can change this pink color for anything else. It can be green, blue.

You can still have a little branding and have a very good looking color palette.

If you want to make it look a little more advanced, you can correct the hue of your grays more into blue to make your palettes colder or to brown to make it warmer. Then you can, of course, add another color if you want.

By adding one more color, it can be a bit more complicated, but you can use it for headings, secondary buttons, links. It’s a good idea that the secondary color will be contrasting to your accent — the accent color will always pop up and will always stand out from the rest of the design.

Pamela Wilson: That sounds like great advice. It sounds like you’re saying to build your color palette on a foundation of neutral colors?

Rafal Tomal: Yes, exactly. That’s what I always do. When I start designing a new website, I first come up with an accent color. That’s where I start. I want to make sure that my accent color is the color I wanted to choose, that matches the branding, and that would be a good looking color.

Then I can match all other colors around my accent color and make sure, for example, if I don’t want to make my color palette too cold, then I can correct hues of different colors and make sure everything looks good.

Pamela Wilson: You actually start with accent color?

Rafal Tomal: Yeah, that’s what I usually do. Sometimes I have a color palette already provided by a client or the design. If I redesign a website and there’s already a color palette established, then I use those colors. I can tweak grays or hues a little bit, but it all depends on branding, too.

Pamela Wilson: Rafal recommends simplicity and says that we can start by picking one accent color and matching it up with gray tones.

How to Handle Color Like a Professional, Even If You Aren’t Artistic at All

Finally, we have Brian Clark. Brian isn’t a designer, but he’s got a keen sense of what he likes when it comes to web design.

I knew he’d have an opinion about color on the web, so I asked Brian, what’s the biggest turn off he sees about the way people use color online?

Brian Clark: I have to say as a non-designer, but someone who relies heavily on fantastic web design, that a general lack of taste is the worst thing that you see.

Before you even get into the psychology of color and all that’s more nuanced, most people will find a great designer, and then they’ll sit there and pick it apart — ask for the logo to be bigger, change the color scheme.

Don’t do that unless you are qualified to be a designer yourself, which you’re probably not since you’re hiring it out. Find a great designer and trust them.

I can’t design at all, but I can recognize good design. I can recognize a good designer. That’s why I put my trust in them to have that taste, and even deeper levels of awareness about the psychology of color — why blue conveys trust, why green conveys something else, and why red may be too intense sometimes and perfect the other time.

The key is, listen to your designer.

Pamela Wilson: Brian Gardner, Rafal Tomal, and Brian Clark all recommended approaching color with a ‘less is more’ philosophy. I’ve preached this technique for years. In the show notes for this episode, I’ll add some links to some of the many blog posts I’ve written about on the color topic for my site, Big Brand System.

Here are my questions for you.

When you look at the way you’re using color on your website now, is it consistent?

If you produce anything like PDFE or blog post graphics, are you applying the same colors to those things as you use on your website?

If not, it might be time to revisit the way you use color.

Remember, less is more. Working with a limited group of colors almost always works better.

This is Pamela Wilson. I want to thank you for being a stylish and smart Hit Publish subscriber.

Help others to find Hit Publish. Head over to iTunes and leave a rating and review.

Bye until next time, and remember to take action and Hit Publish.