Color psychology in web design
Tags: design, color, brand, uidesign
Published: 2021-06-05 08:10:27

> The goal of this article is to help you choose the right colors for your website.

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

![white.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1622831835436/Mrpyl4aEt.png)

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

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

# 〰 GREY

![grey.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1622831880092/lSEzMg0ya.png)

**Positive:** Psychological neutrality.

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

# ⚫ BLACK

![bhlack.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1622832059214/DLcQTzG_O.png)

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

**Negative:** Oppression, coldness, menace, heaviness.

# 🟨 YELLOW

![yellow.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1622832122390/QOxe_jV0e.png)

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

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

# 🍊 ORANGE

![orange.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1622832184583/YmUs6bAsq.png)

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

**Negative:** Deprivation, frustration, frivolity, immaturity.

# 🤎 BROWN

![brown.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1622832212923/wq9zTwvvx.png)

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

**Negative:** Lack of humor, heaviness, lack of sophistication.

# 🐷 PINK

![pink.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1622832342114/HMy4pPtfj.png)

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

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

# 🍒 RED

![red.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1622832352873/ZXLBt3FI6.png)

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

**Negative:** Defiance, aggression, visual impact, strain.

# ♾ VIOLET

![violet.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1622832453686/mKPfQo64b.png)

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

**Negative:** Introversion, decadence, suppression, inferiority.

# 🍏 GREEN

![green.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1622832469489/JDshGpl3j.png)

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

**Negative:** Boredom, stagnation, blandness, reservation.

# 📘 BLUE

![blue.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1622832482590/v2308LSpB.png)

**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 mindful of the background color as well as the font color
- Color chooser tools can be very helpful

<a href="http://www.youtube.com/watch?feature=player_embedded&v=yj2Akhmx2oU" target="_blank"><img src="http://img.youtube.com/vi/yj2Akhmx2oU/0.jpg" alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10"/></a>

- Don’t use too many colors, usually 2–4 are enough
- Get some inspiration and make some research before your final decision

<a href="http://www.youtube.com/watch?feature=player_embedded&v=569Q2r0Z-5w" target="_blank"><img src="http://img.youtube.com/vi/569Q2r0Z-5w/0.jpg" alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10"/></a>

# To sum up

Every color has its purpose. Choose your colors wisely. If you are not sure how to pick the right one or the right combination to be afraid to ask a specialist to help you. Make your own research too. Check your competitors.

**************************************

👋Hello, I'm Eleftheria, a developer, public speaker, and chocolate lover.

🥰If you liked this post please share.

🍩Would you care about buying me a coffee? You can do it [here](https://www.buymeacoffee.com/elef/) but If you can't that's ok too!

[![cofGif.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1616336641314/ycZgZ44G3.gif)](https://www.paypal.com/paypalme/eleftheriabatsou)


**************************************

🙏It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.

🌈[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/elef_in_tech)