Color As A Web Design Tool

People are physically, psychologically, and socially influenced by color. Color has been found to have connections to health and it can help set the mood through which your designs are seen.

Color communicates meaning and so we need to be conscious of what meaning we're conveying when we choose to use one color over another. It's not enough for a designer to use a color simply because he or she likes that color.

Color is a tool in the designer's toolbox much the same as a grid or whitespace and it's important to understand how to use that tool.

Last week we talked about the color theory and how we could represent color and choose different color schemes. This week we'll take a look at the meaning colors communicate, how we can better control our designs through our color choices and finally how to go about choosing a color scheme that reinforces the message your design aims to communicate.

Color Meaning

The first and perhaps most important thing to understand about the meaning of color is that there is no substantive evidence that support a universal system of color meaning. It's not that colors themselves have specific meaning, but rather that we have culturally assigned meanings to them.

While some color symbolism exists globally (red as the color of a stop sign, yellow for caution), color symbolism tends to be more common within a given culture than across different cultures (white is used for weddings in Western cultures and for funerals in Eastern cultures).

Even within a single culture individual differences will exist. You and I will not necessarily be affected in the same way by seeing the same color.

The above means that it's important to understand who your target audience is and how your audience attaches meaning to color. Again it's not that a color has a specific meaning on its own. It's that we've culturally assigned meaning to colors. Keep that in mind as you read some of the specifics about the colors mentioned below.

Warm Colors: For the sake of simplicity let's define warm colors as red, orange and yellow. These are the colors of fire. They radiate warmth. Warm colors are more often associated with passion, energy, impulsiveness, happiness, coziness, and comfort. They draw attention and have the advantage of being inviting and harmonious.

Cool Colors: Again for the sake of simplicity let's define cool colors as green, blue, and violet. These are the colors of water. Cool colors are more often associated with calm, trust, and professionalism. The are also associated with sadness and melancholy. The have the advantage of being professional and harmonious, but can also turn people off by the coolness they radiate.

Note: The demarcation point between warm and cool colors falls somewhere between yellow/green and violate red. Green and purple don't fall neatly into either warm or cool camps. The tend to take on the properties of one or the other based on the surrounding context.

Red: is the color of fire and blood. It's emotionally intense. Red is associated with energy, war, danger, strength, power, determination, action, confidence, courage, vitality, passion, desire, and love. It can enhance metabolism, increase respiration, and raise blood pressure. Red has a high visibility and advances to the foreground. It is often used for buttons in order to get people to take impulsive action.

Yellow: is the color of the sun. Bright yellow attracts attention, though it can also be distracting when overused. Yellow is associated with joy, happiness, wisdom, and intellectual energy. It stimulates mental activity and generates muscle energy. Yellow produces a warming effect, arouses cheerfulness and is often used to evoke pleasant feelings. Shades of yellow can become dingy lessening the pleasing effect.

Blue: is the color of the sky and the sea. It has the opposite effect of red and slows metabolism, breathing, and heart rate. It's seen as a masculine color. Blue is associated with trust, loyalty, wisdom, intelligence, expertise, confidence, stability and depth. It creates a calming effect, suppresses appetite and has been considered to be beneficial to both body and mind. Blue is often used for corporate sites given the previously mentioned associations.

Orange: combines the energy or red with the happiness of yellow. It's not as aggressive as red and calls to mind healthy food (citrus). . Orange is associated with joy, sunshine, the tropics, enthusiasm, happiness, fascination, creativity, determination, attraction, success, encouragement, stimulation, and strength. It can increase appetite and evokes thoughts of fall and harvest.

Green: is the color of nature. It symbolizes growth, hope, freshness, and fertility. In countries with green money such as the U.S. it evokes thoughts and feelings of financial wealth. Green is associated with healing, stability, endurance, harmony, safety. life, and well being. It can sometimes signify a lack of experience and is often used to indicate the safety of drugs and medical products in advertising.

Purple: combines the stability of blue and the energy of red. It conveys wealth and extravagance and is seen as the color or royalty. It symbolizes power, nobility, luxury, and ambition. Purple is associated with wisdom, dignity, independence, creativity, mystery, and magic. Light purple is seen as feminine and purple is a popular color with children. Purple occurs less frequently in nature and some may consider it artificial. In Catholic cultures it is representative of death and in some Islamic nations it is associated with prostitution.

White: is associated with light, goodness, innocence, purity, virginity. It usually has positive connotations and is seen as clean and safe.

Black: is associated with power, elegance, formality, death, evil, and mystery. It denotes strength and authority, is seen as formal and elegant, and brings forth feelings of fear and the unknown.

Gray: is the color of sorrow, detachment, and isolation. It connotes responsibility and conservative practicality. It's a neutral color and creates a non-invasive feeling. It's associated with security, maturity, and dependability. It can be used to reduce the intense energy of another color and to emphasize a willingness to comply. Some people who prefer gray many be seen as the lone wolf type or narrow-minded.

Brown: is the color of the earth and tends to blend into the background. It's associated with material things, order, and convention. It's connection to the earth gives it stability. Brown can convey a solid and wholesome feeling.

The following articles offer additional information about the possible meaning some will associate with a given color.

• Color Theory for Designers, Part 1: The Meaning of Color
• Color and Advertising – An interesting site that let's you choose a word and see what colors others have associated with that word.
• Color Meaning
• Color symbolism, color and personality, gemstone color & meaning
• Color: Meaning, Symbolism and Psychology
• The meaning of colors – A table of colors with words often associated with them.
• Color Symbolism and Color Meaning in The Bible
• Color Meanings in Dreams
• Understanding the Meaning
  of Colors – offers positive and negative associations with different colors
• Color Psychology and Color Meaning

The Visual Effect of Color in Your Designs

Using colors that don't work well together, using too many colors, or even not enough could drive people away before they have a chance to absorb your content. Ideally you should plan and choose a color scheme from the start and you should be consistent in how you use color in your design.

Color is used to attract attention, group related elements, convey meaning, and generally enhance the aesthetics of your site. It can be used to organize your elements and create a visual hierarchy in your design.

A small dose of color that contrasts with your main color will draw attention. It will give emphasis. Repeating colors on elements like page headings gives an immediate visual cue that those headings are related.

Warmer colors advance into the foreground while cooler colors recede into the background. Your choice in warm and cool colors can affect the figure/ground relationship of your elements. Since cooler colors recede you may decide to use them for background elements and because warmed colors advance they make a good choice for elements in the foreground.

By mixing warm and cool colors you can create depth in your design. Consider Van Gogh's Cornfield with Cypress above. Color is not the only way Van Gogh gives depth to the painting, but notice how the colors add to the depth. The mountains, sky and clouds use cooler colors, while the cornfield uses warmer colors.

You might choose a warmer color for the type on top on an image to ensure it's seen. Naturally it depends on the colors in the image as it will be more important to make sure the text color contrasts.

Darker colors tend to be seen first and carry more visual weight. A larger area of a lighter color is necessary to balance the visual weight.

Highly saturated colors (pure hues) are perceived as more dynamic. They attract attention. Too many saturated colors can compete and cause eye fatigue. Desaturated colors lend themselves to performance and efficiency. They might be a better choice to help people complete a specific task. Desaturated/Bright colors are perceived as friendly and professional. Desaturated/Dark colors are seen as serious and professional.

Be careful about using too many colors. You want to limit colors in the same way you limit fonts. You need enough to be able to offer contrast, but not too much to lack similarity. 5 colors is generally a good maximum, though you can use more. The more colors you use the harder it will be to use them effectively.

The following articles offer general thoughts on using color, color meaning, and color schemes

• How Colour Communicates Meaning
• How to Get a Professional Look With Color
• Choosing color combinations
• A Guide to Combining Colors & Color Schemes for Great Web Design
• Color Schemes: Designing Ideas for Using Color Palettes

How To Choose a Color Scheme

Understanding the meaning behind colors is one thing. Choosing a color scheme is another. Usually when deciding on a color scheme you'll begin with the dominant color. This might come from existing marketing material like a logo or brochure.

Another way to choose dominant colors is to think of the words you would use to describe the company and the company site. What kind of emotional response do you want people to have when looking at your design. What associations do you want them to make with the site and the company behind the site.

McDonald's for example uses red and yellow because those colors increase appetite and lead to impulsiveness. Perfect when you're selling fast food. IBM on the other uses blue (as do many corporate entities) in order to associate feelings of trust and stability with their brand.

Think of the brand your design is representing and what kind of associations you want people to make and choose colors accordingly. I find it helpful to quickly brainstorm words that describe the brand and then consider color meanings above.

The color schemes we talked about last time also play a part in the associations. Just as an individual color might convey a certain meaning, so too might the combination of colors convey meaning.

Monochromatic color schemes look clean and elegant and are effective at establishing an overall mood. They produce a soothing effect and are very easy on the eyes. This is especially true when using blue and green. Monochromatic color schemes tend to be very unified and harmonious. The downside is they can become monotonous due to the lack of hues. To combat monotony try to mix your monochromatic tones with pure white and/or pure black.

Complementary color schemes look best when a warm color is used against a cool color. This creates an intrinsically high level of contrast and creates a dramatic look. Complimentary colors intensify each other and are extremely eye-catching and vibrant. The downside is they can be too vibrant and jarring and can actually cause the colors to appear to vibrate. Contrasting colors are typically bad for text. This is especially true at full saturation so be sure to use different tones of contrasting colors to lessen these negative effects.

Analogous color schemes are similar to monochromatic color schemes but they offer more nuances as they draw from a wider band on the color wheel. They are often found in nature, are harmonious and pleasing to the eye, and can be very versatile. You typically want to choose one color to dominate (the middle color), a second to support the main color, and a third color for accents. Make sure to have enough contrast. Use tones, shades, and tints to add interest.

Triadiic color schemes offer a strong visual contrast while still retaining harmony and a richness of color. They aren't as jarring as complimentary colors. They can be vibrant even when the colors are unsaturated and they have stability because each color in the triad balances the other two. There is a simple relationship between the colors which can be dynamic though also garish if not done well. Use one of the colors as the dominant color and the other two for accents.

Split Complementary color schemes offer high contrast without the strong tension of complementary color schemes. While it can be hard to harmonize the colors in a split complementary scheme they often make a good choice for beginners as they are difficult to mess up. They have more variety than complementary color schemes, though they're less vibrant and attention grabbing.

Tetradic color schemes can be hard to harmonize and may look unbalanced. Tetradic colors make for a rich color scheme with lots of variation. They are even more varied than split complementary color schemes, though that also makes them less vibrant. Pay careful attention to the balance between warm and cool colors. Choose one color to dominate and use the other colors in a supporting and more subdued way.

In any color scheme make sure to use various tones, tints, and shades to avoid being boring or at the other extreme overwhelming. A great tip I picked up from the last of the recent Smashing Magazine series on colors is the following:

One of the simplest ways to create a professional looking color scheme is to take a few tones, tints, and shades of a given color (avoiding the pure hue), and then add in another pure hue (or close to pure) that's at least three spaces away on the color wheel (part of a tetradic, triadic, or split-complementary color scheme) as an accent color. This adds visual interest to your color scheme while still retaining a sense of balance.

Thanks Cameron!

Also make sure to add neutral (black, white, gray) and accented neutral (tones of brown) colors to your scheme. Blacks and whites will be cooler. Browns will come across as warmer and grays will be either warm or cool depending on the surrounding colors.

The following links will take you to places that can help you choose a color scheme.

• Kuler from Adobe – Plenty of existing color schemes to choose from. There is also an Adobe Air application for download. The link is directly to the download. You'll need to have Adobe Air installed to run the application.
• Colour Lovers – Another great site for all things color.
• Color Scheme Designer – an online application to help you choose a color scheme
• The Color Wizard – an online application to help you choose a color scheme
• Different Methods for Choosing Color Schemes in Web Design – links to a variety of applications for choosing a color scheme, including those mentioned above.

Accessibility

When we think accessibility we sometimes forget color, but it's important to remember that many people have some kind of color vision impairment. For example if the only distinction between your text and background is one is red and the other green, people with red/green color blindness are going to have difficulty reading the text.

Keep in mind that a large number of people have limited color vision. As important as color is, your design should still work in the absence of color. Don't show similarities and differences only in terms of hue as some people may have difficulty distinguishing between hues. Make sure to use a variety of tones, values, levels of saturation.

Above is the current home page of this site converted to grayscale. Probably not perfect, but you should still be able to see different elements clearly and still be able to read the text. There's enough contrast even at grayscale to recognize where one elements changes to the next.

The following resources will offer more information about accessibility in regards to color as well as applications for evaluating the color in your own designs.

• Color Theory for the Color-Blind
• Gray Bit – the tool I used to create the grayscale image above
• Color Contrast Comparison – a tool allowing you to compare how well any two colors contrast
• Luminosity Colour Contrast Ratio Analyser – a tool allowing you to compare how well any two colors contrast
• 14 Brilliant Tools for Evaluating Your Design's Colors – links to a variety of tools for testing the colors in your designs.

Summary

There's a lot to digest here as there is with color in general. A few key points to keep in mind when working with color.

Color does affect us in several ways and while your design shouldn't rely on color alone, your choice in color will be one of the first things people notice and could determine whether or not people leave quickly or stick around for more.

While there is no intrinsic meaning to color, we've culturally assigned meaning to colors based on how and where we see them used most often.

In addition to meaning, color can be used to impact your visual design in creating hierarchies and adding depth. Color will impact your visitors beyond any meaning that is conveyed.

Not only do individual colors have meaning, the combination of colors into schemes transfer additional meaning.

The 7 Components of Design

• Unity
• Gestalt
• Space
• Dominance
• Hierarchy
• Balance
• Color Part I: Color Theory
• Color Part II: How to Use Color

« Prev Post Next Post »

Download a free sample from my book, Design Fundamentals.

Color As A Web Design Tool

Source: https://vanseodesign.com/web-design/color-meaning/

Posted by: murphyroyshe.blogspot.com

Share this post