Pick Colors For Your Website In 7 Simple Steps

Easy like Sunday morning

By Josh Robbs
June 27, 2018
Filed under:
rainbow window shades

Don’t get hung up picking colors for your website. Use this simple walkthrough to get a palette and get on with your site.

Picking colors is an easy place for business owners to get sidetracked.

There are a lot of things that can distract you. There's the psychology of color. Then there's analysis of your competitors. You don't want to look like you're copying off them. And then you have to pick from 16,581,375 colors.

"Working" on finding the perfect solution is a common way to procrastinate. You're doing something and it keeps you from doing that other thing that you don't want to do.

In the case of picking colors, that thing you don't want to do is commit to a color and be wrong.

Here's a simple, 7-step process that will get you past this obstacle.

#1 Accept that you are not a designer

You might be a lot of things, but you're no designer. And that's okay. The trick is to not try to be a designer.

Your goal isn't to make a statement or a work of art. Your goal to make web pages that can be read.

Aim for simple. Aim for acceptable. You'll have other ways to make your website shine.

#2 Accept that your goal is not to become a designer

You're not a designer. Don't try to think like a designer. Don't overanalyze your options.

Relax. Know that good enough is good enough. This just has to get you far enough along to hire a professional.

#3 Black and white

There are your 1st 2 colors. But don't use black black. It has some issues.

It doesn't really exist in nature, it doesn't work consistently on monitors, and it's hard on the eye when paired with white.

You just need to dial it down a little. Wikipedia uses #222222 for black (vs #000000).

And the body of your website will be white. Almost black on white, that's what you're going with.

#4 Pick 1 color

You get 1 color. You only need 1 color.

If you have a logo or existing marketing, you should either use that color or a color that matches it.

Don't have that going for you? Pick a blue or a green. Those colors are liked the most and tend to convey trustworthiness and wholesomeness.

If you're stuck, don't worry. Pick one and take it for a spin. It isn't a big deal.

Remember, brown is a color that few love, but everyone likes chocolate.

#5 Test your color for contrast

Your 1 color is going to be used whenever you need an accent or to draw attention. That means it will be used with button and will need to have text on them.

The big question you have to answer is whether or not the text is legible. But that's easy.

  • Go to this contrast checker.
  • Add your color to the left side.
  • On the right side you can set it to white (#FFFFFF) or black (#222222).

The contrast number you want is 7 or higher. You can drag the slider to tweak the color you've picked. The pass/fail will change as you meet different standards.

Example: Let's say you've picked a blue: #9DBEBB. When you put it in the contrast checker, you see that it's 2:1. You can change the background to #222222, but you don't want blue on black.

You can try adjusting the blue. Switch the background back to #FFFFFF. Slowly, drag the blue's slider towards the dark end until you reach 7.

Do you like the color? Some colors don't do well. Their dark, high-contrast version is hard to distinguish from black.

If you don't like your results, try again. There are color picking resources at the end of this article.

#6 Test your color live

If you've made it this far, you're practically done. Take your color and test it on the web.

Does it look as good as you thought it would? Does it work the way you wanted it to? Does it feel the way you wanted it to?

#7 Write it down and don't mess with it again

Open up your email client and start an email.

To: your email

Subject: colors for <insert your website's name>

You should add both the hex and RGB colors. Hex colors start with #. RGB colors are written as 3, comma-separated numbers.

If you have 1 version but not the other, here's a Hex-to-RGB converter.

Now do the work

Get the color. Write it down. Move on to the next task.

Josh's Favorite Color Tools

Coolors.co - this site is for generating random, related colors. You can set colors and get matched colors or go completely random.

Paletton.com - this site is great for generating full palettes. If you have a color you like but it doesn't have good contrast, you can use Paletton to create a monochromatic palette to experiment with.

Pictaculous.com - have an image with color you like but don't know the colors, like your logo? Upload it here and it will give you the color breakdown of the pic.

 

Featured image by Ricardo Gomez Angel

Useful?

Useful? Wow, that's tragic. That might be the worst newsletter pitch headline I've ever written.

As unsexy as it may be, my goal for this site is to be simple and useful. If you'd like to know when I add a new article, get on the list.

It's an automated newsletter that will notify you when I make a new post - once a week at most. The closest you'll get to a sales pitch is when I announce webinars.

Josh started WP Master Builder to help small businesses get more done on their website in less time. He’s also a marketer and designer. There’s always a chance that he’s watching “Sky Captain and the World of Tomorrow” again or helping his wife build pipe lamps.

Pin It on Pinterest

Learn something?

Share it so others can use it too!