Color is an important aspect of your website, and it’s something that can easily be pushed aside when getting things together. As a priority, it should be up there on your list, due to its prominence on the pages where your info should be found.
Remember those awful sites during the early days of the web? When we saw flying blue text on a black background, which was loaded with stars and music on startup? Those sites that were filled with “I can, so I will” design? Well no more; those type of sites are so dated, they’re mostly offline now (except for some notable demo sites like this, which is only missing music) (oh wait, this one has music). Sites are now laid out closer to the way magazines are designed: with legible print in familiar colors that allow us to get the info we need quickly.
But how can you, as a non-designer, create a wonderful site that looks friendly and properly represents your business? By using color in a way that your visitors expect. A way that presents your information in a friendly, easy-to-read way, without hurting their eyes or making them leave your site immediately.
How to choose colors
The easiest way to settle on a color scheme is to work from your logo. Presumably you like your logo, so this is an easy starting point. Most logos (mine notwithstanding) have more than one color, which makes it easy for you to know what colors to use around your site.
This is a beautiful example of a logo that features many colors to choose from.
NOTE: I’m going to work from the premise that you have a logo, and that your theme / site / platform allows you to customize things; if it does not, read on because you may learn some interesting tidbits anyway.
Your logo designer should have given you a list of information pertaining to your site, including your hex codes. But wait…
What are hex codes?
Hex codes are the six-digit codes that designate specific colors for use in digital formats like websites. They get very specific, so be sure that you want to match your logo, you use the codes your designer gave you. You don’t have to stick to the exact colors your designer used, but knowing those codes gives you a starting point. But…
What if I don’t have / can’t find / lost the file for, my hex codes?
This is not as hard a problem as it may appear. There are a few sites, and this is my favorite, where you can find hex codes from images. The standard procedure is to upload your logo, and then move your mouse over a colored area. It will then display the hex code for that area. While the level of accuracy varies with some of these sites, they’re pretty reliable. I also like this site. And I chose those two because they are the most user-friendly.
Once you have the hex codes, I recommend saving them in a document for later use. I write the color (ie dark brown on dog’s ear) and then the associated hex code.
Now that you know the hex codes associated with your logo…
Where on your site should you use color?
You have a lot of options when brightening up a site. The list includes, but isn’t limited to, these:
Headers
Footers
Fonts
Navigation bars
Buttons
Banners
Sidebars
Wrappers (backgrounds)
Graphics
Splash pages
Error message pages
Image frames
There are many theories of how to manage color on a website, and I won’t pretend I’m an expert on the topic. But there are many sites offering to guide you, such as this page by Kissmetrics and this page by well-known SEO expert Neil Patel. I will leave it at this simple recommendation: simpler is better, and I try to stick to three colors, maybe four at most. Whatever you do, make it EASY for your info to be read.
This site has a great use of color that works well with the logo. All of the colors tie in, and they add to, but don’t distract from, the info about the business. I must disclose that I customized this site with the help of the business owner, but her choice of logo was the thing that really got us started. I would click on the photo to see how a sprinkling of color can brighten up a site and highlight certain areas.
What if I want to change to a new palette?
This is an interesting proposition. And if you (like me) have only one color in your logo, this becomes a more important issue to consider. What if you have one color you love (or plays a major part in your logo), but you don’t know what others to match with it?
This tool is a great way to find new colors. It asks you to enter a current hex code and lock it down; by pressing the space bar, it will then present other colors that work with that first one. Each time you find one you like, you lock that one down. And soon you have an entirely new scheme!
This tool is also a big help. Have you ever decided on a color, and then needed one teeny shade darker or lighter? This tool will find that for you, and display it with little hassle.
Bottom Line
Color is an aspect of your site that you really need to look at. It can brighten things up, or show that you don’t really care. It can be a fun diversion, and it can help highlight the more important areas of your pages / site. It’s not hard to work with, once you have a handle on the simple things. And hopefully your site builder allows you to change things easily. (Little bonus for reading this far: this appears to be a great beginner lesson on how to work with color. I will be checking it out and recommend it to you also.)
NOTE: A Big THANK YOU to Emery Fitzgerald of Auntie Em’s Pet Sitting and Dog Walking for allowing use of her logo and the link to her site. She was a joy to work with, and I am so happy to see how her site has grown since we worked together!
*** If you need help changing the colors on your site, or for any other services, please contact me at Amy@petsitterseo.com or call me at (732) 820-0103
