Tips to Help You Choose the Perfect Color Palette for Your Website

Tanja Trkulja
TechBear
Published in
5 min readFeb 20, 2018

Use the most effective website color palette to improve your branding and attract your target audience.

Photo from pixabay.com

Creating a professional website that attracts your target audience requires a lot of work. Not to mention that there are plenty of factors you need to consider in order to make sure that the functionality and user-experience are superb. Still, one of the essential aspects of a proper business website you need to take into account is your branding. This leads to a very important notion — the perfect color palette for your website. Depending on your business niche, you want to utilize the color theory in psychology and draw the right kind of clientele in with your website design and branding

Different colors mean different emotions

You may have some colors you like, but before you decide anything, consult with color psychology first. The colors you decide to use for your branding and website appearance will have a tremendous effect on the visitors.

  • The color blue evokes trustworthy, dependable and professional feelings. This is why so many brands decide to incorporate a certain hue of blue into their logo and website design.
  • The color green is usually associated with peacefulness, balance, and growth. If these notions speak to you, and you believe that they would relate well to your brand and target audience, definitely look into the possibilities of using green in your branding.
  • The color orange is friendly, welcoming and cheerful. It also evokes confidence.
  • Black is perceived as something that’s classic/timeless, elegant, powerful and fearful. Don’t overuse it though since it can be overwhelming and overpowering.
  • The right shade of purple is known to evoke the feeling of luxury. It’s also considered to be a color that encourages creativity and imagination, so, if you recognize your brand within those terms, make the most of this beautiful color.
  • Yellow is generally associated with happiness and optimism. However, you have to be careful since overly bright or overly dull shades of yellow can look unprofessional, strain the eyes and even cause anxiety.
  • The color red signals urgency, excitement, youthfulness, and boldness. Again, this may end up being the perfect color for your particular brand, but a disastrous choice as well if it doesn’t connect properly with your brand’s message and image.
  • Finally, white is all about simplicity, clarity, and purity. It also looks professional when incorporated well into the design. Aside from the necessary white space on your website, consider using white if you want to create a poised and minimal image as well.
Photo from pxhere.com

Find the dominant color palette for your website

Picking out your dominant colors is a very important step that mustn’t be rushed. Essentially, these colors will be the main colors on your website, branding, merch, business cards, etc. The most common and safest practice is to opt for two dominant colors. These should either complement each other, or provide an effective contrast. However, a balance is necessary so that the combo of the two colors is not overwhelming or distasteful. Of course, you can play with different tones (adding gray to a pure color), tints (adding white to pure color) and shades (adding black to a pure color) in order to achieve the perfectly balanced combo of dominant colors. It’s also important to mention that even though you have two dominant colors, one will always have to be used more than the other. With that said, make sure to patiently analyze your options.

Pick out the right accent color(s) for your site

When it comes to the perfect color palette for your website, accent color(s) make a huge difference, too. First of all, your accent color(s) should be bolder compared to your dominant colors. They are generally used to draw attention to something on your site. These are usually call-to-action buttons, menu categories, and other elements that you want your target audience to focus on once they land on a certain page of your site. For example, you can see how the purple accents on TechBear website highlight the CTA button and direct you to take the SEO test — for free.

TechBear

The importance of 60–30–10 rule

You may have heard of the 60–30–10 rule and used it for different situations in life, but the rule can also be applied to the color palette for your website. The whole point is to use the colors you chose for your branding and website design in 60–30–10 ratio. In that respect, you would use your primary dominant color for 60% of your website design. Secondary dominant color should take up 30%, while your accent colors should be used only 10% throughout your website. That way, you’ll achieve optimal balance and make sure that the website is visually pleasant while properly demonstrating your branding.

If you still need some clarification, think of it this way — 60% of your website is negative space, and this should be your main, dominant color. 30% of your website features some type of content so use your secondary dominant color for that. The last 10% is reserved for highlights such as CTAs, and this is when you should use your accent color(s).

Choosing the right color palette for your website, visual branding and overall website design are not the things you should have to work on yourself. Of course, it’s vital that you have a general idea of what you want, and do your research on what colors best represent your business. But once you have that information worked out, outsourcing the design process to the professionals is a smart investment.

--

--

Tanja Trkulja
TechBear

Content writer at TechBear, nature and written word enthusiast, avid anime watcher, a Hufflepuff, and a Whovian.