“Wear the blue tie, that navy one! You look so confident!” she said. Getting ready for a job interview, it’s never an easy task and starts with an outfit you feel comfortable with.
When it comes to colors conveying a certain signal, they carry confidence and friendliness, depending on the case. Since it is the first thing we notice about anything, our brain forms a snap image of that object or person. This happens in real life. Though, your website is no exception to that. Your visitors would easily judge your site based on the used colors. That would either make them fall in love with it or leave the website without navigating through your content. The slimming trend of people’s’ attention span only adds to the challenge of impressing them.

In this article, we would be talking about 5 principles to keep in mind when choosing colors for your website content.

1. Resonance with your brand persona

First of all, let me tell you I did not randomly choose this one to the top of the list! This is mostly ignored when choosing colors for crucial pieces of content on a website. Some examples are the usage of the banner, logo, background, button, and many more.

At this point, you’re probably wondering what brand persona is. Well, this is the set of characteristics that people associate your brand with. Allow me to explain this further with an example. Did the blue banner and CTA button instantly attract your eyes? Yes, it had the exact same effect on me! But was it the only purpose behind that choice of color? Noooo!

Another example is the BigCommerce, which represents a popular CMS e-store platform focused on eCommerce websites. To persuade people to choose their platform for online shops, they need their brand name to be associated with trust, confidence, and professionalism. Those are the qualities blue color is mostly associated with by our brains. So, it was no coincidence that they chose a dark blue shade with a gradient to convey reliability and trustworthiness.

What is your choice when it comes to brand personality?

2. Reflection of content significance

When discussing the educated choice of colors for your website, there is no getting around this! Which are the most significant components of your website according to you? Among those that have popped up in your mind, CTA, banner, and logo are most definitely there. Based on real data given by different brands there’s been consistently shown these are the areas which catch most of the visitors’ attention.

Guy typing

If the text color is brighter than the button or banner, the attention of your reader would most likely be diverted away. Since you have less than a second to persuade him/her to take your desired action, this doesn’t serve your purpose. When deciding the color for such crucial components, do keep this in mind.

3. User Data as Basis

Who did you design your website for? You did it for your site visitors who are your potential clients. If you made two versions of your website/landing page and don’t know which to launch the site live, you should test them. Ensure that the two variants keep the body-text same but vary the colors of specific content. Next, have tools like Crazzyegg or Hotjar set up for both website versions. These specialized tools are capable of generating heat-maps (a color-coded visual map that can show areas that received maximum or minimum attention from users).

This type of information would help you figure out which colors your site’s readers are responding to the most. And, that is the optimum color you should publish everything on your website. One thing to remember here is, the longer you run these tests, the more reliable they are. In turn, more effective would be your choice of color for a particular piece of content.

4. Color-intensive Features are Sensitive

Suppose you have chosen the best colors for all components relevant to your audience. Now, to stand out among your competitors, you want to introduce flashing buttons or brightly lit and changing colored hero images. If that is the case, you should know that many of your visitors may be photo-phobic or have varying level of migraine. That means flashing colors could give them headaches. Since you have their best interest in mind, it’s best to avoid using them. While those bright features may be visually pleasing for people with normal vision, it can be severely painful for those with such a condition. So, the smart thing to do is to use those color-intensive features with moderation when preparing the color palette for your website.

5. Color Palette for Future Reference

By now, you should have a fairly good idea about the significance of colors for your website to have the desirable conversion. Does it then mean that whenever you add a page or product to your website, you set up a closed-door meeting to choose colors for new elements?


That apparently would take up a bite from the time you could have used to decide even more important matters like the addition of new content and competitor research. How do you then make this process as fast as possible?


Before launching your website, prepare a color palette for each and every one of its components. Thus next time you decide to add a page, all you have to do is consult the palette you had prepared for color choice. This way, your design team/designer would have more time available to work on components like social media posts, landing page content or other relevant aspects of your website. During the design phase of your beautiful website, you should focus on brand persona, content, user data, or colors. These are just some of the important things you should consider for your brand or project. What was your experience? What color principles did you follow?


Liakat Hossain
Liakat Hossain is a web strategist at WebAlive, a Melbourne website design company. He has been helping businesses grow by developing search and content marketing strategies since 2011.