Design, UI, UX, Insights

Psychology of Colors – Improve Your Web Design Pt.2

In our first article dedicated to psychology of colors, we learned thing or two for neutral and warm colors. In part 2 we look at the cool tones and how they affect our web design and the impression it creates on our audience.

If you haven’t looked through first part of our article on psychology of colors yetyou can find it here. Color is a powerful tool for implying certain feelings, moods and it can call to action – all things you can use in your web design and communicate on intuitive level – fast and efficiently.

The use of cool colors can create a calming effect on your audience, build trust or speak innovation. Excited to learn more? Let’s sail off in the deep blue sea.

Psychology of colors:

Green       Blue    Turquoise     Purple     Pink       Magenta

Psychology of color: Green

Keywords

Balance, harmony, security, wealth, growth, natural, professional quality, tranquility, refreshing.

Good for

Call to action; maximizes readability and reduces optical fatigue.

Bad for

Restaurants (besides organic) – because green lowers blood pressure, relaxes the nervous system and is an appetite suppressant; too much green can cause feelings of envy, resentment and possessiveness.

Market

Healthy living, organic products, environmently friendly products, finance.

Some details…

Being a combination of yellow and blue, green encompasses the mental clarity and optimism of yellow with the emotional calm and insight of blue. There are more shades of green than any other color.

Green is known to help alleviate depression, nervousness and anxiety. It also promotes a sense of renewal, self-control and harmony.

In combination with other colors

  • Green with silver – elegance and sophistication
  • Green with blue – freshness, growth, nature
  • Green with brown/tan/beige – recycling, organic
  • Green with yellow – sporty, outdoors
  • Green with purple – highly contrasting – arousing

Website examples

LivSo

Biscolt

Parks Swiss

Bang Idea

Psychology of color: Blue

Keywords

Trust, peace, loyalty, integrity, conservatism

Good for

Corporate, building trust, health.

Bad for

Food and restaurant, designs trying to communicate passion, energy and speed

Market

Neon and electric blue for the youth market

Deeper blues for mature people

Suitable both for men and women

Some details…

It can contribute to the user’s relaxation and calmness, but sometimes is also perceived as boring and predictable, so choose wisely the right shades for your project.

Blue can also be cold and depressing – blue causes the body to produce calming chemicals, it invokes rest, which can be sometimes too much.

In combination with other colors

  • Blue with red/orange/yellow – high-impact designs, attention-grabbing
  • Blue with pastel colors – light heartedness, freshness, festivity
  • Blue with green – gentle, soothing and calming
  • Blue with white – fresh, crisp, nautical
  • Blue with silver – elegant, rich

Website examples

Coraline Colasse

District0x

Plume

Kaleidoscope

Psychology of color: Turquoise

Keywords

Clarity, communication, calm, recharging, spirit, positive thinking

Good for

Health clinics, practitioners, cleaning products

Bad for

Traditional websites, promoting stability

Market

Young people, geeks, health

Some details…

Turquoise is believed to be an anti-inflammatory and helps enhance communication skills, calm the mind and body.

Too much turquoise can become fussy, over analytical and closed off.

In combination with other colors

  • Turquoise with black – strengthness the look
  • Turquoise with dark blue – more conservative
  • Turquoise with pink – appealing to the female market
  • Turquoise with red – attention-grabbing combination

Website examples

Waze Carpool

Sabat Group

Brand Village

Assembly

Psychology of color: Purple

Keywords

Imagination, spirituality, high ideals, luxury, extravagance, uniqueness, premium quality, fantasy, nostalgic.

Good for

“New age” products – to underline their individuality and originality.

Bad for

Purple lies at the very shortest frequency of wavelengths visible to the human eye which can make it a difficult color to work with. Since it speaks luxury and royalty, it is not a good idea to use it for websites offering low-cost services and products.

Market

Primarily female and youth market, but in general, all cultures and genders can relate to it.

Some details…

It is said to have the power to uplift, calm the nerves and encourages creativity, making it an all-inclusive color. Purple is also symbolic of bravery. In Egypt, for example, purple is also symbolic of virtue and faith.

In combination with other colors

  • Purple with gold/ Purple with silver – adds luxury, prestige and quality
  • Purple with red – adds energy and excitement
  • Purple with magenta – adds liveliness
  • Purple with green/blue – “feel-good” impression

Website examples

Linemotion

WoovieWapp

Quilton

Klar

Psychology of color: Pink

Keywords

Inspiring, warm, compassionate, comforting, hope, calming, nurturing

Good for

Cosmetics, fashion, beauty, romance

Bad for

Well, we can’t really think of a bad use of pink color, research your target audience and test – it will clearly show if pink fits the picture.

Market

Female, youthful, teenage and pre-teen market

Some details…

Pink is primarily recognized as a feminine color. For this reason the color is used as a universal symbol of hope and awareness in the fight against breast cancer. However, in Japan pink has a masculine association – it represents pink cherry blossoms – a symbol of fallen warriors. Therefore, some of the pink shades can be stimulating and embodying power.

Bright and warm pinks, such as fuchsia or magenta are vibrant, youthful and encourage a sense of confidence.

In combination with other colors

  • Pink with darker colors – adds strength
  • Bright pinks – trendy, less expensive product

Website examples

Victoria Spicer

Elje Group

NJI3

Yumler

Psychology of color: Magenta

Keywords

Strong, inspiring, innovative, imaginative, lively, outrageous

Good for

Unconventional websites, individualism

Bad for

Traditional websites, formal

Market

Creative, youth

Some details…

The color magenta is a color of cheerfulness, happiness, contentment and appreciation. Most people feel more optimistic when in the company of magenta.

Being surrounded by too much magenta can generate arrogance and bossiness making us feel overwhelmed, irritated, anxious and intolerant.

In combination with other colors

  • Magenta with dark blue/dark green/dark gray/black – toning down the intensity
  • Magenta with gold/silver – Adding degree of elegance and sophistication

Website examples

Robert Vinluan

Ignyte

Daniela Andrade

Bicklaw LLP

Psychology of Colors: Final thougths

There are many studies on psychology of colors, and generally, the same meanings are seen across different spheres – web design, interior design, movies, fashion and so on. Play a little game and look around you – find how colors surrounding you affect you personally and influence your behaviour. Soon you will gain even more confidence in picking colors for your website projects – you will just “have an eye” for the colors.

Stay tuned for upcoming articles on how to pick up a color scheme for your project + useful tools, and how famous brands use color to stand out and communicate to their target customers. Also, don’t forget to share how we did in the comment section below – feel free to add anything – we are striving to create a diverse and colorful community!

Cheers, see you next time,

 

htmlBurger team

Leave a Comment

Share