GmatriX's WebworksThe Psychology of colour in Web Design | GmatriX's Webworks
Updated: Dec 10, 2020
Colour is a very powerful asset of your website. It not only creates an environment but also creates an impact on peoples' thinking. The psychology of colour can help you find suitable colours for your website. In colour psychology, there are various emotions, values and physiological reactions having a goal to convert the visitors into potential customers.
Practical uses of colour psychology in web design.
Green
The colour green has a pleasing effect. It can be used to give the readers a feeling of being healthy, it will create a positive effect on your product or service.
Associated With:
Health
Wealth
Calmness
Fertility
Gool Luck
Peace
Harmony
Growth
Support
Energy
Where to use Green
This colour can be used in websites related to nature, wealth, organic products, tourism, medicine, environment, etc.
Where not to use Green
This colour is not relevant to the website related to technology, cinema & luxury.
Red
This colour can increase a person's heartbeat rate. It is a colour of passion & attraction. It can be used to highlight something and grab the attention of the reader.
Associated with:
Excitement
Love
Energy
Movement
Lust
War
Fire
Anger
Danger
Where to use Red
Red colour can be used in websites related to food, entertainment, sports, fashion, advertising and emergency services.
Where not to use Red
Unfortunately, the red colour is also associated with war, danger & anger, using red too much could create a negative impact on the user.
Blue
This colour is refreshing, energizing, soothing & relaxing. Blue is mostly used in websites of the industries that require a high level of trust, industries like insurance, banking and cybersecurity use the colour blue.
Associated with:
Quality
Calmness
Dependability
Steadfastness
Wisdom
Loyalty
Strength
Trust
Productivity
Security
Where to use Blue
This colour can be used in websites related to finance, security, banking, healthcare, dental, medical, government, science and utilities.
Where not to use Blue
Though blue colour is related to energy and also relaxation, the usage of blue decides that the website is relaxing or energizing - using too much blue could make the website look dull.
The blue colour also curbs a person's appetite, it should not be used in a website related to food.
Black
Black is related to glamour & elegance, it gives a feeling of power and is commonly used in luxury products ads. The black colour is also related to technology.
Associated with:
Power
Sleekness
Stability
Formality
Intelligence
Where to use Black
Can be used in websites related to luxury products, fashion, glamour, cosmetics, technology & Marketing.
Where not to use Black
It is also related to mystery, evil & rebellion, should not make the visitors afraid.
White
It is related to hygiene and cleanliness, widely used in healthcare websites. White also denotes cleanliness, traditional values & order.
Associated with:
Purity
Cleanliness
Virtue
Happiness
Sincerity
Saftey
Technology
Where to use White
White colour can be used in websites related to medicine as it is associated with doctors, dentists & nurses. It can also be used in websites related to technology and luxury products.
When to avoid
White colour is always dependent on other colours for creating contrast, using too much white will make the website look dull and unorganized.
Yellow
This colour makes visitors feel optimistic and warm. This colour is widely used in travel websites & magazines.
Associated with:
Competence
Happiness
Cheer
Youth
Optimism
Where to use Yellow
The colour yellow can be used to energize the audience and make them feel happy. Yellow can be a great colour to draw the attention of the visitors.
Where not to use Yellow
Using too much yellow can strain the eyes, it can become overpowering and should be used sparingly. It can also create a feeling of cheapness and spam.
Orange
It is a vibrant colour and often used in websites associated with happiness, excitement and fun. Orange is formed when red is mixed with yellow colour, this makes orange to inherit the qualities of red as well as yellow.
Associated with:
Happiness
Energy
Warmth
Ambition
Excitement
Enthusiasm
Where to use Orange
Orange can be used in websites related to technology, entertainment, food & e-commerce. This colour can be used to draw attention to newsletter signups, call to action, sales, etc.
Where not to use Orange
Same as red colour it can also create strain when used extensively and give a negative impact.
Purple
This colour is related to royalty. Purple also creates a feminine environment - it is great for beauty and grooming websites.
Associated with:
Healing
Beauty
Romance
Astrology
Feminine Brands
Luxury
Wealth
Where to use Purple
Purple is great for websites related to beauty and grooming. Dark shades of purple create a sense of luxury and wealth.
Where not to use Purple
Purple is a bad choice to grab people's attention, dark purple can make the website non-friendly.
Pink
The pink colour is a shade of red, it represents sophistication, romance, love & sincerity. Like the red colour, it does not have a negative impact like anger, danger, etc.
Associated with:
Women/Girls
Sophistication
Romance
Love
Sincerity
When to use Pink
This colour is great for websites having feminine products and related to girls.
When not to use Pink
Eating candy every minute could make you feel too much sweet, same goes in pink colour - it could be too sentimental and sweet.
Brown
It is a warm colour associated with nature & earth. Brown colour stimulates the appetite.
Associated with:
Earth
Ruggedness
Reliability
Stability
Friendship
Nature
When to use Brown
Brown colour stimulates the appetite and is good for food-related websites. It is also good for websites related to finance, veterinary & real estate.
When not to use Brown
Not suitable for the call to actions and grabbing visitors attention. It can be a bit boring if used extensively.
Grey
It is associated with formality, professionalism, sophistication. It gives a feeling of premium and high-tech stuff.
Associated with:
Professionalism
Formality
Technology
Sophistication
Strong Character
Timelessness
When to use Grey
Websites offering luxury goods can use grey colour. It can also be used in websites to give calming & balancing effect.
When not to use Grey
Using grey at wrong place might make the website dull, it should not be used in the call to action buttons.
Colour psychology is a must-know thing for a website designer. This colour psychology principal will give you an idea about which colour to choose for your next website to target the right audience and increase sales.
Written by Omar, a designer from India helping businesses by providing them solutions to their design problems. If you are ready to stand out with your website, get in touch - Say Hi!