Website Color Combination

Choosing an Effective Website Color Combination

A pleasing color scheme can make or break your website. After all, in advertising, color accounts for 60% of advertisement's acceptance or rejection. Therefore, color plays a pivotal role in determining whether or not a potential customer will choose to conduct business with your firm. A web designer needs to ensure that all of your website’s colors work in harmony, while keeping the client’s identity consistent with other marketing efforts.

Quick Rules of Thumb

  • Stick to 3 to 5 colors when planning a website
  • When in doubt, use white for the background color, and black for the text color

Using Your Company’s Logo colors

If your company already has a logo designed by a professional – great!

This is the best starting point for choosing your website’s color combination. You may choose to use the exact colors found in your logo, or even add some complimentary colors. But, it is important not to stray too far from your logo’s color scheme in order to keep your company’s identity consistent.

Color Defines Mood

The colors of your website are important because they can elicit different emotions from your visitors. Colors can make us happy, excited, angry or sad. Below is a list of colors along with the corresponding moods which they evoke:

Warm Colors

Red: aggressiveness, passion, strength, vitality
Pink: femininity, innocence, softness, health
Orange: fun, cheeriness, warm exuberance
Yellow: positive thinking, sunshine, cowardice

Cool Colors

Green: tranquility, health, freshness
Blue: authority, dignity, security, faithfulness
Purple: sophistication, spirituality, costliness, royalty, mystery

Neutral Colors

Brown: utility, earthiness, woodiness, subtle richness
White: purity, truthfulness, being contemporary and refined
Gray: somberness, authority, corporate mentality
Black: seriousness, distinctiveness, boldness, being classic

Choosing a Color Scheme

Once you understand the colors and their connotations, the next step is to choose a color scheme for your website. Below is list of different types of color combinations:

  • Monochromatic color combinations use a single color. Variations in lightness of the selected color can be used to create the sense of different colors. Monochromatic colors go well together, producing a soothing effect, and are very easy on the eyes. The drawback however, is that, it can be difficult to highlight the most important elements on your website.
  • Analogous color schemes use colors that are related, but not the identical, to create visually attractive combinations. Choosing this type of color scheme is accomplished by picking colors that are close to each other on the color wheel. For example, a selection of blues and purples, or reds and oranges would make a good analogous combination. One color must be picked as the dominant color while the others are used as accents.
  • Complementary (or contrasting) color schemes are comprised of 2 colors that are opposite each other on the color wheel. This combination is most appealing when a warm and a cool color are used. For example, red with green or blue work well as contrasting colors. Using one color for your background, and its complementary color to highlight key elements will give you color dominance and color contrast. One word of caution: it is difficult for the human eye to focus on contrasting colors at the same time.

Therefore, it is best to avoid using strong contrasts for background and text colors.

Ida Mae Boyd
Contributor

David