fbpx

3 Color Psychology Tips for Website Design and Branding

color psychology website design

Last Updated on by Micha McLain

Reading Time: 8 minutes

What is Color Psychology?

I’m really excited to cover this topic because it’s one of my favorites: COLOR. Most people have a preference, if not an absolute favorite. Everyone can associate a color to something meaningful in their lives. Some kids go through phases where they refuse to eat certain color foods. Colors can tell us when it’s safe to go through the intersection or not, without saying a word. Color is everywhere, and so is color psychology.

Color Psychology is the study of hues and how they can be determinate of people’s behavior.

Colors are powerful tools.

Remember that song back on the old school days of Sesame Street that Kermit sang lamenting his green-ness? Little did we know we were being introduced to color psychology in our formative years.

Now obviously Kermit has discovered his love for the color green– he created an emotional attachment to a color. Emotions dictate our actions every day. Color can be a powerful tool when used to influence other people by manipulating their emotions.

The psychology of color and how it can affect us is a case of classical conditioning based on emotion and experience- the subtleties of which for all of us can be on a subconscious level. In one study conducted by the University of British Columbia, a researcher paired different colored pens with pleasant or unpleasant music. At the end of the experiment, participants were more likely to take home a colored pen that was paired with pleasant music.

Those same researchers conducted tests with large groups of people to determine whether a person’s cognitive performance could be affected whether they were exposed to two primary colors: red or blue. Participants performed tasks with words or images displayed against red, blue, or neutral backgrounds (as a control) on computer screens. According to their findings, Red groups did better on tests of recall and attention to detail, like remembering words or checking spelling and punctuation. Blue groups did better on tests requiring imagination, like inventing creative uses for a brick or creating toys from shapes. The scientists concluded that tasks requiring enhanced memory and concentration are best done in a red room, while conducting a creative brainstorming session is most effective in a blue room.

Where am I going with this? Colors affect your mood and emotions, they affect your opinions, they affect your actions and decisions, and they are an unavoidably important factor to take into account when optimizing the effectiveness of your website design.

Tip 1: Color Influences Your Brand’s Perception

Colors Evoke Feelings

Do you think it’s an accident that McDonalds chose a bright red background behind those iconic Golden Arches? Or that Blue Cross Blue Shield’s cross and shield are… blue? These are carefully and meticulously calculated brand decisions made by color psychology and branding experts.

There’s a multitude of colors with a wide range of emotion-evoking connotation contrasts- But, here are a few of the basics and the boilerplate feelings they can evoke for a person:

color psychology

Red

Positives: Passion • Strength • Stimulation
Negatives: Hunger • Danger • Violence

color psychology

Blue

Positives: Trust • Security • Serenity
Negatives: Un-appatizing • Sadness • Detachment

color psychology

Yellow

Positives: Optimism • Cheerful • Creativity
Negatives: Caution • Anxiety • Cowardice

color psychology

Orange

Positives: Warmth • Exciting • Fun
Negatives: Immaturity • Frivolity • Frustration

color psychology

Green

Positives: Balance • Fresh • Nature
Negatives: Jealousy • Boredom • Stagnation

color psychology tips for website

Purple

Positives: Royalty • Spirituality • Vision
Negatives: Indulgance • Suppression • Moodiness

color psychology tips for website

White

Positives: Hygienic • Pure • Clean
Negatives: Sterile • Cold • Unfriendly

color psychology tips for website

Black

Positives: Sophistication • Luxury • Mysterious
Negatives: Oppression • Heavy • Menacing

Other Factors

Always consider your target market before choosing a color scheme– because it’s not always as black and white (color pun intended) as the examples above. Other factors come into play with people’s associations with color based on their past experiences, culture, and even gender.

Industry

For example, a bank teller might associate the color green with money, while a farmer would think of nature and freshness. A fashion designer might associate the color black with elegance and luxury, but for a funeral director, it may evoke feelings of mourning, sadness, and loss.

Culture

If your website or targeted marketing campaign is going to be viewed internationally, it’s best to do your due diligence as colors might possess harmful meanings in another culture. American culture associates black with death, however death is associated with white in Asia… and it’s purple for Brazilians. A study called “Issues of Corporate Identity in East Asia” took a deep dive into cultural differences with brand perception as companies in the US were seeking to compete with business in Asia. What the author found was America’s prime corporate color, blue, has a strong connotation of trust and security for us in the states. However, blue is considered in East Asia to be a cold color and carries associations of evil and sinister behavior.

Gender

As a society that reinforces gender stereotypes, being male or female can influence what color you are most drawn to and our expectations. Because most children feel a need to conform to their gender, males become drawn to blue, whereas females become drawn to pink- and that can carry into adulthood. Look in any drugstore deodorant aisle and you can easily pick out which shelf has the delicate, flowery female products with pink and purple hues and pastels… and the overtly macho-manly products with the strong blacks and blues.

Today, most parents would get strange looks if they dressed their baby boy in pink– yet this was the norm a hundred years ago. A June 1918 article from the trade publication Earnshaw’s Infants’ Department said, “The generally accepted rule is pink for the boys, and blue for the girls.” The big shift happened in the 1940s as a result of Americans’ preferences dictated to them by manufacturers and retailers and advertising.

SIDE NOTE: Want to know why most hyperlinks are blue? Red and green are the colors most affected by color vision deficiency. Almost no-one has a blue deficiency. That means nearly every one can distinguish blue as being different from its surrounding colors. Check out this article on designing accessible websites for the visually impaired. And DEFINITELY do some research on ADA compliance!

Tip 2: Want To Increase Conversions or Desired Action? Your Color Choice Matters!

A major and fundamental aspect of marketing is understanding how people think… and why they think it. Your website’s perception can be affected by your color choices in a multitude of aspects, even the perception of website loading times! An in-depth study by researchers at Hong Kong University found that cool, relaxing colors like blues, greens, and purples reduced perceived wait times while stimulating colors like reds and oranges increased perceived wait times… even though the sites loaded at the exact same speed.

Dmix conducted a test in which they pit green and red button colors against each other. In their testing with 600 subjects they found that conversions increased by 34% when they used red button. Another independent test was conducted by HubSpot and their result was that the red button outperformed green button by 21%. Those aren’t small potatoes– a 21-34% conversion rate increase could be HUGE for your business.

color psychology tips for website

Contrast Makes Things POP

You can use color to your advantage to capture peoples attention and drive an action. Our attention is naturally captured by stimuli that is visually salient. If one color dominates your page, and that color is also used for your CTA (call to action), it won’t stand out and it will be overlooked. If you want to guide attention towards something like a CTA button, choose a color that contrasts with the surrounding environment. Ript Apparel saw a 6.3% increase in sales– just by simply adding an eye-catching button. Check out their before and after and see if you can spot the differences:

Tip 3: Don’t have an Ugly Website

Whether you’ve ever been accosted by a cacophony of color that makes your eyes feel like they’ve been assaulted by psychedelic machine gun skittle bullets, or trudged begrudgingly through the bland and lumpy oatmeal doldrums– I think it’s pretty safe to say we’ve all visited a website that made us sit back and say to ourselves, “oh no baby, what is you doing?!?! We know what kind of a nightmare dealing with ineffective web design can be – you were promised a brilliant website design, but all you received was a big, hot mess. And if you feel personally attacked right now, you may need to fire your current website designer.

Another issue that we’ve come across is near-illegibity due to a case of low contrast of copy to the background. Ideally, neutral colors like black, white and grey are used for the background, whereas brighter colors are used for details and other foreground elements. With not enough contrasting color, like in the Ript Apparel “before” example above, your important details get overlooked because your eyes can’t immediately tell what’s supposed to be the focus. Too many colors can be unnerving as well. Most people would never leave the house wearing the clashing colors they pile on their websites. If you wouldn’t want to look at them, what makes you think your visitors would?

Besides attracting visitors like a moth to Times Square at night, basic website design rules dictate that it should effectively display the message you’re trying to present such as your business objective, plan of action for visitors, and the quality content you’ve worked so hard to create. You should treat each page as a journey for your visitors- guiding them down the path towards your most desired goal.

First Impressions are EVERYTHING

Would you show up on that ever-important first date with your sweaty workout clothes straight from leg-day at the gym? Would you show up to your dream job’s hard-to-land interview wearing your favorite, slightly stained sweatshirt you still have from your high school band trip?

Remember the old adage: “You’ll never get a second chance to make a great first impression.” It’s a legitimate statement as it takes about 50 milliseconds (that’s 0.05 seconds) for users to form an opinion about your website that determines whether they like your brand and your site or not.

According to research from Stanford, 75% of users admit to making judgments about a company’s credibility based on their website’s design. Studies also suggest that people make a subconscious judgment about a product within 90 seconds of initial viewing and up to 90% of that assessment is based on color alone.

So in closing, if your site is hard to use with unappealing/conflicting colors and poorly designed, you’re gonna have a bad time. Color psychology is an important aspect of website design and user experience, but not the only one. Contact us today if you’re ready to amp up your website to become a lead generating powerhouse!

As a Chief Marketing Officer with an extensive background in design psychology and creative direction, Kari gets to pursue her passion for making sure things look as pretty as they sound. She enjoys good food, good music, and good people as well as spending quality time with her two awesome kids and awesome husband. She loves to sing, play the guitar and ukulele… but don’t you dare ask her to dance. Not only is she the official office geek, she’s your go-to person for a good pun.

Leave a Reply

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