The Psychology of Color

Whether you’re defusing a ticking time bomb, or trying to design a decent-looking site, if you choose the wrong color—you’re doomed. Okay, so the wrong color selection for a client’s site might not be the death of you, but it could curtail your budding career as a web designer. Choosing colors is no simple matter. There are aesthetic, identity, and usability considerations to take into account. And, to make matters worse, most modern displays can render more than sixteen million colors. That’s an infinite number of horrible color combinations just waiting to happen!

Fortunately, there’s no need to be a swatchbook-carrying color consultant to make good color choices. A wealth of knowledge is available, from touchy-feely (as I like to call them) psychological guidelines to tried-and-true color theories that will help you make the right choices when it comes to color.

Color psychology is a field of study that’s devoted to analyzing the emotional and behavioral effects produced by colors and color combinations. Ecommerce website owners want to know which color will make their website visitors spend more money. Home decorators are after a color that will transform a bedroom into a tranquil Zen retreat. Fast-food restaurant owners are dying to know which color combinations will make you want to super-size your meal. As you can imagine, color psychology is big business.

Although it’s important to know how your color choices might affect the masses, the idea that there’s a single, unified, psychological response to specific colors is spurious. Many of the responses that color psychologists accredit to certain colors are rooted in individual experience. It’s also interesting to note that many cultures have completely different associations with, and interpretations of, colors. With those caveats in mind, let’s explore some general psychological associations that the majority of people in Western cultures have in response to specific colors.

Color Associations

Describing the emotional connections that people can have with colors can be a very hippy-esque topic. If you find that hard to believe, just head over to your favorite online music store and sample some tracks from Colors by Ken Nordine. Although most designers will stop short at relying solely on the supposed meanings, characteristics, and personalities of specific colors, it’s still handy to have an understanding of the emotional attributes of some of the main color groups.

Red

The color red has a reputation for stimulating adrenaline and blood pressure. Along with those physiological effects, red is also known to increase human metabolism; it’s an exciting, dramatic, and rich color. Red is also a color of passion. Nothing says love like painting a wall bright red on Valentine’s Day for your sweetheart, as seen in Figure 1.1, “Red, the color of affection (two gallons of it!)”. The darker shades of red, such as burgundy and maroon, have a rich, indulgent feeling about them—in fact, they can be quite hoity-toity. Think about these colors when designing anything for wine enthusiasts or connoisseurs of fine living. The more earthy, brownish shades of red are associated with the season of autumn and harvest.

Photos of a man standing in front ofa wall painted in a strong red background with an inviting Valentine message on it.
Figure 1.1. Red, the color of affection (two gallons of it!)

Orange

ike red, orange is a very active and energetic color, though it doesn’t evoke the passion that red can. Instead, orange is thought to promote happiness, and represents sunshine, enthusiasm, and creativity. Orange is a more informal and less corporate-feeling color than red, which is perhaps a reason why the designers behind the location-based service Gowalla chose it for their logo. Because orange doesn’t show up often in nature, it tends to jump out at us when we see it. For that reason, it’s often used for life jackets, road cones, and hunting vests. Since orange also stimulates metabolism and appetite, it’s a great color for promoting food and cooking. That’s probably why the picture of a tangerine in Figure 1.2, “Orange you glad I didn’t say banana?” is making you hungry, even if you don’t like citrus fruits.

A photo of three vibrant oranges, one cut open into half.
Figure 1.2. Orange you glad I didn’t say banana?

Yellow

Like orange, yellow is an active color, and being highly visible, it’s often used for taxicabs and caution signs. It’s also associated with happiness and, as Figure 1.3, “Yellow, the color of smileys” illustrates, is the signature color of smileys. The original orange and lemon-lime flavors of the sports energy drink Gatorade are still the best-selling of the brand’s products; this is likely due, in part at least, to the energetic characteristics associated with the colors orange and yellow.

Photo of two yellow spheres with large smiley faces on them.
Figure 1.3. Yellow, the color of smileys

Green

Green is most commonly associated with nature. It’s a soothing color that symbolizes growth, freshness, and hope. There’s little doubt why the color has been so closely tied with environmental protection. Visually, green is much easier on the eyes, and far less dynamic than yellow, orange, or red. Although many website designs using green appeal to visitors’ sense of nature, green is a versatile color that can also represent wealth, stability, and education. When bright green is set against a black background, it really pops—giving the design a techy feel. For me, it brings back memories of my first computer, a trusty old Apple IIe. This was the inspiration for the MailChimp loading screen I designed recently, shown in Figure 1.4, “ASCII version of Freddie Von Chimpenheimer IV”.

A screenshot of the ASCII version of Freddie Von Chimpenheimer IV, MailChimp loading screen.
Figure 1.4. ASCII version of Freddie Von Chimpenheimer IV

Blue

When I was a kid, my favorite color was blue. Not just any blue, but cerulean blue from Crayola crayons. While most kids are less particular, blue is often cited as the universally favorite color. On the touchy-feely level, blue symbolizes openness, intelligence, and faith, and has been found to have calming effects. On the other hand, blue has also has been found to reduce appetite. This is probably due in part to the rarity of blue in real food. Aside from blueberries, how many naturally blue foods can you count? Blue, it would seem, is excluded from nature’s appetite-inducing palette; therefore, it’s less than ideal for promoting food products.

In addition, blue is sometimes seen as a symbol of bad luck and trouble. This emotional color connection is evident in blues music, as well as in the paintings of Picasso’s depression-induced “blue period.” It’s not all about unnatural food colors and melancholy forms of art, though; blue has universal appeal because of its association with the sky and the sea. For me, the presence of blue in the stacked stones image in Figure 1.5, “Calming stones, sky, and sea” makes me feel more at ease.

Photograph of a number of flat stones piled carefully onto another with a fantastic bright blue sky background at the seaside.
Figure 1.5. Calming stones, sky, and sea

This visual connection makes blue an obvious choice for websites associated with airlines, air conditioning, pool filters, and cruises. Have you ever noticed that blue is the primary color in the logos of IBM, Dell, HP, and Microsoft? That’s because blue also conveys a sense of stability and clarity of purpose … that is, until you’ve experienced the blue screen of death!

Purple

Historically, the color purple has been associated with royalty and power, as it is on the postage stamp in Figure 1.6, “Purple coat of arms on a Norwegian postage stamp”. The secret behind purple’s prestigious past has to do with the difficulty of producing the dye needed to create purple garments. To this day, purple still represents wealth and extravagance. That extravagance is carried over into nature. Purple is most often connected with flowers, gemstones, and wine. It balances the stimulation of red and the calming effects of blue. According to Patrick McNeil, author of The Web Designer’s Idea Book,1 purple is one of the least-used colors in web design. He explains that finding good examples of website designs featuring purple was so hard that he almost had to cut the section from his book. If you’re trying to create a website design that stands out from the crowd, think about using a rich shade of purple.

Scan of a Norwegian postage stamp featuring a white coat of arms design on a purple background.
Figure 1.6. Purple coat of arms on a Norwegian postage stamp

White

You might think there’s nothing special about the color of the wind turbines in Figure 1.7, “These wind turbines might be white, but they’re also green”, but the use of white actually helps promote the idea that this is clean power. In Western cultures, white is considered to be the color of perfection, light, and purity. This is why crisp white sheets are used in detergent commercials, and why a bride wears a white dress on her wedding day. For an idea of how ingrained the meaning of white is in our culture, read the poem Design by Robert Frost.2 In it, Frost symbolically contradicts our associations by using white to represent death and darkness. Interestingly, in Chinese culture, white is a color traditionally associated with death and mourning. Such cultural distinctions should serve as a reminder to research the color associations of your target audience, as they may vary greatly from your own perception.

In design, white is often overlooked because it’s the default background color. Don’t be afraid to shake it up, though. Try using a dark background with white text, or put a white background block on an off-white canvas to make it pop. Using colors in unexpected ways can make a bold statement.

A photo of a green, slightly hilly landscape with a handful of wind turbines in the background.
Figure 1.7. These wind turbines might be white, but they’re also green

Black

Although black often suffers from negative connotations such as death and evil, it can also be a color of power, elegance, and strength, depending on how it’s used. If you’re considering using a particular color and are wondering what the associations are for that color, just ask yourself, “What are the first three things that come to mind when I think about this color?” When I think about black, for instance, I think about Johnny Cash, tuxedos, and Batman. When I think about Johnny Cash, his dark clothing, deep voice, and sorrowful songs give a tangible meaning to the mental associations I perceive between the man and the color.

A photo of a sleek, stretch black 4WD limousine.
Figure 1.8. Black, a color that represents power, elegance, and in this case, exorbitance

If you treat all your color choices this way, establishing three word associations for each, chances are you’ll gain a good idea of how that color is widely perceived among your audience.

Even though color psychology plays a role in the way a visitor may see your site, keep in mind there is no wrong color to use. While psychological reasoning may help to start your palette, the success of a color scheme depends on the harmony that exists between all the colors chosen. To achieve this harmony, we’ll need to be mindful of a few other attributes of color.

References

  1. Patrick McNeil, The Web Designer’s Idea Book, How Books, Cincinatti, USA, 2008
  2. This can be found in many a good poetry book, but I used The Norton Anthology of Poetry (5th edition), eds Margaret Ferguson, Mary Jo Salter, and Jon Stallworthy, WW Norton & Company, New York, 2004.

The Principles of Beautiful Web Design

This article is from Jason Beaird’s The Principles of Beautiful Web Design book (second edition is out now!). Be sure to lookout for further articles from the book here on Design Festival.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.facebook.com/amrosama2020 Amr Osama Abosree

    very nice article

  • http://twitter.com/utweeting Umair Ulhaque

    Great post! I was just looking for the same as I am an average graphic designer but wanted to go in-depth of the colors and its usage well thanks for the stuff

  • cam londono

    Great article. There is a small mistake in the first paragraph of Orange (“ike” instead of “Like”)

    • Brenda

      Oh please! Even you figured it out.

  • http://twitter.com/intercommSA InterComm SAfrica

    I find this kind of information useful for clients in explaining logo and design choices. I “know” it’s right, but my clients are often accountants and engineers, and more comfortable with a logical, rational explanation.

  • Colorowdy

    Good article on psychology of color. I did a research paper years ago on the Psychological use of Color and Sex appeal in marketing. I learned about a group of “people” that dictate the “new” colors for each season. never did find out who the “people” are but these two factors weight heavily in marketing.

  • Richard

    The problem with this article is that most of the meanings that you have placed upon colours are culturally placed meanings and as such the context changes from person to person.

    For example, Red in China means “good luck”, but here in the west, often it means “danger” or “action”.

    This means that these advantages are limited only to those that these definitions are relevant to.

    The only testable things in design are factual.

    In “The elements of color: a treatise on the color system of Johannes Itten” on page 45 it talks about an actual “physical” psychological effect on the test subject from two colours.

    Red-orange was found to make people physically feel warmer and blue-green colder by around 5-7 degrees.

    These “physical” factors can and should be used to make colour work for us in our design far more than a cultural context does because it is universal.

    As such I think that the definitions provided here should be carefully examined before being used in any kind of design work and compared to the final product user/viewer.

  • http://twitter.com/ohjanellek janelle krumm

    Really fantastic descriptions about the different (and double!) meanings of colors.

  • http://www.frogsign.lt/ Astrauskas Marius

    Nice article about colors. Even in western culture white can have a negative meaning. In northern european countries white can be associated with cold and death.

  • Tasman Hayes

    Thanks for the great article Jason. I was thinking of using purple in a new logo and website design, and you’ve given me the courage to go for it!

  • http://www.partybaggers.co.uk party bags

    The meaning and interpretation of colors should not only be looked up into one side. It may define a lot of things. Just like what Richard had stated. Red may be a good luck sign for China, but in west it means DANGER.

  • Cormac_Flynn

    Excellent article.  Two very minor quibbles:

    One: The idea that white wedding gowns symbolizes purity is a modern myth.  They became popular in the wake of Queen Victoria’s shocking iconoclastic wearing of one.  They became a symbol of modernity, then, later of wealth,
    then finally, in the 20th century of tradition and/or breeding.

     

    Two: Batman doesn’t wear black.  He wears blue and grey.  Medium tones in the comics and old TV series, dark navy
    tones, graphite, and charcoals in the new S&M-inspired move costumes.

  • Kirsti

    Nice article! There are lots of other things to take into consideration when selecting colors including color harmony, color blindness, cultural differences, personal
    preferences, color trends, and your particular situation. (See http://blog.hotdesign.com/2011/11/selecting-colors-for-websites/) I’m currently doing a survey on color preferences based on culture, age, and gender. Let me know what your favorite color is and see realtime worldwide results at http://www.surveymonkey.com/s/B8JWP2K »

  • http://moonrose-pix.blogspot.com/ Elizabeth Munroz

    Two things about yellow. There is a test occasionally given to psych patients to determine how depressed they are. Yellow means happiest. Black means most depressed. Also, according to Mensa, the favorite color of most with high intelligence is yellow.