Colors for Your Website

by Joelle Steele

Before you design your Web site, you should learn a little about color, and possibly about Web-safe colors and CSS3 colors, as well as how to use color to make your Web site easy to view and use.

Color Sells

Every Web site design starts out with some basic information and some images that must all come together to create an effective marketing statement. One of the basic design features of any Web site is its color scheme. Color either sells — or not.

There are many psychological reactions to color and, as a result, some colors are better for selling certain products and services than are others. For example, you can expect blues to be best for businesses in general, but they’re not all that great for food sites, because blue is an appetite suppressant. Reds, oranges, browns, and other warm colors are best for selling foods and restaurants, and they are also good for targeting male buyers. Pinks and purples are normally more effective for targeting female buyers. Primary colors as well as pastel pinks and blues are often used to sell children’s items. Greens are great for selling anything that is natural, such as plants, campgrounds, and some sporting goods. These are, of course, general guidelines. It certainly can’t hurt to read up on the psychology of color to learn how color affects people, especially as it applies to advertising.

Web-Safe Colors

For many years there were 216 colors that were always considered to be pretty much Web-safe or browser-safe, meaning that they usually appeared fairly consistently regardless of what computer system, monitor, or browser was used to view them. But times have changed, and today most computers demonstrate all colors in pretty much the same way, and those 216 Web-safe colors don’t really depict all that well on anything other than an old 8-bit card. But there are still people using older computers and cell phones, and those devices may lack the ability to depict anything other than the 216 colors.

Color Palettes

When you select the colors for your Web site (or for a brochure or even for your office interiors) you are creating a color “palette.” Here are some samples of the basic types of color palettes you can use on the Web:

Achromatic. Usually shades of gray ranging from almost white to almost black, but can also be used with white and black.

Black and white plus a color. Black and white can be used together without any other colors, or one or the other can be used as a great accent color with whatever palette you select. In some cases, you might want to use black, in particular, to frame boxes and tables on your pages, as it accentuates any colors that might otherwise seem faded against one another or against a white background.

Neutral. Pick one color and then select two more that are tints (pastels) or darker shades of that color.

Monochromatic. One color in different shades or tints, such as a dark blue and a much lighter shade of that same blue; or a dark blue, a lighter shade of that same blue (a medium blue), and an even lighter shade of that same blue.

Complementary. Two colors or shades of colors that are opposite each other on the color wheel, such as a red and green, a blue and orange, or a purple and yellow. One of the colors can be a very light pastel. A blue and orange combo could be something like a light peach and teal or a dark peach and a light teal.

Complementary plus variation. Three colors. The same as above but with the addition of a variation on one of the colors, such as a pastel tint or a darker shade, resulting in a palette that might contain something like a dark purple, a light yellow, and a lavender (a pastel of the dark purple).

Analogous. Any three consecutive colors on a color wheel, to which you can also add any tints (pastels) or darker shades of those three colors.

High Contrast. This palette contains one very dark color that is almost black and one much lighter color that is almost white.

A Few Caveats

No design palette should ever contain more than three colors unless it is a monochromatic palette or unless you have a very large Web site that consists of sub-Webs with different audiences (visitors). Even then, try not to use too many colors and try to keep them tied together in some way color-wise. You might do this by using a banner that has a background containing all the colors that are on your sub-Webs. But in your average Web site, more than two colors tends to look way too busy and is distracting to the visitor. If you aren’t confident in picking colors, just stick to the monochromatic palette or one of the two complementary color palettes.

Avoid using highly saturated colors, those very brilliant hues like the primary colors (red, blue, or yellow) or high key colors (hyacinth, chartreuse, or cherry). They look cartoonish and tacky, and they are also very hard on the eyes of your visitors. You want your visitors to stay on your Web site, and if they find it too difficult to look at or to read, they will likely leave before buying or contacting you.

Remember that colors look different when set against different backgrounds. If you are using your logo on your Web site — and most people do — you will want to be sure that it looks good next to or against the colors you have selected. If it doesn’t, if it looks like it has changed color, this is an illusion that can only be corrected by picking another color and seeing if it works any better. If it still loses its impact, keep your logo away from your Web site colors and place it on or near a white background instead.

If you are also going to use your colors for titles and subheadings, be sure that they are dark enough to be easily readable against the background you choose. The most readable text is black against a white or very light background. In general, you should try to keep the background as light as you can and make your text very dark. Avoid using a dark background with light text as it is extremely fatiguing to the eye. And do not ever use a patterned background unless it is very light in color and is only slightly textured. Patterns are distracting and it is hard to read the text when it is set against them, even when the patterns are light pastels.

Summary

Color alone will not make your Web site successful, but using the right colors for your Web site will help keep visitors on your site, will draw their attention to what you want them to see or read, and will help illustrate whatever it is that you sell. Bottom line, take your time when you’re picking colors for your Web site, and if you aren’t sure you’ve picked a good palette, create a few other palettes you like and then run them all by your employees, your kids, your spouse, your neighbors, and anyone else you can think of to get their input before you make your final decision.

This article last updated: 11/08/2015.