How to Choose Web Design Colors with Customer Appeal

Color has a vocabulary. Effective web design color schemes “speak” to the emotions of potential online customers. Savvy web designers know that color is one of the best tools in their “toolkit.”

Web Design Colors That Work

Recent Research on Color & Emotion

Many of the psychological and emotional components of color appear to be universal, and some are learned from cultural tradition. A 2004 study by Naz Kaya and Helen H. Epps of the Department of Textiles, Merchandising and Interiors at the University of Georgia tested the association between emotion and color in 98 college-aged volunteers. Here are a few of their findings:

green, web design colors

GREEN evoked the highest percentage of positive emotions, such as happiness, relaxation, peace and hope. The prominence of the color green in nature has a positive effect on emotions, especially during the spring and summer seasons. The therapeutic benefits of green landscapes have been well researched. In fact, Japan has Forest Therapy Trails designated for visitors. They have proven that blood pressure can be lowered and immune systems strengthened by walks along these thickly forested trails.

As a freelance web designer, I often use the color green as a prominent color in my travel website color schemes. It suggests the sense of relaxation and happiness promised by beautiful destinations and makes an instant emotional connection with viewers. When combined with lighter tones of blue, this web design color scheme can tap into the yearnings for beautiful beaches and exotic locales that are the “bread and butter” of travel marketing.

blue - web design colors

BLUE was also one of the most popular colors among subjects in the University of Georgia study. Like green, blue evokes feelings of relaxation and calm. It is also associated with the ocean and sky in nature. Who of us does not delight to see a powder blue sky peek through after a summer rain? Blue energizes and conveys a spirit of optimism. Studies have shown that people are more productive in a blue room.

Blue means business. A dark blue suit instantly conveys a sense of professional bearing, and the same is true in web design. The challenge is to avoid an overly staid, boring look when using more somber tones of blue.

I like to use the color blue when designing websites that have an optimistic theme, such as life coaching (content page sample below), wellness and travel. The lighter shades of blue (like those seen in a midday sky) combined with a touch of aqua produce a color scheme with a restful, inviting feel that stimulates positive emotions in website visitors.

Blue and aqua work well in this high fashion website to create a stylish web design with lots of attitude. The cool aqua tones combined with clean, crisp graphics give this web design a sense of energy and optimism.

red - web design colors

Arguably the most intense of colors, RED demands our attention. Red was associated with both love and romance and evil and blood by University of Georgia study respondents. Red is extrovert, even extreme at times. In web design color schemes, a little red goes a long way. Often, a touch of red in just the right place can direct the eye to what is most important. It is like a spice that perks up an otherwise dull meal. However, too much red can seem garish and tasteless.

Red, on a computer or tablet screen, can easily take on a garish look. I most use red sparingly as an accent color (seen in the sample below) for that reason. For me, it's the one color that can easily exceed good taste when used too freely (unless that is the specific look you are striving for).

In the web design sample shown above (for a life coach) the red in the dress draws the eye to the most important visual element on the page. I added a bit more red as an accent in the title graphic. Do not overdo red! Just a touch is often all that is needed to breathe life into a web page design.

Because softer hues of red such as pink and salmon have a tranquilizing effect, they can be used more generously in web design. Here is a web design I created with a romantic theme that uses a salmon color background to good effect. In this design, I wanted to avoid the color pink as it is overused when suggesting romance, so I choose a duskier shade of salmon.

pink - web design colors

PURPLE is the color of royalty, and can suggest luxury and sophistication.I like to use the color purple in e-commerce web design, especially for luxury or designer products. You can see a sample of my use of purple in a luxury e-commerce web design for a jewelry vendor below.

purple web design colors

I also used subtle purple-magenta tones in this web design for a New York realtor. The colors evoke both a colorful sunset and a sense of luxury on this home page.

magenta - web design colors

WHITE evokes feelings of purity, peace and hope. White is neutral, “summery,” and can suggest luxury and purity. Generous use of white ‘space’ in web design color schemes can create a look that is free of clutter and crowding. I like to use white space to organize web pages that would otherwise look very confusing. The web page below for a chocolate truffle online ordering page is a good example of how white space can add structure and orderliness to a web design. Pure white often looks very sterile on computer screens so I like to warm it up a bit with a tint of color.

white - web design colors

Using Color Casts in Web Design Color Schemes

This is a more sophisticated use of color that, when skillfully applied, can enhance the beauty and cohesiveness of your web design color scheme. In the web design shown below, I adjusted the color cast of each image so that it has overtones of blue and magenta. A color cast is a tint of a particular color, (usually unwanted) which affects the whole of an image evenly. Normally, color casts are removed so that white tones are free from any tint or cast. However, in a creative application, adding a similar tint (or cast) to each photo on a web page gives them all a similar personality. This is done by using the Color Balance tool in Photoshop. As seen in the homepage below it creates a beautiful effect in the right setting.

color cast - web design

We can go on endlessly discussing web design color schemes. I hope this brief overview will provide inspiration for your next web design project! -Don Peterson

Learn more about the use of color in web design in the article Emotion & Website Color



Web Design Colors That Sell!