Top 8 tips to choose a color scheme for your website

According to studies, color scheme affects people’s buying intent. Top brands such as Performable and Ript Apparel saw an increase in Sales after changing colors for their CTA buttons.

The color scheme of a website has a strong influence on a user’s psychology. For example, Red invokes Urgency to take action while others like Blue and Orange appeal to visitor’s Trust.

More importantly, along with invoking Trust and Emotions, colors have drastically increased or decreased conversions on Sales pages. With that in mind, not only site designing is vital, but also selecting the proper combination of colors is essential.

Tips to choose a color scheme for your site

1. Choose color scheme wisely – colors affect emotions

Colors affect Human perception about different things and help to invoke emotions to take action.

color scheme visual composer blog

Experts have concluded the psychological properties of colors. In the following lines, I am going to describe colors and their psychological effects on human behavior.

Red stimulates excitement and a feel of urgency to take action. In Web Designing, Red is used for Warnings, Buttons, and Error Messages.

Blue invokes Trust and Brand for your products. By using Color Picking Tools, you can set a Contrast Level that helps you build your brand’s voice.

Yellow expresses Confidence, fear, depression, and anxiety. For websites, Yellow results in reading difficulty. However, you can use Yellow for the Footers, with a bright Text color on the plate.

Green strikes Human’s positive psychology and creates Balance, Harmony, and Peace. In Website Designing, Green plays well for niches such as Health, Sports, and Psychology.

Orange attracts site visitors to take action. For Banners, Buttons, and specifically Sales CTA’s, Orange is the go-to option for components on a Sales Page.

Pink is considered a Feminine color. Websites featuring Female products and topics make use of the Pink color. In the case of Sales pages, Pink is used for Headers and buttons as well.

2. Take the color scheme quiz

You can decide on a color by conducting Color Quiz with the audience. The point of impact is having an audience, and proceeding to know their favorites for your site.

In the start, experts say not to change your site design for at least six months. This prevents changing your site colors in the start and helps you build your Brand’s voice.

Once you have an audience, you can use the Email Marketing Tools such as Convert Kit, or survey tools such as Survey Monkey to conduct profitable surveys.

To get started with Survey Monkey, design your surveys first. In this phase, you can choose components in your surveys, such as Radio buttons, Lists, Options, and Rating stars. Once completed, you can proceed to reach out to the people that matter most. In this case, placing the survey on your site helps you better, or ask your friends and family on Social Media.

color scheme visual composer blog

In the final step, you can analyze the collected data for maximum potential regarding Color selection for your site.

In the same manner, you can use Email Marketing Tools to ask from your audience. In Convert Kit or Aweber, you can send a Broadcast email for the purpose. A Broadcast email is a One-Time email sent to your audience.

color scheme visual composer blog

3. A/B testing for deciding on a color scheme

In Web Designing, AB Testing is carried out for the analysis of different facts such as Colors, Design, and User Experience.

color scheme visual composer blog

A/B Testing (also known as Split Testing) is the process of comparing two web pages to see which one performs better. Web Designers and Developers alike use Split Testing for various purposes, including Testing User experience, Page Responsiveness, and Audience involvement.

Carrying out A/B Testing helps you decide on suitable colors for your website. By showing two versions of a single page, you can conclude which colors perform better for your website, audience and Sales conversions.

In Split Testing, you can test different factors for colors including Headers, Call to Action Text, Links, Images, Social proof, and Awards or Badges.

To get started with A/B Testing, the first thing is studying your site data, including Traffic, Sales pages, Product pages, and the current color scheme.

The next step consists of observing User Behaviors, such as the ratio of taking action on various site elements.

Once analyzed, construct a Hypothesis for applying a new color scheme for your site. You can apply a new color on your site, or at different positions of your site.

Now, you can Test your Hypothesis by applying new colors on your site.

Finally, you can analyze the data for new colors, such as Bounce Rate and Traffic, and conclude the results regarding new colors on your site.

4. Consider the process of choosing a color scheme for your site

You need to choose a specific color combination for your site, consisting of two colors, maximum. More than two colors distract visitors and force them to feel distrust about your site, products, and brand.

While choosing a color combination for your site, always go for combination, consisting of two colors similar to each other in Contrast, while Contrast in Colors is referred to Brightness and Similarity.

To make that happen correctly, you can use Color Picking Tools online. Head over to W3 School’s HTML Color Picking Tool for the purpose.

color scheme visual composer blog

You can choose a Primary color by clicking on the circles, and proceed to choose its Contrast level accordingly. Once completed, you can safely pick the color’s HTML code to use in your site. On the same page, you can also observe the Contrast percentage of the colors.

Now proceed to Color Mixer on W3 School’s website. By using Color Mixer, you can mix up the Primary color with others, helping you choose Secondary colors to form a combination for your site.

Once completed, pick the color code from the page.

After you decide on both colors, Primary and Secondary, you can proceed to set colors for different factors on your site. For the purpose, you can use the WordPress Live Customizer to change colors for Headers, Hyperlinks, and Headlines.

In this regard, you can use the Primary color for Headers, Footers, and Widgets, while using the Secondary color for Hyperlinks, Text ads, and Headlines.

5. Use tools to help you choose the best color scheme

There are tools called Color Picking and Mixing Tools that help you choose and mix up colors for your site. Such Tools play well regarding making color combinations for your site.

Let’s proceed to list down Color Picking Tools, and their short description of how you can use them in the right way.

Adobe Color CC provides a color wheel to choose your colors correctly. Like we discussed W3 School’s Color Picker above, you can choose a color combination with Adobe Color CC.

color scheme visual composer blog

Like Adobe Color CC, you can make use of the Coolors App. It helps you analyze different colors in blocks. Moreover, Coolors App features itself as a Color Scheme Generator, helping you succeed at making color combinations for your site.

color scheme visual composer blog

Another App you can use to make color combinations is the Color Mind. It shows color plates, consisting of designs and colors. You can select different colors with designs on plates.

color scheme visual composer blog

One of the most favorite Tools is the Material Color Tool. With the help of MCT, you can spot out Primary and Secondary colors for your site. Once selected Primary and Secondary colors, you can see different color combinations in real time, and choose the best colors for your site.

color scheme visual composer blog

6. Take care of the visibility while choosing color scheme for your website

Some colors are visible, while others create problems viewing Text, Images, and Backgrounds.

While choosing Colors for your site, you must take care of the visible colors, and how they affect your site overall look and design.

For Headers and Footers, you can choose Bright colors, while on the other hand; other site sections need light colors.

color scheme visual composer blog

There are two factors involving colors for visibility. The first is choosing colors for Backgrounds, and the other is for the Content. For Backgrounds like Headers, Footers, Banner ads, and Widgets; you can choose the Bright colors like Blue, Brown, and Red; and use Color Mixing Tools to form a suitable Contrast.

Similarly, for the Text-Based Content, you can go for the Black or Dark Grey color. While choosing a color for the Text, take care of the size as well, as size can affect the look of Text on a Web Page.

color scheme visual composer blog

With all the facts in mind, consider standards on top Niche platforms. Mostly, Web Design Headers and Navigation Bars are filled with Black, Grey, and Orange colors. In the same manner, Footers are created with Dark Grey or Black backgrounds.

7. Choose a color scheme based on gender

According to a study, more than 1970 Men and Women were asked about their favorite colors. The study concluded Blue as the most favorite color, followed by Green for Men and Purple for Women.

NUS Blog

Colors affect Humans differently on Gender Basis. Women like some colors more than others, Men do as well.

Consider the following facts for Web Designing and creating Sales Pages.

If your site features topics related to Females, you need to consider Pink, Green, and Purple colors. On the other hand, for Men related Niches and Topics, consider Blue, Orange, Grey, and Black color.

However, let’s have a look at colors Men and Women like.

Men and Women both like the Blue color. Blue is considered working for any Niche, Topic, and Brand on the Internet. In Web Design, you can safely choose Blue with a low Contrast for Headers and Footers of your site.

Men don’t like the Brown. It is considered the most unpopular color regarding Men choice. However, you can make use of the Brown for CTAs, Buttons, and Headers on Sales Pages.

Like Men, the most unpopular color for Women is Orange. Women prefer Pink and Purple as compared to Orange. However, if you build a site that features Men Audience, you can safely choose Orange for your site theme.

For Men, consider Blue for the Header with #4d4dff Contrast, while for the Footer, consider Grey with #8c8c8c as HTML code.

Similarly, Women can choose Pink for Website Headers. Consider Pink with #ff80ff as HTML Color Code, and Brown with #86592d contrast.

8. Check out the age factor for the color Scheme

Age differences affect Color Psychology. According to studies, Teens like combinations of different colors, such as light Brown with Sky color. In the same manner, consider deciding on how many colors you need to use on your website or Sales page.

You should never make use of more than two colors in your site color scheme. In this regard, there are two sections of your site. One consists of a Header, Footer, Navigation Bar, Banner ads, and Widgets; while the other is the Text-Based section of your site.

For Headers, Footers, and Widgets; you can make use of the Dark colors like Blue and Grey. On the other hand, the Black or Dark Grey is suitable for the Text-Based Content. For the Text, you need to consider its Font style and size as well. A Font like Open Sans with 16px is suitable for the Blog Text.

After deciding on colors by different means, you can consider Top Platforms or Websites in your niche, and come up with the Color Standards being in place.

To find the top industry Niche related platforms, and analyze their Color Schemes, you can use Google for the purpose.

Head over to Google, type in your Niche Keyword, and come up with the top sites. After you visit them all one by one, you can taste Color Standards in your Niche.

color scheme visual composer blog

Similarly, use Similar Sites Finding Tools to find similar sites. You can pick a site in your niche and use such Tools to find similar sites. While analyzing sites for the Color Schemes, focus on the Headers, Footers, and Hyperlink colors. Instead of picking a single color from a site, consider browsing top sites in your niche, and come up with the Trends in your Niche.

color scheme visual composer blog


We assumed having a Niche website and discussed tips and tools to choose the best colors for your website.

Firstly, after you create a website, consider your site niche while choosing a Color Scheme. Gender Psychology affects site conversions, and hence, matters in choosing Colors for your site.

If you manage your site in the Female related niche, you should choose the Purple, Pink, and Blue for your site. Similarly, if your site deals with Men related topics or products, you can go for the Blue, Orange, and Brown colors.

Along with considering colors for Men and Women, if you manage an audience, you can conduct a survey, and ask your audience about their favorite color scheme for your site. After completing this phase, you can safely make changes to your site Color Theme.

Moreover, always choose two colors combination for your site. More than two colors may affect your site Trust and Brand.

You should also consider color Trends in your niche. To find the Trends in your Niche, you can find top Niche sites on Google, analyze their Color combination, and go for selection for your site.

Finally, you can run an A/B Test to find the best choice for your website. While you can conduct a quiz for the purpose, the A/B Test doesn’t include asking from the audience. Instead, an A/B Test consists of coming up with a Hypothesis about concerned factors on a website, implement on a temporary basis, and see whether it affects your site positively or negatively. If it positively affects your site, you can keep the change, or revert to old settings in case of adverse effects.

You can read more about WordPress and choosing Colors for your Site or Blog, or proceed to join the conversation in the comments, and let us know about your favorite colors for Websites.

More on wpcrib

1 comment

  1. Great resources. By the way, the GDPR hello bar keep appearing even after dismissal. Look into it.

Add comment

Join discussion and make an impact. Your email address will not be published.

GDPR is going into effect on May 25, 2018. Learn more in our new GDPR section. You can also view changes to our Privacy Policy.
We use cookies to provide a personalised experience for our users.