Color is an extremely powerful communicator. Since our existence, humans have used color to influence their moods, feelings and emotions. There have been studies conducted that have shown that people make a subconscious judgment about a product within 90 seconds of initial viewing and up to 90% of that assessment is based on color alone!
You only have to look at some of the biggest companies in the world and see that the colors of their website are chosen very carefully, in order to spark the right emotions in their users. Simple changes in color use within your website can have big effects on metrics such as click through and conversion rate.
The majority of people are already aware of how certain colors make them feel and you can use this to your advantage. In this blog post, we are going to be discussing the psychology of color in web design.
(source medium.com)
The Psychology Of Color
In 1666, Issac Newton first discovered that when pure white light passes through a prism, it separates into all the visible colors. Over time, more research was conducted showing that if light is combined, it can form other colors, just as red and yellow paint makes orange.
People’s feelings on color are both personal and evolutionary. One person may look at the color blue as cold and dark and not be appealed by it, whilst another person may see it as calming and trustworthy. But, with that being said, as a whole, certain colors do hold certain attributes, associations and have different best practices when it comes to web design.
Psychology Of Red
What the color is associated with:
- Love
- Passion
- Anger
- Danger
- Excitement
Red is a color that is best used for things like Call To Actions or when drawing attention to something. It is a color that cannot be left unspotted and depending on the strength of the color, it can promote energy and excitement or power and passion.
An example of the color red being used effectively is in one of our standard Business Website Templates page elements. The color red is used to bring the users attention to see more details about the careers on offer. By naturally directing the users eye towards the call to action buttons, it helps them navigate through the web pages and go deeper into the site, finding more about the business and their services.
We recommend to avoid using red too much since with it being a very bold color, when overused it can become distracting and reduce its overall effectiveness as a way of sparking attention.
Psychology Of Yellow
What the color is associated with:
- Happiness
- Optimism
- Youthfulness
- Sunshine/Spring
Yellow is the most luminous and brightest color, making it ideal as a color for happiness, optimism and creativity. However, when used in the incorrect sense, yellow can indicate cheapness and jealousy.
Much like red, yellow can be great for drawing attention to call to actions and is also good for creating backgrounds or web pages that radiate a calm and happy sensation for the user. Take McDonalds as an example. They are very playful with the use of the color yellow within their branding and always try to use it in a way that is going to spark positive emotions within people. Their use of the color on their website is both subtle yet bold enough to grab the attention of the user and guide their eyes to the most important parts of the web page.
Psychology Of Blue
What the color is associated with:
- Open spaces
- Freedom
- Loyalty
- Sensitivity
Blue is a very widely used color when it comes to web design. Dark blue is often used for websites that want to convey safety, express knowledge and show expertise. Many big companies and corporations use dark blue within the website. On the flip side, light blue can be used to symbolise health and tranquility, so if your website promotes products of services in the health and wellness sector, using more light blue may be something to consider.
As you can see from the VEVS Business Software & Website's homepage, we have used dark blue as a backdrop behind our main call to action. The reason we used this is to give the homepage a sense of space and freedom. This allows the user to not become overwhelmed when they land on the web page and further convey that sense of safety.
Psychology Of White
What the color is associated with:
- Light
- Purity
- Cleanliness
- Perfection
- Purity
When it comes to white and web design, they go hand in hand. White helps to display cleanliness, structure and brightness. Websites related to the healthcare industry can benefit greatly from using white within their site.
For example, having a nice, clean, white website for a teeth whitening business not only makes sense but will actually help the brand and sub consciously relate the bright color to the service of the business within the users mind. A website offering teeth whitening products that uses bright colors, white space and is overall very clean is going to appeal to the eye much more than a site that is dark and lacks bright color.
To further support this, just look at the website for Colgate below. They use a combination of red and white to draw attention to their call to actions and most important information, whilst showcasing the cleanliness, purity and brightness of their brand and web pages.
Psychology Of Black
What the color is associated with:
- Power
- Strength
- Mystery
- Sophistication
- Luxury
Black is one of the boldest colors and in web design it should be used with caution. Black can be brilliant to showcase luxury within your website and when used properly, can add a powerful depth to any site.
When thinking of using black within your website, play around with greys and lighter black shades also. Too much black can be overwhelming and in extreme cases, make people feel uncomfortable.
A safe way to use black within your website is in text. Books use black text on a white background for a reason. It is because it makes text easy to read.
A company that uses black well is Apple. As you can see from the image below, the web page showcasing the Mac collection uses an all black background. In this particular case, it works well because the title and call to action can be easily read.
How Does VEVS Business Software & Website Approach Color In Web Design?
Each website we provide comes with a number of preset color themes. These are carefully chosen to make sure that the elements within the page are using the correct color to optimise for not only visuals but also interaction within the page.
All CTA’s (call to actions) are made to stand out, front and center, so it is easy for the user to know where to click, and this provides them with a much easier way to navigate through your website, increasing the average time spent on each webpage.
With that being said, our clients have granular control over the color scheme displayed on their site. Feel free to easily change the colors to fit your business’s branding and achieve the visual look you desire. See below for some examples of colors used within our website templates:
Conclusion
So, that is our take on the psychology of color in web design. Remember, each color has its associations but that is not to say you cannot use a certain color because of this. There are always exceptions to the rules and it is up to you to find out how your users interact with your website, and then use the tips and suggestions we have mentioned to further enhance your site.
We have some other great blog posts for you to view:
> 6 Common Marketing Mistakes & How To Avoid Them
> Why your business needs to be on Google My Business
Are you following us on Facebook? Click here to like our page and be notified whenever we publish a new blog post!
You can also check us out on Twitter here.
