How to choose colors for your website

Websites are color combinations with content, and the color combination on each page can help draw in site visitors or repel them. Whether you're designing your own site or choosing a ready-made design, applying these guidelines will help ensure that your website color combination works for your audience.

Contents 1 Understand how colors work 2 Choose colors that work together 3 Design for your audience 4 Use available help 5 See also

Understand how colors work

Every color comes in a range of hues. Green, for example, can be pale baby green, forest green, garish lime green, or anything in between. All of these can work well in one context and not at all in another. Keep in mind the hue and the brightness of each color when choosing color combinations.

Colors (and their hues) affect emotions. Read up on the psychology of color, and you'll learn how certain colors can create feelings of calmness, excitement, power, and more.

The meaning of colors can change depending on the culture. If your website is targeted at specific countries or cultures, learn about what colors mean in those cultures. For example, in Western cultures, white represents purity and simplicity, among other things, but in Eastern cultures, it's the color of mourning and death.

Choose colors that work together

A color that looks good by itself might not work well with another color. Red and blue, for example, appear to vibrate when next to each other when viewed on a computer screen.

How much a color is used on a page affects how people respond to it. Brighter colors are best used to emphasize key parts of the page and to draw eyes where you most want them to go, such as logos, section headings, product or package names, and navigation. Neutral colors are generally best for text backgrounds and other areas where colors complement each other but don't need attention drawn to them.

Contrast between text and background is a usability factor. If the contrast isn't high, such as with a light gray background and dark gray text, some people will have difficulty reading the text. A dark background can also make the text hard to read. Younger people and those with good eyesight might not have difficulty, but if the text is difficult to read because of the colors used, a large percentage of the audience could be alienated.

When decorating a room, the 60/30/10 principle creates a pleasing balance to the eyes: the main color (usually the walls) is about 60 percent of the color in the room, the secondary color is about 30 percent, and an accent color is about 10 percent. The same approximate balance works well for web pages, with the 60 percent being the background color and two other colors being the main colors. You can use more than three colors on a page, but if you use more than about five or six, they can become jarring to the eyes.

These types of color combinations are generally harmonious because they use the color wheel to create balance:

• Analogous: colors next to each other on the color wheel
• Complementary: colors across from each other on the color wheel
• Monochromatic: different shades of the same color
• Split-complementary: one color plus two others equally spaced across from it on the color wheel
• Triad: three colors equally spaced apart on the color wheel

Design for your audience

• Age: Younger people, especially children, might be attracted to brighter colors, while older people tend to prefer that bright colors be used in more moderation.
• Gender: While pink would turn away many men, pink isn't most women's favorite color either. Online studies tell us that blue is the most common favorite color of both men and women, with women leaning toward purple and red after that and the second favorite color of men being green.
• Purpose of the site: An interactive site would have a bolder palette than a website offering financial advice. A web hosting site could go with bold or less bold colors, depending on the audience it's intended to attract.

Use available help

Numerous websites offer ready-made color combinations to choose from. In addition, various online color tools allow users to create color combinations. Not all combinations created with these tools will work harmoniously, but the tools are overall a useful way to find colors to use together.

Whichever method you use to choose a color combination, ask other people their opinions of it before deciding to use it. Look for people who fit the profile of your target audience in particular. If the colors don't appeal to them, keep looking.

See also

• Website usability
• Web design mistakes to avoid
• How to choose a web hosting site template