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.
Feel free to join us and you are always welcome to share your thoughts that our readers may find helpful.
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.
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.
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.
|Warm Colors||fire, warmth, passion, energy, impulsiveness, happiness, coziness, comfort, attention getting, inviting, harmonious|
|Cool Colors||water, calm, trust, professionalism, sadness, melancholy, professional, harmonious, detached|
|Red||fire, blood, intense, energy, war, danger, strength, power, determination, action, confidence, courage, vitality, passion, desire, love, increases metabolism, respiration, and blood pressure, high visibility|
|Yellow||sun, joy, happiness, wisdom, intellectual energy, stimulates mental activity, generates muscle energy, warming, cheerful, pleasant, can become dingy|
|Blue||sky, sea, slows metabolism, breathing, and heart rate, masculine, trust, loyalty, wisdom, intelligence, expertise, confidence, stability, depth, calming, suppresses appetite|
|Orange||energy, happiness, healthy food (citrus), joy, sunshine, the tropics, enthusiasm, happiness, fascination, creativity, determination, attraction, success, encouragement, stimulation, strength, increases appetite, fall, harvest|
|Green||growth, hope, freshness, fertility, financial wealth, healing, stability, endurance, harmony, safety, life, well being, lack of experience|
|Purple||stability, energy, wealth, extravagance, royalty, power, nobility, luxury, ambition, wisdom, dignity, independence, creativity, mystery, magic, feminine, artificial|
|White||light, goodness, innocence, purity, virginity, positive connotations, clean, safe|
|Black||power, elegance, formality, death, evil, mystery, strength, authority, elegant, fear, unknown|
|Gray||sorrow, detachment, isolation, responsibility, conservative, non-invasive, security, maturity, dependability, willingness to comply|
|Brown||earth, material things, order, convention, stability, solid, wholesome|
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.
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.
|Monochromatic||clean, elegant, soothing, unified, harmonious, can become monotonous, mix your monochromatic tones with pure white and/or pure black|
|Complementary||dramatic, intense, eye-catching, vibrant, can be jarring, colors can vibrate, typically bad for text|
|Analogous||found in nature, harmonious, pleasing to the eye, versatile|
|Triadic||strong visual, harmony, richness of color, can be vibrant, stability, balances, dynamic, can become garish|
|Split Complementary||high contrast, less tension than complementary color schemes, hard to harmonize, good choice for beginners, difficult to mess up, variety, less vibrant and attention grabbing|
|Tetradic||can be hard to harmonize, may look unbalanced, make for a rich color scheme, lots of variation, more varied than split complementary color schemes, less vibrant than split complementary color schemes|
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.