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
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
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.
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
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
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
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.