Eleftheria Batsou
Prototypr
Published in
4 min readJan 29, 2018

Color psychology in web design

SourceSocial Colors

Color usually depends on our personal experiences and preferences but there are also some universal signals. Choosing the right color can be a very challenging task. Individual differences can vary based on gender, age and culture. In a study titled “Impact of color on marketing” researchers found that up to 90% of snap judgments made about products can be based on color alone.

Here is a quick guide to help you pick the “right” color based on psychology.

WHITE

Positive: Hygiene, sterility, clarity, purity, cleanness, simplicity, sophistication, efficiency.

Negative: Sterility, coldness, barriers, unfriendliness, elitism.

GREY

Positive: Psychological neutrality.

Negative: Lack of confidence, dampness, depression, hibernation, lack of energy.

BLACK

Positive: Sophistication, glamour, security, emotional safety, efficiency, substance.

Negative: Oppression, coldness, menace, heaviness.

YELLOW

Positive: Optimism, confidence, self-esteem, extraversion, emotional strength, friendliness, creativity.

Negative: Irrationality, fear, emotional fragility, depression, anxiety, suicide.

ORANGE

Positive: Physical comfort, food, warmth, security, sensuality, passion, abundance, fun.

Negative: Deprivation, frustration, frivolity, immaturity.

BROWN

Positive: Seriousness, warmth, Nature, earthiness, reliability, support.

Negative: Lack of humour, heaviness, lack of sophistication.

PINK

Positive: Physical tranquillity, nurture, warmth, femininity, love, sexuality, survival of the species.

Negative: Inhibition, emotional claustrophobia, emasculation, physical weakness.

RED

Positive: Physical courage, strength, warmth, energy, basic survival, ‘fight or flight’, stimulation, masculinity, excitement.

Negative: Defiance, aggression, visual impact, strain.

VIOLET

Positive: Spiritual awareness, containment, vision, luxury, authenticity, truth, quality.

Negative: Introversion, decadence, suppression, inferiority.

GREEN

Positive: Harmony, balance, refreshment, universal love, rest, restoration, reassurance, environmental awareness, equilibrium, peace.

Negative: Boredom, stagnation, blandness, enervation.

BLUE

Positive: Intelligence, communication, trust, efficiency, serenity, duty, logic, coolness, reflection, calm.

Negative: Coldness, aloofness, lack of emotion, unfriendliness.

Choosing an appropriate color combination in the design process is considered one of the most important (yet often overlooked) elements in creating a successful website.

Quick tips

  • Focus on the target audience
  • Be mindfull of the background color as well as the font color
  • Color chooser tools can be very helpful
  • Don’t use too many colors, usaully 2–4 are enough
  • Get some inspiration and make some research before your final desition

Would you like to get me a coffee, please?!☕️

You can do that here → paypal.me/eleftheriabatsou

But If you can’t, that’s ok too 😍

It would be nice to subscribe to my youtube channel. It helps creating more content.

Thanks for reading, have an awesome day!

Youtube | Codepen | GitHub | Twitter | Site

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us https://bit.ly/apply-prototypr

Written by Eleftheria Batsou

Hi, I’m a community manager and an app developer/UX researcher by passion. I love learning, teaching and sharing. My passions are tech, UX, arts & working out.

Responses (1)

What are your thoughts?

Good post and very helpful,Funnily enough, when I started out in advertising/direct marketing many years ago, we were always told that sending a mailing out in a yellow envelope increased results.
I was also really pleased to discover from your post…