The 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.


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:

  1. Health

  2. Wealth

  3. Calmness

  4. Fertility

  5. Gool Luck

  6. Peace

  7. Harmony

  8. Growth

  9. Support

  10. 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.



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:

  1. Excitement

  2. Love

  3. Energy

  4. Movement

  5. Lust

  6. War

  7. Fire

  8. Anger

  9. 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.



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:

  1. Quality

  2. Calmness

  3. Dependability

  4. Steadfastness

  5. Wisdom

  6. Loyalty

  7. Strength

  8. Trust

  9. Productivity

  10. 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 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:

  1. Power

  2. Sleekness

  3. Stability

  4. Formality

  5. 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.



It is related to hygiene and cleanliness, widely used in healthcare websites. White also denotes cleanliness, traditional values & order.

Associated with:

  1. Purity

  2. Cleanliness

  3. Virtue

  4. Happiness

  5. Sincerity

  6. Saftey

  7. 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.



This colour makes visitors feel optimistic and warm. This colour is widely used in travel websites & magazines.

Associated with:

  1. Competence

  2. Happiness

  3. Cheer

  4. Youth

  5. 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.



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:

  1. Happiness

  2. Energy

  3. Warmth

  4. Ambition

  5. Excitement

  6. 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.



This colour is related to royalty. Purple also creates a feminine environment - it is great for beauty and grooming websites.

Associated with:

  1. Healing

  2. Beauty

  3. Romance

  4. Astrology

  5. Feminine Brands

  6. Luxury

  7. 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.



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:

  1. Women/Girls

  2. Sophistication

  3. Romance

  4. Love

  5. 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.



It is a warm colour associated with nature & earth. Brown colour stimulates the appetite.

Associated with:

  1. Earth

  2. Ruggedness

  3. Reliability

  4. Stability

  5. Friendship

  6. 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.



It is associated with formality, professionalism, sophistication. It gives a feeling of premium and high-tech stuff.

Associated with:

  1. Professionalism

  2. Formality

  3. Technology

  4. Sophistication

  5. Strong Character

  6. 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!

74 views0 comments

Recent Posts

See All