COLORS PSYCHOLOGY

How the psychology of colors can affect our mood, directly and in more than one way?

colors psychology
hero shapes

What is the psychology of colors?

The psychology of colors is the science of how color affects human behavior. The psychology of colors is a branch of the broader field in behavioral psychology. We will deal more with the effect that color has on websites and ecommerce.

Your website may have clear and rich content, but color choices for primary color, secondary color, button color, font color, and other elements could send a conflicting message.

Most people usually choose the colors based on the logo or personal preference but do not understand that the right color palette combination can dramatically increase their revenue and have a big impact on the conscious level of the user - customer.

Website colors in the 90's

The website design has changed since the early 1990s, and evolutions in technology have helped a lot.

The colorful websites with gif images, snow in the Christmas season, a photo with landscapes on the background of our page and other crazy design ideas, they belong in the past.

Nowadays we see more "serious" website with the correct color palette choice, having left behind the design concerns of that period.

Starting from the menu and the carousel or our background image ("hero image") and reaching the buttons, the background and the color of the font the choice must be correct and based on the content of our page.

90's colors

Effect of colors

Whether we realize it or not, the color of objects we see affects our mood in more ways than one. 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%. Below, we can see how central colors affect the user, what we think about when we see them and how to use them properly in our website.

Red

The color red increases the heartbeat and causes faster breathing. It is an intense and powerful color and as such, is associated with demand and aggression. Red is also known to stimulate our appetite. In business, red is known as a "call to action" color.

Energy

Power

Strength

Excitement

Danger

Fire

Blood

Urgency

Traffic Stop

Passion

Appetite

Emotion

Love

When to use red

Use red to draw attention to something, such as an "add to cart" button or to create excitement, e.g. something related to a contest or an offer.

Red can be good for websites related to food, fashion, entertainment, sports, marketing, advertising, emergency services and healthcare.

When to avoid red

Do not use it too much! Excessive enthusiasm can hurt and drive users away.

Red is generally not suitable for websites with luxury, nature-related content or professional websites offering services.

Green

The color green is known as the easiest color on the eye. It has a relaxing effect. This is why, interestingly enough, people who are about to appear on a TV show, wait in a green room so they can relax before their appearance.

Nature

Fertility

Freshness

New Growth

Safety

Good Health

Healing Power

Free Traffic

Harmony

Peace

Easiness

Calmness

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.

When to avoid green

It’s less appropriate for luxury goods, tech and forum websites.

Blue

The color blue, in lighter shades, is known to have a calming and tranquil effect. Darker shades of blue stimulate the mind into thinking more clearly.

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.

Sea

Water

Ocean

Depth

Wealth

Quality

Stability

Productivity

Wisdom

Intelligence

Sky

Truth

Peace

Heaven

When to use blue

Blue is often used by large corporations and banks because it’s non-invasive and associated with dependability.

Use it on websites related to healthcare, medicine, dentistry, technology, science, law firm websites and service websites.

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.

Yellow

Yellow is the brightest color. It is associated with ability, happiness, cheerfulness, optimism and youth.

Yellow also has some negative correlations such as cowardice, deception and cheapness.

Sunshine

Light

Clarity

Energy

Warmth

Optimism

Happiness

Positivity

Cheerfulness

Youngfulness

When to use yellow

Use bright yellow (sparingly) to energize something, or create a sense of happiness. Use soft, light yellow for a calmer, more pleasant feeling. Yellow is also suitable for buttons and the color of links that lead somewhere.

When to avoid yellow

Yellow can quickly become overpowering. It can strain the eyes. Again, use it sparingly.

Black

The color black is associated with authority and power. Black causes feelings of intimidation and control. In certain contexts, can also seem sophisticated and sleek to users.

Authority

Power

Elegance

Formality

Revolution

Mystery

Evil

Fear

Aggressiveness

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 websites with luxury goods, fashion websites, marketing websites, and websites about 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.

Grey

The color grey is quite interesting because it is one of the colors that result in no discernible psychological response. However, the lack of color and dullness in gray can be depressing.

If the correct shade is not used, grey can have a dampening effect on the colors around it.

Security

Reliability

Classic Knowledge

Professional Wisdom

Balance

Typical

Official

Genius

When to use grey

It’s great for professional websites, luxury goods, or to create a balancing, calming effect.

When to avoid grey

Some shades of gray can be dull or even cold. Gray is not the ideal color to grab people's attention, so avoid it as a button color or for ecommerce websites.

White

The color white reflects light, so it strains our eyes when looking at it. In business, white implies fairness and equality. The color white is associated with organization and equality.

Purity

Neutrality

Goodness

Innocence

Targets

Faith

New start

Ability

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 be used for technology, science and business websites. When combined with black, gold, silver or grey, white can also be used for luxury websites.

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.

Favorite colors between the two genders

One of the more interesting examinations of color psychology in relation to gender is Joe Hallock’s work on "Colour Assignment." Hallock’s data showcases some clear preferences in certain colors across gender.

When we address the male audience, the colors they love the most are blue (57%) with a big difference from the other colors, followed by green with 14% and black with 9%. The colors they hate the most are brown (27%), orange (22%), purple (22%) and yellow (13%).

When our target is the female audience, the colors they love the most are blue with 35%, purple (23%) and green with 14%. The colors that hate are orange (33%), brown with 20%, gray with 17% and yellow (13%).

gender palette

Choosing the color palette

Choosing a good color scheme for your website could be a scary thing- especially if you’re not confident about your color coordination ability, but the following websites will help you choose the right color combination for a better, more beautiful and proper website.

For color palette you can use the following websites:

By inserting an image you can see which colors match it and create a color palette.

Share: