March 20, 2017 Last updated March 19th, 2017 1,962 Reads share

How to Implement the Most Attractive Colors in Web Design

Image Credit:

Even those who do not consider themselves designers are aware of the effect colors have on people, and a simple web search can give you an introduction into the basics behind the psychology of colors. But even with this information so easily available many people choose the ugliest color schemes for their websites. For a business site choosing the wrong colors can be rather detrimental. If you believe that colors have an effect on our emotions, then the wrong hues could create unintended feelings in your visitors. Even if you don’t subscribe to this theory, a website with a horrible color palette is not going to give visitors a good first impression about your business.

So how do you go about implementing the most attractive colors possible for your web design? By following some of these simple guidelines.

Use your brand colors

While some of you may think this is quite obvious, not everyone thinks to use the colors of their brand for their website. Some avoid their brand colors altogether, especially if they don’t like the colors to begin with. Some, on the other hand, choose colors that make their logo stand out more.

While most professional designers will implement these colors into your website, they certainly won’t assume that those are the colors you want. Other options here would be to work with colors similar or complimentary to your brand colors. This avoids causing a clash between the site’s colors and those in your logo. Since your logo is usually on every page, it is important that these two palettes coexist without clashing.

Let emotions dictate your color choices

As stated previously, colors have been known to stir up emotions in people. Even the earliest painters throughout history realized the effect colors had on human emotion. Luckily, there is a great deal of research that you can tap into that will help you better understand the psychology behind colors including the different feelings that certain colors are known to invoke such as:

  • Black: power, elegance
  • White: cleanliness, purity
  • Blue: tranquility, trust
  • Purple: wealth, creativity
  • Red: energy, power
  • Orange: happiness, creativity
  • Yellow: intellect, anxiety
  • Green: motivation, growth

As you can see, not all colors bring about emotions that you would want your visitors to have. Take yellow for example. Color experts claim that it activates the anxiety center of our brains and can cause someone’s temper to be a bit shorter.

It is important to note that there is also research out there that states colors bring about different emotions in different people. If you are looking for marketing based research on this topic I suggest this article from Kissmetrics that goes into how colors effect different demographics, not just people in general.

Compliment and contrast

You obviously don’t want colors that clash with your company logo, so if you aren’t using the same color palette that your logo does you are going to want to choose colors that compliment your brand. Working to accent your brand, the right color choices can really make your logo stand out with greater authority.

That being said, there are times you may want to consider contrasting colors on your website. For certain elements, you want to draw as much attention as possible. For example, if you are trying to drive visitors to a subscribe button you aren’t going to want that button to blend into the rest of the site. You are going to want it to stand out so no one misses it. For calls to action it is often recommended that you choose a color that contrasts with the rest of your site so it stands a better chance at capturing a visitor’s attention.

Consider your demographics

When you build a website you should be taking your target demographics into consideration. For example, if you product targets women you are going to want to use design techniques that cater to their tastes. That strategy should include choosing the right colors for you theme. Instead of brown or gray, two colors women dislike the most, you are going to want to incorporate blues, greens and purples according to the study from Kissmetrics.

Choosing to design for your target audience helps put them in a more comfortable, relaxed state. They feel as if the site was designed for them and as a result, develop a greater sense of trust. Whether you are delivering content or selling products, you need your visitors to trust you if you want to be successful.

Give A/B testing a try

In a brick and mortar store it is a bit difficult to run an A/B test on your store’s layout and design because there are too many variables at play. On your website, however, you can run tests to see which color combinations work best for you.

A/B testing consists of sending two, or more, different designs to separate groups of visitors to determine which one performs the best according to the criteria you set at the beginning of the test. For example, you could test for time spent on a page, conversion rates or even social shares. The right technology combined with the right personnel can get you up and running with two different versions of your site so you can check to see which one performs better. Once you are satisfied with the results, you can ditch the underperforming version for the one that works.

The role color plays in web design is fascinating. From the simple aesthetics that color provides all the way to the effect they have on people, choosing the right colors is one of the most important decisions you will make regarding your website so when you are in the planning stages it is crucial that you sit down with your web designers and go over what colors will work best for you.

If you are interested in reading more on color theory as it relates to web design, give the ebook, Web UI Design for the Human Eye a read. It contains case studies from 33 companies including Google, Twitter, Etsy, Facebook and Bose. You can download it for free but it does require you to hand over information like your email address and phone number.

Eleonora Israele

Eleonora Israele

Read Full Bio