How to Use Color Psychology in Your Web Design Projects

How to Use Color Psychology in Your Web Design Projects

How to Use Color Psychology in Your Web Design Projects

McDonald’s, Burger King, Pizza Hut, KFC — what do all these restaurants have in common, besides cheap, greasy food? If you guessed the color red, you’re right. Their logos and the inside of their eating establishments have been carefully designed to include red. According to color psychology, red stimulates your appetite by exciting you and drawing you in.

Billions of dollars spent on cruddy tacos and burgers that never decompose can’t be wrong. Color psychology doesn’t just work in the offline world, though. It can be a great tool for web designers, too, helping to do anything from increase conversion rates to conveying the right vibe for a business. Here are ways that you can use the psychology of color in your web design projects.

What’s Your Goal?

The first thing you need to figure out before determining the right color palette for your audience is what your goal is. The argument for this is pretty powerful. One study found that it takes just 90 seconds for people to form an opinion on a product and 90 percent of that opinion can be determined by the colors used in the product.

Different goals require different approaches because they play to different audiences. For example, if you are designing a site for a clown who performs at kids’ parties, you’re going to want an upbeat, bouncy color scheme. You want to encourage people to think of your client as fun. But, if you’re designing for a funeral home, you’ll want a toned-down, low-key scheme. You want people to think of your client as serious.

Read more: 7 Ways to Amplify Your Email Marketing Strategy

The ultimate goal of any website, of course, is conversions and you can use color to funnel people toward a conversion. Use a color for your call-to-action button that stands out from the rest of your color scheme to make it stand out and drive more conversions. Bold colors tend to work best for this.

Who Is Your Audience?

Just as important as determining what your goal is for your client’s site is determining who the audience is. Here’s where the psychology of color can really come into play. Different colors play to different audiences.

For instance, it’s been shown that men and women gravitate toward very dissimilar colors. Say you are working on a website that targets women, such as a dress shop. You’ll want to play up the green, blue and purple, as those colors are preferred by females. But if you’re targeting men, say on a site that sells razors, you’d be wise to drop the purple and instead use black, because men respond better to that color.

The Right Color for Your Goals and Audience

Here’s the fun part: Figuring out which colors are best suited to what you’re designing. Once you’ve learned about the psychology behind how colors affect our emotions, you can start piecing together on your own what colors may and may not work with your client. Here’s a quick look at the most popular colors and what emotions they’re best at targeting.

Red and White Fleet

1. Red

Red conveys strength, passion and love. It’s best for sites that want to show energy. Red is a bold and aggressive color and it can be used to suggest the strength of the brand on a website. The target audience for bright red is young people because it suggests a certain “throw caution to the wind” personality, while deeper reds can indicate a rich history and appeal more to older audiences.

Red & White Fleet, pictured above, offers historic cruises of the San Francisco Bay that have been going for over 100 years. The rich red matches the cruise vessels and lends a sense of strength to the brand.

PayPal Homepage - Blue Color

2. Blue

Blue conveys trustworthiness, order and peace. It is best for sites that deal with money. Have you ever noticed that PayPal’s color scheme emphasizes blue? In the example above, PayPal uses blue most prominently where it counts – in their logo, sign up button, and call to action.

There’s a good reason for that. The site wants you to think it will take good care of your money. The target audience is professionals, as well as men and women, who both like blue.

Vista College

3. Orange

This color conveys friendliness, vibrancy and creativity. It’s best for artsy or entertainment sites. Orange is not a bold choice but a comfortable one, which conveys energy without the risk of a red.

Learn more: 10 Facebook Tools for Business & Marketing in 2014

It does grab the eye and it can be employed on retail sites to draw attention to sales offers. Younger people are drawn to this color, which is why Vista College uses it heavily in their branding. Orange is not a strong favorite among men or women, but it is heavily used to advertise children’s wares and sports teams.

100 Happy Days

4. Yellow

Yellow conveys cheerfulness, optimism and warmth. It works best on sites for children. Yellow is a youthful color and its brightness suggests a vibrancy that older people have more trouble relating to. Younger people, who have yet to grow cynical, relate to this color much more; #100HappyDays plays on this fact by challenging their visitors: “You don’t have time for this, right?” At a certain age, yellow can appear juvenile, but it’s effective in selling the positive outlook that many young people treasure.

Amish Outlet Store

5. Brown

The color brown conveys a sense of sturdiness and peacefulness. It is honest, down to earth, and sensible. It appeals more to older people rather than younger, and tends to be used subtly on the web, as a background tone rather than for highlights or buttons. It is often paired with green, and can give a sense of organic or homemade appeal.

In the example above, Amish Outlet Store is channeling all of these qualities – their Amish-made, solid wood furniture is about as sturdy and practical as it gets.

Baker Lime

6. Green

This color conveys environmental awareness, earthiness and friendliness. It’s known for sites with an environmental bent. Going “green” is literally a thing, so it’s no surprise that the color conveys the eco-awareness so many strive for these days. Conscientious, earth-loving types who care about their carbon footprint are attracted to this color. It’s a popular color among both men and women, too.

Baker Lime, whose website is pictured above, uses green heavily in their background, imagery, and buttons. They sell limestone that reduces soil acidity for farmers, and to appeal to an audience suspicious of chemicals and unnatural products, they rely on green to send an unspoken message of earth-friendliness and responsibility.

Yahoo! Homepage

7. Purple

Historically, purple has conveyed a sense of royalty; this is because the dyes used to creative purple clothing and other materials were quite expensive and could only be afforded by the very wealthy. In modern times, purple is still used to convey a sense of luxury, but it also represents eccentricity and the balance between the excitement of red and the calmness of blue. In fact, it can lean one way or the other depending on tone.

Yahoo has at times flourished and at times floundered as a sort of alternative technology company to Google. Purple is a frequent highlight color on their homepage, from their logo to subheadings and navigation.

Once you understand how colors inherently provoke emotions in your visitors, it becomes easier to select colors that will appeal to your visitors, speak to your authenticity, and get your customers to buy.

Author Bio

Adrienne Erin is a freelance writer and designer based in Pennsylvania. She loves picking apart great designs to see what makes them work. To see more of her work or get in touch, follow @adrienneerin on Twitter or visit her blog, Design Roast.

6 COMMENTS

  1. Interesting read. I could relate easily with a lot of great websites. I never realized why it made more sense to keep a book and reading website with brown color. I actually chose green for one of my book review websites. I hope its not terrible awkward looking.

  2. One you don’t mention is white! Or grey for that matter, but they’re close enough. White conveys cleanliness but it’s a great way to make your website seem neat and precise especially if content is laid out well. A white color scheme can make any other use of color on a website pop, drawing more attention than usual. In general, white/grey give websites a sense of authority but be careful, if content is bare or the website seems empty in general, the overall feeling can make a website appear spammy or cheap. White/grey has to be utilized properly! Great post otherwise!

    • Hi Carver! You’re very right – white is really a clean, modern, authoritative color (or really… absence of color) when used well. It’s also a perfect accompaniment to all the other colors on this list. :) Thanks for your comment!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.