With all the wonderful WordPress themes out there, choosing a color palette for your site can be very simple — as simple as picking a theme that uses colors you love. “Color palette” refers to the combination of colors you consistently use on the site.
Or, maybe not.
Choosing colors for your website is both an art and a science.
You want your color scheme to be consistent throughout. It helps to identify, or brand, your site. You also want your colors to resonate with your readers, because your colors will help you attract the audience you want to attract.
Think about it for a second — would a Harley-Davidson logo carry the same impact if it were pink and lavendar?
Here are the top three guidelines for choosing a color scheme for your website.
- Pick a maximum of three colors.
- One of those three should be an accent color that you use sparingly to attract attention in specific spots
- Many experts recommend you use your main color on 60% of the site, your second color on 30%, and your accent color on only 10% of the site. I don’t think you need to measure it, but keep those proportions in mind.
Before you Choose Your Color Palette, Do some Research
A big piece of your color-design puzzle will depend on the audience you serve.
Take a look at some of the businesses in your niche. If you’re an undertaker, forget the bright, eye-popping colors. You want subdued, toned-down, calming, trustworthy colors.
On the other hand, if you import fabrics from Asia, then the brighter the color you show on your site, the better!
A website in the legal or financial area needs colors that invoke emotions of trust and stability. A builder of playgrounds should show a sense of fun.
Use a Color Tool
Once you have a general idea of the colors you want to use, there are plenty of tools online to help you find colors that work together well.
If you have an image you plan to use prominently — in the header area, for example — you can base your entire color scheme on the image.
The Adobe Kuler tool makes it easy to use an existing image. Just scroll to the bottom of the page and select Create from Image.
Follow the prompts to upload the picture you want to use. For example, here’s a picture of Panama City, Panama, taken by my friend Randy Hilarski.
The tool will select areas of color, and highlight them with enlarged circles. In this instance, the tool selected a dark green from the trees, a gray from the sky, brown from a building, beige from another building, and one bright spot reflecting the rainbow.
From that, you can generate a color palette. The palette shows colors that work well together. Choose no more than three of them — one primary, one secondary, and one just for accents.
The resulting palette looks like this.
If you’re not happy with the automated suggestions, use your mouse to grab and move the circles of color on the image to create a different palette.
Notice that the center color is the strongest in the palette. That’s the one you’d use sparingly, as an accent.
Other Color Resources
Here’s a terrific infographic to help with your color choices and the psychology behind color.
Another color tool, Paletton.
More detailed information and instruction on color choice, from graphic designer Pamela Wilson.
And last but not least, here’s a nice article on the meanings of colors, and where to use them in everyday life (it may give you some ideas for how to use colors on your website).
This post was originally published in August, 2014. It’s been updated with additional information on September 16, 2019.
Other Articles You’ll Like
- Is Your Website Doing Its Job?
- How to Plan and Carry Out a Site Redesign
- What Kind of Website Do You Really Need?
Are you brand new in your WordPress journey? If you found this article helpful, you’ll like the WordPress Beginner’s Blueprint. Download it now!
