The Psychology of Color in Web Design: Part 1

Color is powerful. It influences not only how people feel, but what they do. The psychology of color can help strengthen your brand, encourage sales, and even guide visitors toward specific pages or actions on your website.

The power of color

Studies show that people decide whether or not they like a product in 90 seconds or less and that 90% of that decision is based solely on color. Research also shows that color can increase brand recognition by 80%.

In Part 1 of this two-part series, you will learn the meaning behind specific colors and when to use (and avoid) those colors. Let’s get started!

 

The psychology of color in web design

It’s no accident that so many popular social networking sites (Facebook, Twitter, LinkedIn, and Tumblr) and tech brands (Dell, IBM, HP, and Intel) have blue logos. But that doesn’t mean that blue is right for your website. And even if blue IS perfect for your site, don’t forget to think about other colors you should use with it (and where).

If you understand how color affects people, you can make sure that the colors in your website design are working for rather than against you.

Let’s take a look at some color basics:

 

The psychology of red

The color red can actually increase a person’s heart rate and cause them to breathe faster. Red is associated with lust, excitement, love, energy, and movement. It also has some potentially negative associations including war, violence, fire, anger, and danger.

  • When to use red
    Use red as an accent color to draw attention to something, or to create excitement. Red can be good for food, fashion, entertainment, sports, marketing, advertising, emergency services, and health care.
  • When to avoid red
    Don’t overuse it! Too much excitement can be a bad thing. Red is generally not suitable for luxury goods, nature-related content, or professional websites/services.

 

The psychology of yellow

Yellow is the brightest color. It is associated with competence, happiness, cheer, optimism, and youth. Yellow also has some negative associations such as cowardice, deceit, and cheapness.

  • When to use yellow
    Use bright yellow (sparingly) to energize people or to create a sense of happiness. Use soft, light yellows for a calmer happy feeling. Yellow can be great for drawing attention to call to action text and buttons.
  • When to avoid yellow
    Yellow can quickly become overpowering. It can strain the eyes. Again, use it sparingly. Too much yellow or the wrong hue can feel cheap or spammy.

 

The psychology of orange

Orange is an energetic and vibrant color often associated with fun, happiness, energy, warmth, ambition, excitement, and enthusiasm. It can also be used to communicate caution.

  • When to use orange
    Draw attention to your call to action (subscribe, buy, sign up), clearance, sales, or other content you want to make sure people notice. It’s good for ecommerce, automotive, technology, entertainment, food, and childcare.
  • When to avoid orange
    Although orange is a bit less intense than red, it can still quickly become overpowering. Don’t overdo it!

 

The psychology of green

Green has a harmonizing, balancing effect. It is associated with growth, health, nature, wealth, money, calmness, masculinity, generosity, fertility, envy, good luck, peace, harmony, support, and energy.

  • When to use green
    Green is the easiest color for the eye to process. Use it to create a relaxing, calming effect or to represent new beginnings, nature, or wealth. It’s great for science, tourism, medicine, human resources, environment, and sustainability.
  • When to avoid green
    It’s less appropriate for luxury goods, tech, or content geared toward adolescent girls.

 

The psychology of blue

Blue is associated with masculinity, competence, quality, calmness, dependability, steadfastness, wisdom, loyalty, strength, productivity, trust, and security. Bright blues can also be refreshing and energizing.

  • When to use blue
    Blue is often used by large corporations and banks because it’s non-invasive and associated with dependability. It’s good for health care, dental, high-tech, medical, science, government, legal, and utilities.
  • When to avoid blue
    Using certain shades of blues (on the darker end of the spectrum), or using too much blue can make your website feel uncaring and cold. Blue may also curb appetite, so be careful using it with food-related content.

 

The psychology of purple

Purple is associated with royalty. It can be used to communicate creativity, imagination, authority, sophistication, power, wealth, prosperity, mystery, wisdom, and respect.

  • When to use purple
    Use dark purples to create a sense of luxury and wealth, and use light purples for spring and romance. Purple can also be great for beauty products (specifically anti-aging), astrology, massage, yoga, healing, spirituality, and content related to adolescent girls and feminine brands.
  • When to avoid purple
    Purple can be soothing and calming which generally makes it a poor choice for grabbing people’s attention. The use of darker, deeper purples can make your site feel aloof or distant.

 

The psychology of brown

Brown is a warm, natural color associated with earth, ruggedness, reliability, stability, friendship, and nature.

  • When to use brown
    Brown can be used to stimulate appetite (think of commercials for coffee and chocolate), making it suitable for food-related content. It can also be a good fit for real estate, animals, veterinary, and finance. Brown is also typically better for backgrounds.
  • When to avoid brown
    Brown can be a bit boring or overly conservative. It’s generally not suitable for grabbing people’s attention and should not be used for call to action items.

 

The psychology of black

Black is a strong color often associated with sophistication, elegance, authority, power, sleekness, stability, strength, formality, and intelligence. It can also symbolize death, mystery, evil, and rebellion.

  • When to use black
    Depending on the colors used with it, black can be elegant and traditional, or modern and edgy. Black can be great for luxury goods, fashion, marketing, and cosmetics.
  • When to avoid black
    Too much black can quickly become overwhelming. Black can also feel menacing or evil, making people feel uncomfortable or even afraid.

 

The psychology of white

White is associated with purity, cleanliness, virtue, happiness, sincerity, and safety.

  • When to use white
    White is associated with doctors, nurses, and dentists which makes it great for websites related to the health care industry. It can also work for high-tech and science sites. When paired with black, gold, silver, or grey, white can also be great for luxury goods.
  • When to avoid white
    Since the effects of white depend almost entirely upon the other colors in the design, it can theoretically be used for any type of website.

 

The psychology of grey

Grey is associated with formality, professionalism, sophistication, practicality, timelessness, and strong character.

  • When to use grey
    It’s great for professional websites, luxury goods, or to create a balancing, calming effect.
  • When to avoid grey
    Certain shades of grey may feel dull and detached, or even cold. Grey is not ideal for grabbing people’s attention.

 

The psychology of pink

Although pink is a tint of red, it has some very specific associations beyond those of red. Pink represents sophistication, sincerity, romance, and love. It does not have the violent, angry connotations of red, and it can be quite soothing and gentle.

  • When to use pink
    Pink is great for feminine products or sites with content specifically geared towards women and young girls.
  • When to avoid pink
    Bright pinks can be gaudy and light pinks can feel too sentimental or sweet for some sites.

 

I hope you’ve enjoyed the first part of this series. In Part 2, I will discuss the psychology of color and gender, color palette tools, color combinations you should avoid, and how to use color to increase conversions.

What’s your favorite color, or colors, for websites? Feel free to share an example in the comments below!

 

Follow Me

Dawn Bowman

Managing Editor at KillerStartups
Dawn is an American artist and journalist currently living in SE Asia. She is the Managing Editor at KillerStartups, an online publication which focuses on tech startups, website development, and entrepreneurship. Dawn is passionate about travel and committed to the location independent lifestyle. Follow her on Twitter @DawnEBowman.
Follow Me
The Psychology of Color in Web Design: Part 2
Web Graphics for Beginners: A Best Practices Handbook

6 Comments

    • Thanks, “Psychology.” That’s great info.

      Reply
  1. This is very essential blog; it helped me a lot that you have provided.Your blogs are easily accessible and quite enlightening so keep doing the amazing work. Thanks for sharing this such a very great post.

    Reply
    • Thanks for the awesome feedback, Andrew. Please let me know if there’s anything specific you would like to see us cover in the future.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>