Color will be one of the first things anyone notices when visiting your site and it will be a large part of the initial impressions people form about you, your website, and your business. Color sets a mood and creates an emotional response in your audience.

Set the wrong mood or create an undesired emotional response and little you do after will matter. You will have put people in the wrong frame of mind to absorb your content or buy your products and services. Color matters.

There’s a lot for designer’s to learn about when it comes to color. A lot more than any one article can hope to deliver. If you haven’t studied color before consider this post an introduction that provides a path to further study. If you have studied color to some degree consider this post another in the steps along the path you previously started.

We’ll quickly walk through color theory, the meaning different colors convey, and some thoughts on a few color schemes. First a little more information about why color is so important.

You may be interested in the following related articles as well.

• Why is Social Interaction Important For a Website
• Are You Just a Freelancer? Or a Successful One?
• List Of Top Social Media Network Sites
• 30 Top Blogs For Social Media Updates
• How to Create A Better Online Portfolio

Feel free to join us and you are always welcome to share your thoughts that our readers may find helpful.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

Why Color is Important

Somewhere in the evolution of human beings sight became our most important sense for survival. Most of us rely on sight greatly and our initial impressions of anything new are predominantly based on visual cues.

Marketing research has reported that approximately 80% of what we assimilate through the senses, is visual, and that much of that visual input relates to color. Brands are often defined by color (Big Blue – IBM) even to the point where there have been color trademark infringement lawsuits.

Color plays a vitally important role in the world in which we live. Color can sway thinking, change actions, and cause reactions. It can irritate or soothe your eyes, raise your blood pressure or suppress your appetite. Color conveys meaning. It’s not enough to choose a color scheme for your website, because you like the way the colors look. You need to understand what messages different colors are sending to your audience and choose accordingly.

A famous example of color choices is McDonald’s fast food restaurants. After commissioning a study about color McDonald’s learned that the color combination of yellow and red tended to make people hungry and then want to leave. Perfect for a fast food chain as it promotes both sales and a quick turnover. Is it any wonder the arches are golden and sit atop of field of red that contains the McDonald’s name?

Color has also been used in the well being of hospital patients. Different color palettes might be use for different rooms or for different parts of the hospital. One set of colors soothing and uplifting for a patient, another set of colors designed to maximize visibility and productivity for staff.

Color Matters

Brief Introduction to Color Theory: Definitions

We define color in 3 ways. By name, by purity, and by luminosity or the amount of light. We use a variety of terms to describe color in these 3 ways.

• Hue is the actual color of an object. Red, green, and blue are all different hues
• Chroma is the purity of a hue in relation to gray. Adding shades of gray to a hue reduces chroma
• Saturation is also the degree of purity of a hue. It’s similar to chroma, but not quite the same thing. It’s how strong (highly saturated) or weak a color is. As with chroma, adding gray reduces saturation.
• Intensity is how bright or dull a color is. Adding white or black lowers intensity. A color that is both intense and highly saturated, has a high chroma.
• Value is how much light is reflected from a color and is how light or dark a hue is. Adding white increases value. Adding black decreases value.
• Shade is the result of adding black to a hue
• Tint is the result of adding white to a hue.
• Tone is the result of adding gray to a hue.

You probably remember your primary colors, red, yellow, and blue. You’d mix red and yellow to get orange or mix blue and yellow to get green. Each color is reflecting light and as we add more colors we actually subtract how many colors are reflected. This is a subtractive system.

Online we use an additive system to create colors. We aren’t seeing reflected colors, but rather colored light. Instead of a red, yellow, blue system we use a red, green, blue or RGB system. When combining colors we add more color, hence the additive system.

Color wheels are a way to represent the various characteristics of color defined above and there are a variety of color wheels to show different characteristics. One might be useful to show tints of a color and another might be useful to show shades of a color. Since there are different ways to express color relationships, there are different color wheels to represent those relationships.

The color wheel below is an RGB color wheel. If you start at the very top and draw an equilateral triangle inside the wheel, the 3 corners of the triangle will touch red, green, and blue, which are our primary colors in the RGB system.

The Meaning of Colors

Colors convey different meanings, however there’s no evidence to support a universal system of color meaning. Color symbolism is mostly a cultural thing. In Western cultures white is used for weddings. In Eastern cultures, white is the color of funerals. Depending on your audience the color white can convey two very different things.

Some color symbolism extends past culture and becomes global. Red is typically a color than means stop for example.

When looking at the table below keep in mind that most of the color associations listed are likely for a Western audience and that some of these associations may not be what your audience will perceive when seeing the color listed. Determine who your audience is before determining what your choice in color means.

Color Schemes

Everything to this point has been concerned with individual colors. When more than one color is used or you use different tones, shades, and tints of colors, you’ve created a color scheme. Many color schemes arise out of the color wheel and the positional relationship of one color to others on the wheel.

• Monochromatic color schemes are formed by varying tones of a single color, moving toward the center or edge of the color wheel
• Analogous color schemes are formed from colors adjacent on the color wheel
• Complementary color schemes are formed from colors on opposite ends of the color wheel
• Triadic color schemes are formed by choosing colors spaced equally around the color wheel
• Tetradic color schemes are formed by choosing colors at the 4 corners of a rectangle inscribed on the color wheel
• Split Complementary color schemes are a combination of analogous and complementary schemes. One of the two complements is chosen and it’s analogous colors are included in your scheme
• Neutral color schemes include colors not found on the color wheel, namely various tones of gray and brown
• Accented Neutral color schemes are neutral color schemes with colors from the color wheel used as accents

The same way individual colors convey meaning, the way they are combined conveys meaning. Again keep in mind that the associations in the table below are culturally formed and may or may not apply to your particular audience.

– Importance of color for online sales

A Few More Thoughts About Color

We all have past associations with color and tend to be drawn to those colors in the present. While the tables above associated meanings with individual colors and color schemes, keep in mind that each of us brings our own associations to color based on previous experience.

As important as color is, you still want to make sure your design works in the absence of color. Many people have color disabilities and won’t be able to clearly distinguish between some colors. Don’t let color be your only visual clue. You want to use value and intensity as well. Some people might find it easier to distinguish a dark red from a light red than they will a light red from a light green. You can run your designs through a tool like Graybit to see what your design looks like in grayscale.

Too much color can be distracting and not enough color can be uninteresting. You want to vary your colors without overdoing it. Usually 3 – 5 different colors is a good balance.

Create a hierarchy of color. One color can be dominate, another color or two can be subordinate to the dominant color, and the final color or two can be used as accents to add splashes of color where contrast is desired. Contrasting colors attracting attention and repeating colors imply similarity between design elements.

Color can also be used to organize information by creating hierarchies and dividing one group of elements from another.

Color plays an important part in brand and identity. If you can maintain a consistent color scheme across marketing media, your color scheme may be identified with your corporate brand.

You can create depth in your designs through control of warm and cool colors. Warmer colors tend to move into the foreground and cooler colors recede toward the background. Darker colors are usually seen first and carry more visual weight than lighter colors.

Some Colorful Examples With Good Color Schemes

Cellar-app

The dominant color of the Cellar design is brown. Given the site is for an app to display what wines you currently have in your wine cellar brown is a good choice. It’s the color of the earth from which grapes grow. The color scheme here is monochromatic, shades of brown with white and gray used as accent colors. It might have been interesting to see how green and purple (the color of grapes) would have worked as accent colors.

Official Link

Aztrolab

Aztrolab uses two colors from triadic color scheme, pink and light blue. The third color in the triad (a golden yellow) is used sparingly in the navigational links. White and black are further used as accent colors. Notice the strong contrast between the pink and blue. Each stands our well against the other. Even with the contrast the colors harmonize well together, one of the strengths of a triadic scheme.

Official Link

Enviramedia

Envira Media pulls 3 colors from a tetradic color scheme, blue, green, and brown. The site has an environmental focus and so these natural colors fit well with the overall message. The missing color from the tetradic is purple, which might not have worked well here, though might have been interesting as an accent. Instead accent colors are white, black, and different tones of the colors from the scheme.

Official Link

Floridaflourish

Flourish Web Design uses a metaphor of planting and growing to promote it’s design services. As with Enviro Media above the site uses colors found commonly in nature. The colors appear to be variations of colors you would find in a tetradic color scheme. Notice that red (the strongest color here) is mainly used for accent and is generally used sparingly throughout the site.

Official Link

Brianjeremy

Brian Jeremy also makes use of a tetradic color scheme, though what’s more interesting here is that the dominant colors are neutral grays and blacks. Despite these being the dominant colors, the design overall appears very bright and colorful. A wide variety of colors are used as accents and the overall effect is to leave the impression of a colorful site.

Official Link

Foodtease

As with the Brian Jeremy site, Food Tease uses white as the dominant color with pink and yellow (pulled from a tetradic scheme) being used as secondary colors. Images are used liberally throughout the site adding additional colors. Again the overall effect is to see a colorful site, even thought the dominant color is white.

Official Link

Mint

When you hear the word mint, what color comes to mind? Green most likely, hence the the choice of green as dominant on the Mint site. The color scheme is mostly monochromatic with orange used as a contrasting color to attract attention. Notice how orange is mainly used as the color behind calls-to-action.

Official Link

Frankprendergast

Frank Pendergrast uses black and yellow as dominant colors. A red (analogous to yellow) is chosen as an accent color for headings. Blue, a complimentary color to yellow is used for links. Again notice how just a few colors, some used only as accents, can add up to a colorful site.

Official Link

Wedesignwise

Designwise uses dark gray as the dominant color with shades of red as a secondary color. A light tan is also used as a secondary color. As with some of the other examples, notice that the design doesn’t seem overly dark despite the dark dominant color. Splashes of red and tan go a long way toward creating a harmonic color scheme that works well and makes the design memorable.

Official Link

Summary

Color is important, too important to ignore or tack on to the end of a design. You want to plan a color scheme early in your design with the understanding of what meaning different colors and schemes might convey to your audience. Color helps us process and store information more efficiently than black and white and as a result we remember the information better.

Remember that the meaning of color us culturally biased. Before determining what a given color will mean to your viewers make sure you understand who your viewers are and as much as you can about their culture. The same color color can mean very different things to two different people.

Again consider this post an introduction to color or a waypoint on your color learning journey. Read other articles and books on color and experiment. One of the best ways you can learn more about color is through observing how others use color and identifying how their choices made you feel. Take what you observe and try applying it to your own designs.

Image Credits

• Rainbow | SecretsAlive
• 065D12069 | Paulo Alegria

Find Something Missing?

While writing this article, it’s always a possibility that we missed some other great information or resources about color theory in design. Feel free to share it with us.