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.
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 redUse 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 redDon’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.
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 yellowUse 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 yellowYellow 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 orangeDraw 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 orangeAlthough 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 greenGreen 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 greenIt’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 blueBlue 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 blueUsing 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 purpleUse 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 purplePurple 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 brownBrown 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 brownBrown 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 blackDepending 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 blackToo 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 whiteWhite 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 whiteSince 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 greyIt’s great for professional websites, luxury goods, or to create a balancing, calming effect.
- When to avoid greyCertain 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 pinkPink is great for feminine products or sites with content specifically geared towards women and young girls.
- When to avoid pinkBright 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!