Picking Colors For Your Website

Whether you’re building just one website, or a half dozen a month, one of the first things you have to do is decide on a color scheme. You may have no background in design, or you may be a color-blind web designer. (No, really, I know one!) Either way, it’s not always the easiest task to decide on a color scheme for your website. While blue is always an option, let’s face it, blue is one of the most over-used colors on the web. I have to admit, I’ve used it plenty of times. But even if you are going with a blue theme, what shade should you use? What complementary colors should you use? The answers are not always apparent.

First, let’s discuss the meanings of some basic colors. Keep in mind that these meanings can vary slightly from country to country.

Red is the color most commonly found in the nations’ flags. It can also signify passion, anger, war, power, danger or even love. Red tends to stand out when among other colors.

Green is the national color of Ireland. It’s also the color of money. It can signify greed, envy, jealousy or nature. Green is considered a cool color.

Blue can signify sadness. As the color of the sky and ocean, it is also said to be a relaxing color. Along with green, blue is considered to be a cool color, unless it’s a darker blue.

Purple is the color of royalty. It is said to help develop the imagination of children. Some sources say that almost 75% of pre-adolescent children prefer purple to any other color. It combines the positive aspects of blue and red, and can even convey romance.

Yellow can signify cowardice. It can also signify support of troops, sunshine or even food. It occasionally conveys jealousy and deceit.

Orange can signify joy, sunshine, enthusiasm, happiness and creativity. As a combination of red and yellow, it conveys many of the same feelings. While not standing out quite as much as red, it does not have much of the negative association that yellow has.

White can mean peace. It also means light, success, simplicity, purity, good luck and cleanliness.

Black conveys secrecy. It can also represent sophistication, evil, illegality or just plain darkness. Black is often considered the color of grief and even death.

So, by now you should have picked the main color or colors you’re wanting to use on your site. It may be that just a couple of colors is fine, as in this site. On the other hand, you may need more colors than that, as evidenced on this site. So how do you pick all those colors without having a degree in graphic design?

First off, keep in mind that you shouldn’t pick too many colors. Really, a scheme that uses five colors probably has too many. On the other hand, in your design, fading from one color to another (a gradient) in the header or elsewhere may be okay, and not count as many different colors. There’s an example of gradients on this site.

There’s a really neat tool out there for non-graphic designers known as a color wheel. There are a variety of these online. Some of them will actually generate a whole color scheme for you, others will just pick a couple of complementary colors. When using these, remember that you don’t have to use every single color they suggest.

So now you have the entire color scheme for your website. So what should you do with it?

The main text of your website should generally be on some light color. If this is the case, generally black is a good choice for the text of the site, regardless of whether or not that was one of the colors in your scheme. In rare cases, a dark color is okay for the background. In those cases, white or some other very light color should be used for the text.

Any borders, header graphics and text headings should use the other colors from your scheme. With the text headings, it’s a good idea to still use a color that contrasts well with whatever background it is on. If you have a light background, as will often be the case, use a dark color from your color scheme for the headings. And the reverse applies as well.

Make sure you also customize your links. Make sure they are a distictly different color from your normal text, while not blending too much into the background. If you decide to set a different color for links that have been followed and/or are being hovered over with the mouse cursor, there are some guidelines to follow. Generally, a lighter or darker shade of that same color you are already using will work well. If you want to use something different, picking a gray that stands out from the background often works well.

There you go! Now you have a nice color scheme and have applied it well to your website. Your website, with a good color scheme, will go far in conveying professionalism.