How To Use Color To Enhance Your Designs

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.

Photoshop color picker in saturation mode

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

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

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

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

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

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

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

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

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

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

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.

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.

cornfield-with-cypress.jpg

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 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 scheme

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.

complimentary color scheme

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 scheme

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.

triadic color scheme

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 complimentary color scheme

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 scheme

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.

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.

van seo design home page in grayscale.jpg

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.

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

Download a free sample from my book, Design Fundamentals.

29 comments

    • Thanks. I appreciate the kind words. It was fun researching this post. I knew the general meaning behind each color, though I did find a lot more details as I researched.

      I wasn’t aware of all the meaning behind the different color schemes though so I learned a lot myself in writing the post.

  1. I knew about a lot of those color combinations and their meanings, have thought so deeply about other schemes or adjusting for color blindness. Usability is a whole nother field.

    • I know what you mean. Mostly I think as long as you present enough contrast between colors you’re going to be fine where color blindness is concerned. Make sure your design looks good in grayscale.

  2. Very nice and informative post I didn’t think any designer or SEO notice these things. Your post is a valueable information for my knowledge and I should implement it in my seo campaign.

  3. This information on colors and their implications is very helpful for those who are designing a logo for a new business. Colors chosen for a logo may be related to an industry or they may be chosen for other reasons. Keeping these tips in mind is a great way to choose a color that helps send an accurate message to your audience.

  4. Your opening statement essentially sums up how important colour is in our lives. And it is so importnat to bear in mind how others will see the colours we use. Very good post with good explanations. Thank you.

  5. Hello Steven,

    Generally people phycology is depend on good layout and color combination of web design. If your web design and layout is awesome then people are force to stay at your website. And you gain boom website traffic.

    You make me just Speechless.You done such a amazing job by aware to importance of colors in Web Design. You describe different colors very nicely, deeply and yes most unstably way.

  6. This is by far the most helpful link on using color that I’ve found. It has really helped me go from just painting rainbows on everything to actually choosing colors correctly. I guess I’ll finally stop ruining compositions with color.
    P.S. I must say, however, that after reading the full page, I found at least four mayor spelling and usage errors … you might want to fix those to make your website more professional and to make the text easier to understand. (Just trying to help!)

    • Thanks Roman. I’m glad you found the post helpful.

      I think I found all the typos you noticed. No need to apologize for pointing them out. I’m glad you did. :) If there are more that I didn’t catch feel free to let me know what they are. It’s always appreciated.

  7. im an fine arts student im still have a hard time wich color to use?..explanations to deep..im so jelous you guys know hot to use colors ;(

    • I’m still learning to use color myself. I also have a hard time deciding which to use at times. I have my tricks for helping me and I do what I can to learn more. The best way to learn is to try different things and see if they work.

  8. Thanks so much for putting together this good article! I wonder if it’s possible for someone to address a question that, oddly enough, I’ve had trouble finding.

    An overall color palette is one thing, knowing how to apply 6 colors to different typographic and navigational elements without looking like a rainbow is the challenge.

    What’s the rule for applying the colors across a web property? What colors, left to right (or whatever), are applied to which elements? Does it start with site body and move inward to content wrapper, etc., ending with followed links or something?

    Some sort of best practice method would be very helpful.

    Thanks again!

    • Thanks Harry. I’m glad you found the post helpful.

      I don’t think there are any absolute rules for which color to use where. It’s like choosing typefaces. You want to understand what each color and what your overall color combinations are communicating and deciding if that fits with what the site itself is trying to communicate.

      As far as which element you might you might add color to first that also depend, though I try to choose a dominant color first that will apply to large areas of background and from there choose subordinate colors that work well with the first.

      Ultimately I think it comes down to experience and decision-making on each project more than anything else. Some of the sites I’ve come across where I really liked the color scheme break rules I’ve come across. In the end a lot of color choice comes down to your own eye and some knowledge about what your colors are communicating.

Leave a Reply

Your email address will not be published.

css.php