Choosing the Right Colors for Your Website

The color scheme of your site is one of the first things a visitor notices and it serves two important functions. The colors reflect something meaningful about the type of content you offer and they help generate a desired viewer response. There are several tricks to choosing the best colors for your site. They involve knowing what colors mean to your target audience and matching those meanings to your content.

In the Mood

Colors quickly get the viewer in the mood to receive your content. If the colors of your site and content don’t match, the viewer will become confused, distrustful, or repulsed.

The real trick in choosing colors is knowing that it has less to do with
your personal taste and more to do with viewer expectation.

For example, black is not the first color that comes to mind for a site on healthy eating. You would probably expect such sites to have a lot of white, which represents cleanliness and purity, surrounded by colors of food, earth, or hearth. Believe it or not, the top color choice for food sites is green because it signifies something natural or fresh. Green is also a great choice for retreat centers and spas because it also signifies harmony and balance.

Take away: Give the viewer what they expect, and they’ll be more receptive to your content.

Combinations Matter

The meanings of colors can change when they are used in combination. For instance, red causes excitement. When red content is placed on a white background, it is perceived as being the most important text on that part of the page and is often used to halt your attention and encourage you to take positive action. When red is placed on a black background it becomes scary or dangerous. It is also difficult to read.

Be sure there is good contrast between the background color and the text. Some combinations are easier on the eye than others. Stark white backgrounds are actually hard on the eyes. There is a growing trend to soften the background behind the main text content area of the site. With black backgrounds, light gray is being substituted for stark white text too.

Another thing to consider is whether your picture will be prominently featured on the site. Make sure you are wearing a complimentary color to your scheme. Also check that you look good being surrounded by the primary color of your site.

Take away: Use color combinations that work together to convey the intended message.

Three Kinds of Color Theory

When you study color theory, it’s important to keep in mind what basis the writer is using. There are three principle foundations of color theory. One is based on the combination of all colors combined in pigment, which yields black. Another is based on the combination of all colors combined in light, which yields white. And the last is based on the physical and psychological reaction we have to seeing a color. The two latter theories are most important to websites.

And, be aware that the psychological reaction component varies by tradition, culture, and belief system. For instance, purple can signify deep spiritual awareness, royalty, or death, depending on the culture.

Take away: There’s more to it than choosing complimentary colors from the color wheel. Do your psychological homework too.

Limit the Palette

Unless your site is about rainbows or candy, you’ll do well to limit your color scheme to one primary color and one or two accent colors. There are three ways to approach that choice.

You could pick two highly contrasting colors that are opposite each other on the color wheel. That will place a warm and a cool color next to each other on the page. One popular trend used this scheme with the colors pink and lime green. This type of combination is very pleasant to the eye and gives the site a sense of balance. Trends that are coming into vogue are purple with yellow, as well as blue with orange.

Another way is to choose three colors from the same base color, each one lighter than the other. It’s called tone-on-tone and is a very good choice for sites where the graphics or pictures are the main focus, like a gallery or fashion site. Imagine a black background with highlight colors of light gray and white. Tone-on-tone is also good for sites that want to evoke a sense of relaxation or luxury. Imagine a coffee with cream background with mocha text and milky highlights.

A third choice is to use three colors that are equally spaced around the color wheel. It’s a powerful combination and very popular in site design, especially for sites that want to express a sense of authority in their genre. Blue, yellow, and red are a popular choice in this scheme.

Take away: Use a simple palette to convey a focused message.

Looking Good

What looks good on your computer screen may look terrible on someone else’s. If you want to ensure that your site looks the same on all types of computer screens with all types of browsers, stick to the web-safe colors. Always have your friends look at the colors on their computer to see if they stay the same. (Testing with different screen resolutions is not the same as testing on different screen types, which come in CRT, LCD, LED, and OLED.)

Take away: View your site on as many screen types as you can, including glossy and matte finish flat screens, as well as mobile devices.

Resources

There are plenty of places to draw inspiration for color combinations, and not all of them are on the Internet. Paint stores usually have brochures on the latest trends in home décor colors. Fashion magazines also feature the latest trends.

Following are a few online resources you’ll find helpful. When you see colors you like, be sure to get the hex code for them. That’s the information you’ll need to give your site designer. For example, the hex code for white is #FFFFFF.

Web Safe Colors

Color Trends

Try Color Combinations

Color Meanings

Color Psychology in Marketing