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 redThe 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.
The psychology of yellowYellow 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 orangeOrange 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 greenGreen 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 blueBlue 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 purplePurple 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 brownBrown 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 blackBlack 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 whiteWhite 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 greyGrey 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 pinkAlthough 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.
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.