Published on <a href="https://blog.prototypr.io/color-psychology-in-web-design-bf974293beb?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Eleftheria Batsou 
Color psychology in web design
<img alt="" src="https://cdn-images-1.medium.com/max/957/0*dlomKJazJot4ciUK."><a href="https://www.materialui.co">Source</a> — <a href="https://www.materialui.co/socialcolors">Social Colors</a><iframe src="https://cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fplay.ht%2Farticles%2Fbf974293beb&amp;src=https%3A%2F%2Fplay.ht%2Fembed%2F%3Farticle_url%3Dhttps%3A%2F%2Fmedium.com%2F_p%2Fcolor-psychology-in-web-design-bf974293beb&amp;type=text%2Fhtml&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;schema=play" width="700" height="185" frameborder="0"><a href="https://medium.com/media/987f4b3f9ffd81d8511b1e0b61ace3bc/href">https://medium.com/media/987f4b3f9ffd81d8511b1e0b61ace3bc/href</a></iframe>
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 “<a href="http://www.emeraldinsight.com/doi/abs/10.1108/00251740610673332">Impact of color on marketing</a>” 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.
<h3>WHITE</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/150/0*5w00lD_nFKb0IjVy."><img alt="" src="https://cdn-images-1.medium.com/max/150/0*SjD8pFAEevAn7jPj."><img alt="" src="https://cdn-images-1.medium.com/max/150/0*_TO0kM28c3cxaR8T.">
Positive: Hygiene, sterility, clarity, purity, cleanness, simplicity, sophistication, efficiency.
Negative: Sterility, coldness, barriers, unfriendliness, elitism.
<h3>GREY</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/150/0*TDZkI4UJxm7HuM8M."><img alt="" src="https://cdn-images-1.medium.com/max/150/0*SZ1enIsPSQbAoFXk."><img alt="" src="https://cdn-images-1.medium.com/max/150/0*IPjO4qhiaVHlY1tp.">
Positive: Psychological neutrality.
Negative: Lack of confidence, dampness, depression, hibernation, lack of energy.
<h3>BLACK</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/150/0*sp43MrqYTJ3mfpuf."><img alt="" src="https://cdn-images-1.medium.com/max/150/0*LGLcALYyieHEhePq."><img alt="" src="https://cdn-images-1.medium.com/max/150/0*37V1LkwahwRffhYk.">
Positive: Sophistication, glamour, security, emotional safety, efficiency, substance.
Negative: Oppression, coldness, menace, heaviness.
<h3>YELLOW</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/150/0*aZF4vQK5qDle6twj."><img alt="" src="https://cdn-images-1.medium.com/max/150/0*J38-daKiDGyBgj48."><img alt="" src="https://cdn-images-1.medium.com/max/150/0*wYLh6sv-aCEVFkDv.">
Positive: Optimism, confidence, self-esteem, extraversion, emotional strength, friendliness, creativity.
Negative: Irrationality, fear, emotional fragility, depression, anxiety, suicide.
<h3>ORANGE</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/150/0*RldyH_7TZdguGH42."><img alt="" src="https://cdn-images-1.medium.com/max/150/0*iOfcj-cA5kmo-RuE."><img alt="" src="https://cdn-images-1.medium.com/max/150/0*HKGiJOqacI_USlz2.">
Positive: Physical comfort, food, warmth, security, sensuality, passion, abundance, fun.
Negative: Deprivation, frustration, frivolity, immaturity.
<h3>BROWN</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/150/0*RohXojjJj0G8Z7xK."><img alt="" src="https://cdn-images-1.medium.com/max/150/0*UtE6FZWtW-jw3gnh."><img alt="" src="https://cdn-images-1.medium.com/max/150/0*Xd4vnSpYOC9n1T7k.">
Positive: Seriousness, warmth, Nature, earthiness, reliability, support.
Negative: Lack of humour, heaviness, lack of sophistication.
<h3>PINK</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/150/0*lrN7Cwepgqfdy7a-."><img alt="" src="https://cdn-images-1.medium.com/max/150/0*gLjDxHNKTwJfbVE8."><img alt="" src="https://cdn-images-1.medium.com/max/150/0*LhrUzAvMGSQF6jBn.">
Positive: Physical tranquillity, nurture, warmth, femininity, love, sexuality, survival of the species.
Negative: Inhibition, emotional claustrophobia, emasculation, physical weakness.
<h3>RED</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/150/0*BjbjqUOjs8zCuBcP."><img alt="" src="https://cdn-images-1.medium.com/max/150/0*RK9aZ1f_PZmvSHcx."><img alt="" src="https://cdn-images-1.medium.com/max/150/0*0BmVN5sLWyS3ONYD.">
Positive: Physical courage, strength, warmth, energy, basic survival, ‘fight or flight’, stimulation, masculinity, excitement.
Negative: Defiance, aggression, visual impact, strain.
<h3>VIOLET</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/150/0*HGboWmJxK2leOyki."><img alt="" src="https://cdn-images-1.medium.com/max/150/0*fEN0rV3p81COVVye."><img alt="" src="https://cdn-images-1.medium.com/max/150/0*WraVnoRb6aTugXh7.">
Positive: Spiritual awareness, containment, vision, luxury, authenticity, truth, quality.
Negative: Introversion, decadence, suppression, inferiority.
<h3>GREEN</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/150/0*S8b2Kn_avyDvpkt-."><img alt="" src="https://cdn-images-1.medium.com/max/150/0*BmOHkuYsHb1a_Lee."><img alt="" src="https://cdn-images-1.medium.com/max/150/0*UJK7DTQpTLyVIoB4.">
Positive: Harmony, balance, refreshment, universal love, rest, restoration, reassurance, environmental awareness, equilibrium, peace.
Negative: Boredom, stagnation, blandness, enervation.
<h3>BLUE</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/150/0*8tU6l3wvv-4fFUm6."><img alt="" src="https://cdn-images-1.medium.com/max/150/0*CTCQDjLrClSjXJZv."><img alt="" src="https://cdn-images-1.medium.com/max/150/0*6UJGhucZhfB2p09o.">
Positive: Intelligence, communication, trust, efficiency, serenity, duty, logic, coolness, reflection, calm.
Negative: Coldness, aloofness, lack of emotion, unfriendliness.
<blockquote>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.</blockquote>
<h3>Quick tips</h3>
<ul>
<li>Focus on the target audience</li>
<li>Be mindfull of the background color as well as the font color</li>
<li>Color chooser tools can be very helpful</li>
</ul>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fyj2Akhmx2oU%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dyj2Akhmx2oU&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fyj2Akhmx2oU%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="https://medium.com/media/b853f5b7ef8fae77b7c7a0edf91bbfc9/href">https://medium.com/media/b853f5b7ef8fae77b7c7a0edf91bbfc9/href</a></iframe>
<ul>
<li>Don’t use too many colors, usaully 2–4 are enough</li>
<li>Get some inspiration and make some research before your final desition</li>
</ul>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F569Q2r0Z-5w%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D569Q2r0Z-5w&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F569Q2r0Z-5w%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="https://medium.com/media/3ab69a0dac46b3899fa1a7f0dee208cc/href">https://medium.com/media/3ab69a0dac46b3899fa1a7f0dee208cc/href</a></iframe>
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 <a href="https://www.youtube.com/c/EleftheriaBatsou">channel</a>. It helps creating more content.
Thanks for reading, have an awesome day!
<a href="https://www.youtube.com/c/EleftheriaBatsou">Youtube</a> | <a href="https://codepen.io/EleftheriaBatsou">Codepen</a> | <a href="https://github.com/EleftheriaBatsou">GitHub</a> | <a href="https://twitter.com/BatsouElef">Twitter</a> | <a href="http://eleftheriabatsou.com/">Site</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=bf974293beb" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/color-psychology-in-web-design-bf974293beb">Color psychology in web design</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Color psychology in web design

Top Stories