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 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 thecombination 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
Download a free sample from my book, Design Fundamentals.
Best post I’ve ever seen on web design Color. I really appreciate your efforts behind this post. Thanks for sharing great tips.
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.
Even after a decade this post is still relevant. Great post!
Hi Steven! You are doing really great job. Your post are very educational and useful. Thanks!
Thanks alfiks.
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.
This is just amazing! I will share this information to my cousin. He really likes this. Thanks a ton for putting this out.
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.
Hi Steven,
Your Post really like my Designer, very great post and very valuable information post and share with world
Glade to nice post
Good article on color selection and palettes. Thanks!
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.
Glad I could help.
Very useful info for me, especially about color schemes. I like orange color and now I have an idea about color combinations with it, thank you.
Nice post. This tutorial about Color must be in all books about design!
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.
Thanks Nuwan. I had to reread my opening statement to remember what I said. 🙂
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.
Yes colors have great importance in web design. That’s why i always try to give best combination to my arts.
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.
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.
Hello,
Thanks very much for the whole series – finished reading it once, and will read it again as I put it in to practice. Very useful.
Best regards
Neill Jones
I’m glad you enjoyed the posts Neil. Thanks for the compliment.
Amazing write up about colors and color harmonies. Very thorough and extremely useful. Thanks
Thanks Abdullahn. I’m glad you enjoyed the post.
great post. I thought you should know since it was really informative. Thanks for sharing!
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.
This is so helpful and encouraging.
Thanks Emmanuel. I’m glad you enjoyed the post.
It was awesome. I havd never seen such a complete and totally practical information in any website. Thanks a lot.
Thanks Farzane. I’m glad you enjoyed it.
Wow! I was glued from the very first word to the last. Very rich, crisp and wholesome explanations. So apt, easy to understand and interesting way of presentation. I was looking for how to combine navy blue and purple as dress code for my cousin’s wedding and decided to search the net only to land more than i hoped for. Thanks Steve. You did great. I suppose from what i’ve read, dusty purple would compliment navy blue? We would be wearing dusty purple with a touch of navy blue. Thanks again Steve. Great job
Thanks Amba. I’m glad you enjoyed the post. I hope all the dresses turn out well. I guess with the blue and purple you’d be using something of an analogous color scheme.
I have a small building that is a dim yellow, its going to be my little shop of candles, and I want to paint letters on it and need to know whats the best colors to paint them.
Hi, So what did you decide? Where is your shop located? Do you do your own design or buy from like yankee candle or something? I would love to hear what you did and why.
michele
Hi steven you have the real potential to deliver your knowledge…keep it up
wow and wow. I’m designing a site for my small shop that sells vintage jewelry, mostly vintage sterling silver with turquoise and coral and lapis with sand and citrine. I’m so glad i read this article. ive had no luck with getting a logo designed. I get back pink letters and stupid fonts. I’ve been very nervous about my ideas but your article gives me hope that I am on the right track and not too far off. I mean turquoise and coral are rich colors and I think immediately make you think of the southwest and georgia o’keefe and bold sunsets.
anyway thanks for this article. i know you spent a whole lotta time getting this concise article from the many many articles, books, and ideas out there about the use of color.
So thank you for your time.
Thanks Michele. I’m glad I could help inspire you a little. Be confident in your ideas. That’s the main thing. Listen to feedback, but don’t assume other people know better than you do. Take the feedback and think about it and decide for yourself. The more you can do that objectively, the more confident you’ll be about your designs.
Amazing guide!
Thanks for sharing such an in-depth guide!
Excellent article on color harmonies and colors. Comprehensive and very helpful. Many thanks.