The StyleSheet » Archive » A Color Primer: The Effects of Color on Web Design

A Color Primer: The Effects of Color on Web Design

Posted June 17, 2008 By Janis Gonser |

I am no color specialist like my wife, Amie, who has a Master in Fine Arts and has been working closely with colors since early childhood. However, I do understand that applying some basic color knowledge in Web design will easily increase the quality and effectiveness of a Web site. In addition, I always find it interesting how the meanings and associations of colors change when put into cultural context, and I think that it might help you when you choose colors for your Web site.
Let’s start from the ground up with a look at the color wheel and get the basics straight.

Color Wheel

The color wheel (see image) consists of the sets of primary colors (red, blue, yellow), secondary colors (green, orange, violet) and tertiary colors (red–orange, red–violet, yellow–orange, yellow–green, blue–violet and blue–green). Depending on the color wheel model, a variety of sub-versions do exist with different shades, tones, and tints.

There are various color combinations which can easily be identified on the color wheel.

Monochromatic color scheme: One color, adding value (dark to light) in a series of steps. This is the most harmonious and unified type of color scheme.
Analogous color scheme: Several colors lying next to one another on the color wheel (e.g. blue, blue-green, and green). This is also a very harmonious color scheme.
Complimentary colors: Colors which are opposite each other on the color wheel (e.g. green and red). These colors intensify each other’s appearance when used together.
Triadic color scheme: Three colors which are equidistant on the color wheel (e.g. orange, green and purple). Note that this scheme always gives you a combination of two warm colors and one cool, or vice versa.

The color wheel does not offer an obvious answer to visual design questions, but should be used as a reference point. It shows the relationship and balance between the different colors. Remember, colors look different in combination with one another and are affected by one another, so be sure to view them together as a group rather than individually. Which color scheme a person chooses for a design depends on a variety of aspects, including the emotional effect of colors and what the design tries to communicate. Trust me: there is a reason why you don’t see many bright red Web sites.

Color Effects

When talking about colors and emotions, colors are first separated into cool and warm color groups. Warm colors are reds, oranges and yellows, and stimulate the senses. Research has shown that warm colors can raise blood pressure and body temperature, thereby raising mental alertness. The cool color group includes blues, purples and greens, which are associated with cooling effects, like trees and water. The color green, for example, is known to lower blood pressure, heart rate, and body temperature.

When you go to a spa or hospital, check out the colors of the walls and floors. Chances are, they will be a “soothing” cool green or blue shade.

Think about how you like to present your service or product. Do you want to represent a fast-moving, high-energy marketing firm or a calmer, more laid-back salon? Since Web sites are often built around the company’s identity, give the color of your logo careful consideration during its design phase.

Colors in Cultural Context

Colors can have very different meanings in different cultures or societies. For example, in the Western world, the color red indicates danger or warning, whereas in China, it carries a largely positive connotation, being associated with happiness and success. When considering colors for web design, identify your users’ ethnicity and be aware of their cultural background.

Web-Safe Colors

The topic of Web-safe colors is close to extinction due to the constant improvement of video cards. However, if you can anticipate that the majority of your Web site’s users don’t have access to recent technology, it’s recommended to choose your colors from the browser-safe palette, which only includes 216 colors.