Best Website Color Schemes for User Engagement – 2020

Evinex Blog Website Color Schemes User Engagement Tactics

This guide has everything you need to know about website color schemes.

Many people fail to apply the right colors into their website. Thus, it’s less appealing for others. It can even cause user-friendly issues like being unclear or provoking mixed-feelings.

Don’t panic! In this guide, I’ll cover from the most basic to the most advanced website color scheme techniques. Once you finish reading it, you’ll be such a color scheme expert. So, you would be able to apply my proven tactics and succeed in choosing your own website color schemes.

Sounds interesting? Let’s jump right in!

Contents

Chapter 1

Website Color Scheme Fundamentals

In this chapter, I’ll explain to you what website color schemes are. I’ll also talk about color psychology, and I’ll comment on some website color scheme statistics.

Only afterwards will I tell you all about what the best colors for your website are. Not to mention that color symbolism matters so much.

Ready? Let’s get started!

What are website color schemes?

Website color schemes are the combination of colors that you use in your site. Most websites incorporate three colors. I mean, it’s common to use three main colors and its variations, no more.

Yet, the correct colors combination and how to use it is not an easy decision. Colors will significantly change how others interact with you and what they think about your brand. So, it’s critical to choose them wisely.

There is no ideal answer that matches all websites. You will have to choose your own color schemes. But, how do you know which colors are better for your brand?

Well, if there is a color you use in your logo or one that represents you as a brand, you have to include it in your website. Good color choices imply careful planning. And, remember that colors have an impact on what others think about your brand.

Julie Bonnemoy website screenshot
Source: Julie Bonnemoy

You might be thinking that what matters the most in a website is its content, and that’s somehow true. But, if you want to convince others to consume this content, you will need to first call their attention and then make them trust you.

This and many other things can be significantly influenced by the colors you use. Attention spans are everyday shorter and first impressions matter. So, you will need to check if your site’s colors are the right ones or whether you would benefit from changing them. 

Your website color scheme is like a representation of your brand. If people associate your brand with particular colors, it would be easier for them to remember you. Not to mention the fact that each color provokes a different reaction among others.

There are colors that we associate with trust such as blue, others foment excitement like red, etc. I’ll talk about that later in more detail. Choosing the right combination of colors can make a difference in how others feel about your brand.

Source: Jeep

You can also use colors to organize your Web page information. Some colors work better for highlighting key data, while others are necessary for the rest of the content. 

For example, you cannot use bright colors all the time or you would annoy your website visitors. You should use bright colors for important information such as your CTAs.

Website color schemes matter as they represent your values. Thus, how others see you and what they think of you can be affected by the colors you choose. What’s more, lots of buying decisions are influenced by colors. Some color schemes are more appealing than others.

Different colors send different messages to your site’s visitors. So, you will probably need to test which colors cause a greater impact and have a positive effect. Let’s learn a bit about color psychology!

Color psychology

Color psychology is the study of colors as regards human behavior. That’s to say, color psychology tries to explain how colors affect our attitudes, reactions, emotions, decisions and more.

There are certain general meanings which can be given to each color. Yet, these meanings or the emotions that colors provoke on others are not the same in all cultures. 

Indeed, colors are perceived differently by different people according to their personality, age, gender, culture and so on and so forth.

Thus, color psychology is somehow ambiguous. However, there is no doubt that colors affect us. When we go shopping, we feel more attracted by items due to their color. But, others don’t tell us anything and don’t call our attention.

The same happens on a website, the colors we use have an effect on website visitors. More and more marketers are starting to pay attention to the colors they use to represent their brands online.

subway webpage screenshot
Source: Subway

There are certain colors that match your brand’s identity better. There are others that should be used to highlight important details like CTAs. There are others which are preferable for the background. And, there are those which you shouldn’t use due to various reasons like your audience doesn’t like them.

So, the colors you use in your site matter. There are colors which you can combine with others as together they work well. Though, there are color combinations that can have a fatal effect or may not communicate the message you’re trying to convey.

The fact that colors are emotion-provoking is no doubt relevant for marketers. But, what emotion or feelings each particular color provokes is open to debate. 

Let’s have a look at the most critical features of color psychology for web design!

Attention-grabbing

Depending on your personality, you feel more or less attracted by certain colors. Why some people choose a red car instead of a black one? 

Easy, red cars are generally preferred by those who want to show off and call the attention of others. Whereas a black car denotes a certain kind of luxury and elegance. Yet, what feeling each type of car color provokes on you will depend on your personality.

Emotion appeal

What’s more, there are colors that are generally used by brands which want to transmit security as insurance companies. These brands most of the time choose blue as their main color.

Yet, if you want to sell chocolate, it would be better to go for red and gold. Red usually creates a sense of passion, while gold denotes quality and exclusiveness.

So, there are some colors which might work better than others depending on what emotion you want to provoke on your customers/clients.

Brand recognition

There is no doubt that you need to choose a color that represents you as a brand. Generally speaking, most brands go for the same color they have selected for their logo. 

You have to carefully think about it as the color you choose would be the one most people would think of when they hear about you. Or maybe this color would remind them of you, like red and coca-cola for instance.

Yet, just because you have previously chosen a primary color for your logo, it doesn’t mean you should always use it for your website too. It’s usually the case, true. 

But, there might be occasions when it won’t be the best option. It’s advisable to base your website color scheme on several aspects like research, conversions and more.

User engagement

It goes without saying that certain colors might provoke prompt reactions among users, usually bright colors. On top of that, you should choose those colors that your audience prefers to generate more engagement.

Remember that choosing the right colors implies not only creativity, but also experimentation. The best option to choose the right website colors is to know your audience.

You should know, who they are, what they do, where they are from, etc. Generally women do not like the same colors as men do. For example, most women tend to fancy blue, green and purple. But men prefer black, blue and green instead.

But, as regards the colors each of these groups don’t like there are some differences. Men hate orange, purple and brown. But, women hate gray, brown and orange. Still, these are just general characterizations and they may not work for your audience.

Anyway, you will need to A/B test which color combinations provoke more user engagement and go for them. Indeed, opposite colors can provoke different feelings as they differ a lot. 

But, similar colors can give the sensation of not making a significant difference. So, changes would happen smoothly.

Conversion

How do colors alter your website’s conversions? The truth is that colors have a lot to do in purchasing decisions. Colors do influence us. Some colors make us feel calm and safe while others provoke excitement and give us a sense of urgency.

All this matters for web design. Say that if you visit a website that employs colors you don’t like and colors that create uneasiness on you, you won’t visit this site again. 

Yet, if on the contrary you visit a Web page that makes you feel active, excited, and you’re about buying a product, you will probably end up buying it. All of this can be and it is influenced by the website’s colors.


So, color psychology, though not profoundly explored yet, it has to be recognized as a significant factor that causes different reactions among people. Thus, you will need to choose your website colors carefully or else you won’t cause the effect you want to within your visitors.

Website color scheme statistics

  • 80% of consumers believe that colors are vital for brand recognition
  • 46% of people believe that a website’s design is decisive for its brand’s credibility
  • 93% of shoppers concentrate on brand colors when they’re about to buy a product
  • Brand colors boost brand recognition by more than 80%
  • Less than 50% of marketers use their brand colors on their presentation slides
  • 21% of marketers use their brand colors on most of their presentation slides
  • When buying a product, people take quick decisions (within 90 seconds). Between 62% to 90% of that decisions are based on color alone. 
  • 40% of people react better to visual data than text alone
  • 93% of consumers care about visual appearance when buying
  • Ads in color have up to 40% more chances of being read in comparison to their black and white counterparts
  • 90% of the information that reaches our brains is visual
  • We understand visuals up to 60,000 times faster than text
  • Color can boost comprehension by 73%
  • Color can enhance the process of learning from 55% to 78%
  • Color can improve readership by 40%
  • According to UserTesting, women prefer websites that use bright colors giving them 4.35 rating score. Men prefer them too, thought their rating is a little bit lower 4.18.
  • But, according to this same source (UserTesting), although men still quite like websites with dark colors rating them 4.04, women only gave these kind of sites a 3.38 score (the lowest in comparison to the rest)
  • Yet, both genders agree on the fact that on average they don’t like white color for websites. Women rate them 3.6 and men 3.54
  • Men prefer pure or shaded colors. But women like tints more.
  • Most people prefer simple color combinations, 2 to 3 no more
  • Blue is well-liked by both men (57%) and women (35%)
  • The colors men love most are: blue, green and black
  • The colors women love most are: blue, green and purple
  • The colors men hate most are: brown, purple and orange
  • The colors women hate most are: gray, brown and orange

What are the best colors for a website?

That’s not as easy a question to answer. There are many things you should bear in mind. There is no doubt that you need to keep in mind what colors convert the most. Still, you cannot choose your website colors based only on that.

What’s more, you might be tempted to choose your favorite color as your primary color. But, that would be a mistake as your site’s colors should be chosen according to your audience preferences not yours.

The color or colors you choose for your brand’s logo would always be a symbol of your brand’s identity. Thus, something similar happens with your website colors. People would identify your site’s colors with your identity and they would judge your site because of that.

So, it seems that the colors you use on your web design matter. And, it’s something you should devote some time to. Indeed, to reach a decision you need to consider several aspects.

You should do some color research and check how colors influence how others feel. Only afterwards can you think about what kind of emotions you want to evoke. Take emotions into account to decide your website colors.

What’s more, you need to pay attention to your audience. Are they mainly males? Females? How old are they? Where do they live? All this affects your website color scheme choice.

Last but not least, it’s advisable to apply the 60-30-10 rule. I mean, if you pick three colors for your website, 60% of your site would be for a dominant color, 30% for a secondary color and 10% for an accent color.

It’s also advisable to check the color wheel to decide which colors you are going to use. You can either decide to go for similar or opposite colors depending on what effect you want to provoke.

Quick Tip:

Do not miss out on the opportunity to check what’s what your competitors are doing and choose colors which are different from the ones they use. Otherwise, you could be confused with them.


The last advice I can give you is to test your website color scheme efficiency. If for whatever reason you realize your colors are causing you trouble and do not provoke the emotions you want them to, it’s never too late to change them. 

You can A/B test with different color combinations and choose the one that works best for your brand. Let’s have a look at color symbolism more in detail!

Color symbolism

Red – The color of passion and danger

red website screenshot
Source: Red

As any other color, red can have both positive and negative effects on people. Red is the color of passion and power, but it can also make people feel they’re in danger, alertness and awareness.

What’s more, red is good for detailed-oriented tasks. Although, it’s not adequate when you need to come up with creative solutions. 

Yet, on clothing, it has a positive effect as it’s generally associated with not only feeling, but also appearing more attractive in the eyes of others.

As regards marketing, red is considered to be a dynamic and powerful color. It can also convey friendliness and strength. It’s ideal if what you want is to call someone’s attention quickly. Yet, it’s advisable to use it moderately to avoid its negative effects.

Best Color Combinations to use with Red

What colors combine well with red? 

Red is a dominant color, so you should always be careful if you choose red as one of your primary colors. Do would not want to combine red with too many other colors, especially if those colors are dominant.

Red goes well with green, as they are complementary colors. It works well with yellow too, for example. It also depends on the shade of red you are using; not all reds are the same, so not all reds combine well with the same colors.

According to Bright Side, these are good color combinations that work well with different shades of red:

  • Red: combines with yellow, white, fulvous, green, blue, black.
  • Tomato-red: combines with cyan, mint green, sand, creamy-white, gray.
  • Cherry-red: combines with azure, gray, light-orange, sandy, pale-yellow, beige.
  • Raspberry-red: combines with white, black, damask rose

Another advice I can give you is not to use 50% red and 50% green as it could be annoying for people’s eyes. You can use shades of blue to add a third color. Remember the 60-30-10 rule!

It’s also a great idea to combine red and pink with a light gray background. Thus, giving the impression of being not only creative and fashionable but also more lively. Another good idea is to combine red with black and white.

Orange – The color of encouragement and enthusiasm

Source: SoundCloud

Orange relates to security, passion, fun, and warmth. What’s more, Orange is also associated with ambition and energy.

As regards its marketing meanings, Orange is an excellent choice to represent food, shelter, and warmth. Most people agree that it’s also a great motivation color as it conveys enthusiasm and a positive attitude.

Great Color Combinations to use with Orange

But what colors go well with Orange?

In general, we can say Orange combines with blue, violet, cyan, white and black.

Well, Orange can be used with a black background as it calls people’s attention. It’s an excellent option for your CTAs; it’s widely used in many websites.

In the previous combination, you can also add yellow. I mean, black, yellow, and Orange usually work well for websites. Just make sure Orange and yellow do not touch each other a lot as this may be confusing, depending on the shades of Orange used.

If you want to convey energy and optimism, you can also combine shades of blue and Orange. This combination is quite powerful.

Yellow – The color of optimism and positivity

Source: Little Sun

Did you know that Yellow is the most visible color for the human eye?

However, it’s also associated with a depressing effect. It can also be overwhelming if there is too much Yellow, so you should be conservative using Yellow.

Yellow is also considered a youthful and optimistic color. It is good to convey friendliness and creativity too.

As regards marketing, yellow is generally good to encourage inspiration, boost confidence, and lift someone’s spirits. Yet, it would be best if you were careful with this color as too much Yellow can cause fear and anxiety.

Good Color Combinations to use with Yellow

What colors go well with yellow?

Yellow is usually mixed with a black background. Both orange and yellow go well with black.

You can also use yellow with blue and pink if you want to create a lively image. Just remember not to use too much of it as a considerable amount of Yellow can be annoying for people’s eyes.

You can combine Yellow with blue, violet, pink, cyan, black and gray.

Green – The color of eco-friendly, growth and health

trulia website screenshot
Source: Trulia

Green is the color of plants, trees, and leaves. That’s to say; it’s the color of nature. Green is usually associated with eco-friendly products and services.

As to marketing, Green is the color of money and wealth. It also promotes the idea of health, balance, and refreshment. It conveys peace too.

Among its negative meanings is worth mentioning that Green is associated with materialism. Though, it’s positive effects outweigh the negative ones.

Best Color Combinations for Green

It’s relevant to mention that Green goes well with blue and several shades of brown. These three colors can easily represent a natural environment.

Sometimes blue, green, and brown are also used to convey trust. Indeed, blue and green combined with white can provide a fresh, clean, and new sensation.

It’s also possible to combine green, yellow, and black. This mix provokes a sense of adrenaline and excitement typical of sports.

You can choose between a variety of color combinations depending on the shade of Green that you use. One more time we reference Bright Side and their Cheat Sheet:

  • Olive: combines with orange, light-brown, brown.
  • Green: combines with golden-brown, orange, salad green, yellow, brown, gray, cream, black, creamy-white.
  • Salad green: combines with brown, yellowish-brown, fawn, gray, dark-blue, red, gray.
  • Turquoise: combines with fuchsia, cherry-red, yellow, brown, cream, dark-violet.

Blue – The color of trust and intelligence

healthcare website screenshot
Source: HealthCare.gov

Blue has a calming effect. It’s usually identified as the color of water and the sky. Thus, it has a calming effect.

Among its negative feelings, Blue can mean coldness, lack of emotions, sadness, or depression.

But, as regards marketing, Blue is widely used as it conveys loyalty, sincerity, and trust. Users perceive Blue as an intellectual color that is good for communication, logic, and coolness.

On top of that, blue is a well-liked color by both women and men. It’s great for building relationships, most of all, in marketing.

Cool Color Combinations that work with Blue

There are lots of colors that work well with Blue. For example, other blue shades, green, and brown. But, you can also combine blue with red and green. It is also a great idea to mix it with gray if you want to create the idea of being more conservative.

Besides, blue and purple also combine well. You can even mix blue and orange to add the idea of high-energy into your site.

As you can see, there are lots of colors that go well with Blue. So, it might be the right candidate due to its easy combinations. Yet, you shouldn’t choose a color just because of that.

Purple – The color of mystery, spirituality and luxury

cadbury website screenshot
Source: Cadbury

Color psychology connects Purple with the idea of luxury, quality, and truth. We usually use this color for beauty products.

It can also mean magic and mystery. It is undoubtedly associated with the imagination and the spiritual.

As to marketing, Purple is an attractive color. It is good to convey new ideas and creativity. Yet, if you use it too often, it can cause distraction.

Color Combinations

Purple goes well with blue; together, they can have positive emotions like energy and peace.

You can also combine purple with gold and black to convey luxury, fashion, and for being extravagant.

What is more, purple can mix well with blue and pink too.

Red, and light Purple is an elegant combination full of energy.

Pink – The color of femininity and playfulness

baskin robbins website screenshot
Source: Baskin Robbins

Pink is usually associated with femininity and with what is romantic. It gives people a sense of compassion and true love. It can be linked to playfulness too.

As regards marketing, we identify Pink with love, warmth, tranquility, and sexuality.

It is also the color of empathy and sensitivity. Yet, too much Pink is generally related to a lack of power and even immaturity.

Pink is an excellent choice for fashion.

Great Color Combinations that work great with Pink
  • You can use red, black, and gray to convey not only luxury but also great sophistication.
  • Red and Pink with a light gray background are a lively combination.
  • Pink, purple, and blue are typical mixture too.
  • Bright Pink with pastel blue and pastel purple, to be more specific, go well indeed.
  • It is possible to combine pink and green or pink and yellow. Yet, these last combinations are more tricky, and if you decide to use them, you will need to be extra careful.

Brown – The color of the earth and stability

magnum website screenshot
Source: Magnum

Brown is probably not one of the most visually appealing colors. But, brown is a color that can be related to security and protection. Many people believe that brown brings constant support.

As to marketing, brown is a serious color, it is connected with the idea of being down to earth. The downside is that if used too often, it can be a boring color. Then, make wise use of it!

You can use brown with blue and green. This way, you will get an eco-friendly and natural mixture. 

Brown can be used with yellow, black and grey too. In this combination, yellow would be highlighted against the rest of the colors. So, brown would be just one more similar or color alike participant.

You can also use a combination of different shades of brown and blue to give the impression of comfort and peace.

Black – The color of elegance and sophistication

roccat gaming website screenshot
Source: Roccat

Black makes people feel confident and successful. It is also linked with the idea of something being either expensive or sophisticated. It is a timelessness and elegant color.

As regards marketing, black is a serious color. It means control and independence. The downside is that black is the color of death, evil, depression and mystery.

Black is a fantastic color to cause a high-contrast. But, be careful as too much black can have a negative impact. Black goes well with almost any other color, unless this one is too dark. You can combine it with white, red, yellow, pink, orange, etc.

There are many good website color combinations using black. For instance, you can use a black background with red and green, as these two would be highlighted by contrast.

Likewise, it’s also possible to have a black background and then use gray, pink and red. Or, you can use a black background again, but mixed with blue, gray platinum and orange. This last combination can be quite futuristic.

White – The color of purity and minimalism

snp agency screenshot
Source: SNP

White is connected with the idea of being calm and feeling good. It usually transmits the idea of freshness and cleanliness too. Still, too much white can give the impression of ignorance and coldness.

As regards marketing, white is linked with new ideas or even new beginnings. It’s great if you want to convey simplicity, creation or a new beginning. Yet, too much white can transmit loneliness and emptiness. 

What colors don’t go well with white? Well, not too many. The ones that are very similar or too light it would be better to avoid them. If you are going to combine 2-3 colors, you would want to show contrast, at least with white.

Thus, you can mix white with red and black for instance. Or, you can mix white with pink, black, blue, purple and gray. There are many combinations. Indeed, you can also use it for the background too.

Gray – The color of conventionality and professionalism

jotdown magazine website screenshot
Source: JotDown

Gray is usually related to the idea of being conservative and serious. On the other hand, these days it’s also used to convey the idea of high-tech, sophisticated and it gives an advanced image.

As to marketing, it’s relevant to mention that light grays are are feminine in nature, whereas dark grays are masculine in nature. It is also a timeless and very practical color.

But, what colors can we use with gray? You can mix gray with blue and even black. These three colors are typical of more conservative designs. 

Indeed, you can also mix blue, gray and orange to give the idea of sophistication. Another example would be black, gray, brown and yellow. In the last two examples, orange and yellow should be used on the CTAs to provide more contrast.

Why website color schemes are important?

First of all, color schemes cannot contradict your brand’s philosophy. Basically, because colors have an effect on how people perceive your website. Thus, your brand.

Failing to choose the right colors for your Web page could cause confusion. Or even worse, send the wrong message.

So, it’s vital that you devote some of your time and effort to think about what colors would work best for your site. If you happen to find a great website color scheme, you would engage better with your audience as well as catch their attention more easily.

Not to mention that if done properly, your site’s color scheme would not only turn your visitors into your customers quickly. But, they would also visit your site again.

Source: Virgin Atlantic

Website color schemes are used for more than just making your designs beautiful. From all of the forms of non-verbal communication, color is the most instantaneous way of conveying messages and meanings.

Colors play an important role in the identification process like symbolizing complex concepts and producing emotional responses. Since colors get consumer’s attention to your brand, unconsciously they will trigger an automatic association on their minds.

Thus, using the right colors on your website is critical for success. And placing importance on color communication on your website will help you to increase conversions.

That’s all for website color scheme fundamentals. Now, you know the basics and hopefully understand colors importance. If you want to know more, in the next chapter I’ll tell you all about website branding with color schemes.

Chapter 2

Website Branding with Color Schemes

Now that you know how important website color schemes are, I’m going to focus on website branding thanks to the right color schemes.

In this chapter, I will talk about website branding and the color theory for web design. So, I will concentrate on the color wheel and color harmony too.

Then, I will devote some lines to the importance of color combinations in a website. Not to mention the fact that, I will tell you all about how many colors should you use. 

And to finish, I will go one by one analyzing the best color combinations for a website in 2020. Ready?

Website Branding

In order to be able to succeed in website branding, first you’ll need to know what a brand is. And then, acknowledge website branding importance. Yet, it seems that the term brand is quite ambiguous and has many definitions depending on who you ask.

Well, to put it shortly, a brand is the personality of a business. What’s more, a brand is the attitude people have towards a particular company, product, service, organization, etc. 

Indeed, brands are different things to different people. That’s because brands are about perceptions people have, and as you all know, that’s really complicated to define.

nyx cosmetics website screenshot
Source: Nyx

Anyway, why is it so important to pay attention to website branding? Well, website branding is critical nowadays because the same as people identify your logo with your brand, they also identify your Web page with your brand.

That’s to say, your website forms part of your personality as a brand. So, people would judge you because of that. When visitors happen to see your site, they will create an idea of who you are based on what they can see on your website.

Thus, paying attention to your Web page’s image is critical. You will have to make sure that you post relevant and up-to-date content. But, you will also have to focus on how this content is portrayed on your site. It will have to look appealing.

Color theory in web design

There are one thousand reasons why you should apply the color theory into your web design. The truth is that colors have an impact on your overall brand identity. I mean, the same as when someone says a word and this word provokes certain feelings on you, or at least a reaction; colors have a similar effect.

When you see a color, there is an instantaneous reaction towards it. And this reaction tends to be the same for many people. Yet, this doesn’t fully work among cultures.

So, it is key that once you have chosen your brand colors, you use them consistently. I mean, not only on your logo and your website, but also on your staff uniforms, ads, stores, etc.

As these colors are going to be widely used by your brand, you will need to think about your brand identity. In other words, what kind of personality you want to convey such as serious and trustworthy or playful and energetic, etc.

On top of that, under any circumstances you shouldn’t choose a color just because it’s your favorite. This color might not be a good choice for your brand personality or for the product/service you sell, etc.

So, your color choice should be based on the message you want to communicate. In order to be able to choose your website colors properly, you must focus your election on the color theory. 

The color theory is the one that explains to you that some colors work well together while others don’t. I mean, now that you have clear that each color provokes specific reactions, it’s fundamental to be careful with which colors you mix.

Thus, you will need to pay attention to the color wheel. There, you will find, primary, secondary and tertiary colors. On top of that, understanding the color wheel is fundamental as there are colors which according to their position on the wheel can be complementary, analogous, etc.

Color wheel

adobe color wheel website screenshot
Source: Adobe Color

The color wheel is a circle whose aim is to help others understand color relationships and how they can be combined. It illustrates each primary, secondary and tertiary color as well as its corresponding hues, tints, tones and shades.

Thus, it’s a colors circular graph that will help you to better choose your website color scheme. Why? Because the color wheel not only shows you pure colors, but it also portrays how would they be if they were lighter, darker or if mixed with other colors. 

So, for a website color scheme the color wheel is essential so as to check combinations in advance. It consists of the following components:

Hue
Hue is a color that is pure. In other words a hue is a color without a tint or a shade. So, hues are all the primary and secondary colors, but without having added either black or white to any of them.
Tint
Tint is when you add white to a hue.
Tone
Tone is when you add not only black, but also white to a hue. It’s also called saturation.
Shade
Shade is when you add black to a hue.

Color harmony – Models of color schemes

Color harmony means organizing colors so that they are pleasant and appealing for website visitors. If your website colors are organized, users will perceive them as pleasant and attractive. That’s to say, they will get a positive impression.

But, if the color distribution on your site looks chaotic, visitors will feel uneasy. Thus, a certain type of color balance is necessary on a website. Below, you will find models of color schemes that work effectively for websites:

Monochrome model

adobe color monochromatic model website screenshot
Source: Adobe Color

It’s the simplest model. It consists of choosing one color; and then combine it with its own shades and tones. 

Thus, it’s a safe option as it’s complicated to design a monochromatic scheme that’s not appealing, unless you make a mistake with the color you choose.

Complementary model

Source: Adobe Color

What you do in this model is to choose colors that are placed in front of each other in the color wheel. This kind of model is ideal if what you want is to show high contrast and opposition with your colors.

Analogous model

Source: Adobe Color

Were you to choose colors that are placed next to each other on the wheel, you’ll be using an analogous model. This is the type of model that people choose when what they want to communicate is no contrast at all, or when contrast is not necessary.

Triadic model

adobe color triadic model website screenshot
Source: Adobe Color

This model consists of three equidistant colors. It is advisable to choose one as the dominant. Thus, the other two would be accent colors.

Tetradic model

adobe color tetradic model website screenshot
Source: Adobe Color

This model is by far the most complicated one as it uses a total of four colors. So, combining them would be challenging. The colors you choose have to create a rectangle on the wheel. Indeed, these colors need to be complementary pairs.

Square model

adobe color square model website screenshot
Source: Adobe Color

This model takes four colors too. But, contrary to the previous one, the colors you choose in the wheel would create a square instead of a rectangle. If done properly, it looks very nice on a website.

Color combinations for a website

counter print books store website screenshot
Source: Counter Print

Why should you use color combinations on your website? Easy, if you chose the same color everywhere, there wouldn’t be anything highlighted such as a CTA. As attention spans are everyday shorter, it’s vital to use some strategies to call users attention.

Moreover, colors are so important because up to 90% of purchasing decisions are based on colors alone. Then, it’s fundamental that you use different colors. Although, what colors to use might be a more complicated decision. But, with a little bit of research and if you know what impression you want to give, there won’t be any problem.

On top of that, the right colors combination can prove to be extremely helpful for your brand. Think that, if your visitors like the aesthetics of your site and if you use colors wisely, they would probably visit you again.

And this is crucial for online businesses as most consumers don’t usually buy on the first time they happen to end up in a website. But, they visit different Web pages, compare and then decide. So, the right colors might get you more clients.

Important Note:

Multi colors can not only have a higher impact on users, but they can also be used to communicate diversity of products/services, more creativity or just for fun. There is no doubt that creative and fun websites are highly attractive.

Key colors on a website

psy ops type foundry website screenshot
Source: Psy Ops

It seems that your website colors matter a great deal. But, what do you need to know in order to choose color combinations? Well, first of all, you need to know what primary, secondary and accent colors are. Let’s look into it!

Primary colors
There are three primary colors: red, yellow and blue. Primary colors are the ones you can use to create other colors. For instance, if you mix yellow and blue, you get green.
Secondary colors
Secondary colors are: green, orange and purple. They are made from the combinations of primary colors. For example, if you mix red and yellow, you get orange. But, if you combine red and blue, you get purple.
Accent colors

Accent colors are the ones you use to give emphasis on a color scheme like on your CTAs. So, they are used to focus visitors attention on key pieces on a website.

You can also use them on important links or to highlight certain sections. Be careful not to overuse them or they won’t have a contrasting effect.

Base/background color
This is the color you use on your website background or base. Usually, it’s only one color and not very bright. This way, it’s easier to contrast with the colors you want to highlight.
Text colors

There are different text colors on a website. I mean, you have the main text color which is the color you use for most of your site’s text. Then, you have the text color on links. Normally, the text color on links is brighter as it pretends to draw users attention.

And finally, the text that you use on headlines has to differ from your main text. Mainly because headlines are keywords and they communicate pivotal information. So, you would want to differentiate them from the rest.

Quick Tip:

Remember to use dark gray not to have the full contrast and be gentle on the eye instead of black. Too much contrast can be negative at times. Be careful with the colors you use!

Try to use your accent color only if you want to draw your visitors attention. If you overuse your dominant color, it would no longer be that powerful and effective.

How many colors should be used on a website?

60 30 10 color rule

Generally speaking, you should use three colors to design your website. But, this doesn’t work for all enterprises, it’s just a general rule.

What’s clear is that you will need a background color and a dominant color that represents your brand personality. And then, one or two accent colors to create contrast.

Making all these colors fit together is not at all easy. Different colors will create different reactions depending on how they are combined. Most designers agree on using the 60-30-10 rule to create a pure harmony. 

That’s to say, 60% of your website color space would be for a primary color. Then, 30% of that space would be used to provoke a contrasting effect. The last 10% is the space you use to highlight key content with an accent color.

What are the best color combinations for websites?

Were you to choose to combine your primary color with white and gray, you would have made a great choice. 

This mixture is quite simple. Yet, simplicity is positive here because your primary color would be highlighted and the contrast you can obtain will play in your favor to call people’s attention!

1. Your primary color + White + Gray

Not surprisingly, this combination is quite simple too. But, it’s very effective indeed. Playing with the same color can give your website a highly trendy and appealing effect.

2. Same color but desaturated (same color but less % of it)

blue same color palette

These are some examples of website color schemes carefully chosen to boost your user engagement. These color combinations are not only effective, but they have also been chosen due to the emotions/feelings they communicate.

3. Pink + Violet + Blue

pink violet blue color palette

Such a colorful combination can give the impression of being lively and fresh. If done well can result not only eye-catching, but also sophisticated.

4. Green + Yellow + Brown

Colors from earth are no doubt energetic and thought-provoking. Why not try it? Depending on what product/service you’re trying to sell, it could be really effective as well as powerful.

5. Gold (dark yellow) + White + Black/Gray

gold white black color palette

This would be an awesome combination if you want to convey extravagance, luxury, high-quality or a new style.

6. Blue + Green

blue green color palette

This sequence is ideal for more conservative designs. It conveys the idea of being down to earth. It gives the sensation of being a trustworthy site.

7. Violet + Yellow

violet yellow color palette

Though probably quite a lot more risky than the previous mix, these two colors can work really well together. They would help you to convey the idea of high contrast. This way, each and every element would be easily perceived.

8. Red + Blue + Yellow

red blue yellow color palette

It’s a brilliant colorful combination. Using the primary colors on your website color scheme is a wonderful idea. They no doubt fit well together.

9. A well-chosen palette of shades of gray

gray color palette

If done properly it can convey the idea of being classy, timeless and really appealing to the eye. Yet, the key of this website color scheme is to select the gray shades wisely.

10. Dark blue + Nude/baby color (pink, blue, yellow, red…)

dark blue baby pink color palette

This combination can be a great option if what you want is to show big contrast among colors since dark and nude colors are totally opposite. Indeed, it would be a fantastic choice to highlight what you want to stand out and give a relaxing break with a nude color.

11. All the saturated or desaturated colors (big palette) – use with caution

colorful color palette

Either option can be quite shocking and provoke striking effects. However, if you decide to go for this option, you will need to be extremely careful. 

Remember that an oversaturated color scheme can be too bright. Thus, maybe annoying to the eye. 

Whereas a desaturated color scheme can be extremely dark and then maybe fails to draw attention on relevant items.


A website is one of the most important elements when it comes to boost your brand awareness. On top of that, your website color scheme can significantly contribute to establish your brand identity and enhance your user engagement.

As I have tried to explain to you in this chapter, your website colors matter. Thus, you shouldn’t choose them based on a personal preference or fail to acknowledge their importance. 

The colors you choose on your website will talk about who you are and what message you want to convey.

I hope the above mentioned has been useful for you. Now, you know all about the color theory and how to combine colors. But, what colors would work best on your website?

In the next chapter, I’ll help you to make the right decision, keep on reading to learn more!

Chapter 3

How to Choose Your Website Color Schemes

In this chapter, I’ll help you to choose your website color schemes and succeed. It’s vital to know what color schemes you should use on your website. But, to understand which ones you have to use, you’ll need to check out colors referring to your industry.

Besides, I’ll focus on how you can make good color schemes for your website. That is to say, what steps you have to follow. 

Finally, I’ll help you to find out your best color schemes thanks to trendy tools. And, I’ll make you familiar with all the dos and don’ts you need to know so as to make a good choice.

What color schemes to use for your website

Now that you know how each color influences emotions and why you should consider color combinations, it’s time to sharpen those website color schemes that really work well together.

Unbelievable as it may seem, there are lots of things you need to consider before deciding your website color schemes:

1. Check out colors referring to your industry

Most industries have colors that are preferred as they convey the messages they usually want to communicate. Let’s have a look at which industries match with which colors!

Red: Entertainment, Food, Sports, Retail
nintendo website screenshot
Source: Nintendo

Red is a great choice for food as it’s eye-catching and whets the appetite.  As regards entertainment and sports, red is great since it encourages motivation and raises the heart rate. And for retail industries is good too as it evokes warmth, passion and power.

Orange: Entertainment, Food, Health, Transportation
Source: PrestoMortages

As to entertainment and food, orange is a fantastic option because it combines the effects of yellow and red. So, it’s exciting and drives appetite. 

Indeed, orange is adequate for health too since it gives the sensation of having a lot of energy and being optimistic. For transportation, orange is ideal as it transmits the idea of being affordable.

Yellow: Food, Sports, Transportation, Travel, Leisure
Source: McDonalds

As well as red and orange, yellow is a pretty good color for food as it drives appetite. For sports, it’s ideal because yellow is an attention-grabbing color. And for travel and leisure, it’s a good choice due to the fact that yellow portrays the idea of happiness and warmth.

Green: Environment, Banking, Real estate, Farming, Non-profit
Source: Evernote

Green is normally associated with the environment and being eco-friendly. Thus, this idea of what is natural and healthy is the main reason why green is good for farming too. 

What’s more, non-profit organizations that aim at helping others tend to use green as one of their colors. 

But, what about banking and the Real estate, green is the color of money. So, it’s a great option to represent any of these two.

Blue: Technology, Security, Finance, Health care, Accounting
intel homepage screenshot
Source: Intel

There is no doubt that blue is ideal for security, finance and accounting as it is a trustworthy color which has a calming effect. Health care industries also use it because blue is connected with the idea of cleanliness and health. 

And in technology, blue is linked with the idea of clear communication and mental clarity. Thus, it seems to have a more reliable effect on people.

Purple: Humanitarian, Psychic, Religion
cubsta website screenshot
Source: Cubsta

Purple is a spiritual color. So, it’s often used in religion. Likewise, it’s a color that fits well in whatever business that is related to psychic issues. Besides, humanitarian organizations also make use of it since it conveys warmth and confidence.

Pink: Women targeting, sweets
Source: Barbie

Pink is generally used by industries targeting women because it’s a color that portrays the idea of what is feminine. Yet, it’s also great for sweets because of the fact that many people connect it with what is innocent. Thus, with children.

Brown: Agriculture, Construction, Transportation, Legal, Food
chipotle website screenshot
Source: Chipotle

Brown is widely used in construction enterprises due to its connection with utility. In agriculture, brown is believed to be natural and earthy. In food industries, brown is used for being connected with what is natural too. 

As to transportation, brown is somehow connected with the idea of comfort, maturity and safety. So, for legal businesses, brown is fantastic too.

Black and White: All industries
apple iphone website screenshot
Source: Apple

The combination of black and white matches almost any industry. White is the color of freedom, cleanliness, purity and simplicity. Whereas, black is the symbol of elegance, sophistication, efficiency, authority, serious, seduction, etc.

Thus, together they could do wonders for your business. These days, many well-known brands use them.

2. Understand the color preferences of your target demographic

Obviously, not everybody perceives colors the same way. That’s why you will need to know your audience preferences. There are two main factors that affect people’s predilections depending on demographic: gender and age.

Men’s favorite colors are blue, green and black. Though, they dislike brown, orange and purple. However, women’s favorite colors are blue, purple and green. Though, they hate orange, brown and gray.

Yet, this information is not enough because you also need to consider their age. As people become older, they tend to like blue more and more. Younger age groups like green quite a lot. But, as people get older they prefer purple instead.

Orange, brown and yellow are the colors people like the least. The older people are, the more they dislike orange. As to yellow, it becomes less and less popular as people get older. Thus, you will need to be careful if you happen to choose any of these colors.

3. Get inspiration for your color schemes

dribble color palette inspiration website screenshot
Source: Dribble

If you do not have a clue where to start, do not panic! There are some websites that can help you find out great inspiration for your color schemes.

The following are some of my favorite websites and tools that you can get inspiration and seek ideas for your color palette combination:

4. Spy your competition

Given the fact that you will be compared to your competitors, it would be wise to spy them a little bit. Not to copy, of course. But, to see what’s what they are doing, if it’s working and how can you do it better.

Remember that it is not at all advisable to use exactly the same colors as your competitors use even though you work on the same fields and form part of the same industry. And you might be wondering, why not?

Well, if you use the same colors to sell similar products or services not only on your website, but also on your products, logo, advertising, etc. you will be at risk of being confused with them.

Not surprisingly, this is quite a lot negative as you will lose prospects if they confuse you with your competitors. What’s more, for your brand’s identity such a thing can be contradictory too. Most brands want to stand out and differentiate from their competitors, which is what you should do.

Thus, it’s advisable to try to use different color schemes. I’m not saying you can not share some colors. But, that you shouldn’t use exactly the same. And, if you use totally different colors, it would be a lot better.

Yet, you can observe how they’re doing with their website color scheme design and how their audience, probably yours too, is reacting to these color combinations.

5. Take Grasshopper’s Branding Color Quiz

Source: Grasshopper

If you do not want to spend a lot of time so as to discover what color matches your brand best, Grasshopper Branding Color Quiz might be the best choice for you.

To put it shortly, you will just have to answer 7 easy questions and they will tell you which color works best for your brand. The answer is not at random, but it is based on color preferences, context, research studies, marketing articles, etc.

The downside is that it only tells you which color would better represent your brand. But, it would have to be you who decides on whether to use hues, tones and accent colors. On top of that, it just gives one perfect match. Yet, websites need to use more than one color.

So, this quiz is great to get started and get some advice as to what color goes best with your philosophy. Although, this information is not enough to help you find the magic colors combination you need for your website.

Now that you got ideas of what website color schemes for your brand, it’s time to choose yours!

How to create perfect color schemes for your website

1. Pick the primary color for your website

kartell website screenshot
Source: Kartell

Based on the colors that work well for your business that I explained in the previous section, it’s time you choose the primary or dominant color of your website. This will be the color your audience will identify as your brand color.

It’s utterly important that you select this color wisely and use it accordingly. If you make a mistake here, like choosing purple for a fast food brand, you might have problems so as to sell your products and/or people identifying your brand as what it is.

Indeed, your primary color should also form part of your logo. When people think about your brand and what you sell, they should think about this color. So, it’s pivotal you come up with a good option.

Apart from the colors that work best for each industry, remember to take into account your audience and their preferences as most people base their buying decisions according to colors.

2. Determine your color schemes

Once you have your primary color clear, it’s high time you decide on what accent color/s you are going to use. It’s not necessary to use many colors so as to create an awesome website color scheme. Remember the 60-30-10 rule.

Most of the times, it’s better to use a simple combination. You can always use different shades and tints if you want to be more creative.

Do not forget that your accent color/s are the ones you use to highlight relevant information. For example: sidebars, headings, captions, buttons, etc.

3. Choose your background

reuters article website screenshot
Source: Reuters

Selecting your background color is an important decision too. This is the color that has to contrast with your primary color. So, it’s key they fit well together.

Contrary to what many people believe, the background color is not there just to calm down viewers because too much of the primary color could be annoying.

But, your background color is there as it matches well with what you want to say. It’s there to highlight important information and make it easier for viewers to understand what is relevant.

You can either decide to use a light or a dark background. Still, choosing the right background color matters as it will have to create harmony between your dominant and accent colors. And at the same time, create a good atmosphere for those who visit your Web page.

Note: Light background vs dark background

Content intensive information websites usually employ a light background. This is because the aim of the background color in these websites is to make the rest of the content readable and more visible.

But, if what you want to do is to show you’ve got a powerful brand identity, then you should use a dark background. Indeed, it would be great to use different shades of your brand color.

4. Wireframe your design

Wireframes show where things go in a design without giving too many details. They represent a general idea of what the final project intends to be.

Wireframing is great as it saves time and money. It’s an easy way to share ideas before the project is finished. It also gives you the chance to try different possibilities.

The main drawback of wireframes is that they can’t show how colors contrast content nor do they show you the impact of brand design. Yet, they are useful to get an idea of how your website will look like in terms of form or what goes where.

5. Play with some different color schemes

The same as you would’ve played with wireframes to check what looks better where on your website, you will need to play with some different website color schemes once the rest is ready.

It is advisable to test how each color scheme works in different scenarios. For instance, imagine you want to create printed ads, will this color scheme work well? You should also check how it is perceived by your audience, is it having the effect you thought it would have?

If you have more than one option and you check them, you can always go for the one that is more effective. But, if you decide on one without having tested any other, you would never know whether you could have selected a better choice.

Color palette generator tools

adobe color extract from image website screenshot
Source: Adobe Color

Not sure what color palette to use for your website yet? Don’t worry, every cloud has a silver lining. The websites below will significantly help you to identify which color palette would work best for you.

These are my top seven websites to decide on website color schemes and succeed. They will help you to analyze from color palette choices to text readability. So, they would make things a lot easier for you. Why don’t you click on them and see for yourself that they work wonders?

Dos and Don’ts of Website Color Scheme

1. Keep contrast and white space in mind

github webpage screenshot
Source: GitHub

Keep contrast and white space in mind. Indeed, white space is a powerful ally. It helps with readability, improves your SEO and it helps your website rank higher on search engines.

As regards contrast, it is a must you use it. It also encourages readability. Text color must stand out from the background. Remember to use an accent color for your CTAs.

As people’s attention span is everyday shorter, you will need to guide them through your site. Yet, their journey has to be pleasant. So, be careful not to choose annoying combinations to highlight contrast.

2. Avoid to use too many colors

bbqs gallery homepage screenshot
Source: BBQ’s Gallery

Don’t use too many colors on your website. On the one hand, your brand’s visual identity will be confusing. And, too many colors cannot represent a brand’s identity properly.

The overuse of too many colors, apart from being confusing for your site’s visitors, creates a bad aesthetic that could be associated with your business.

3. Tailor-make your design

Under no circumstances should you ever copy and paste what others have done. You are allowed to spy here and there, that’s true. And you can use this to get some inspiration and ideas.

But, you cannot copy straightaway and/or repeat what other brands have done on their websites. Indeed, it is advisable that you differentiate yourself from your competitors.

And you shouldn’t use the same color combinations if you do not want to be confused with them. Remember that originality is key in marketing!

4. Stay away from bad color combinations

berbay website screenshot
Source: Derbay

Try not to use bad color combinations as colors would fight against each other and it will kill your brand’s identity.

As you can see the image above, turquoise doesn’t go well with burgundy. Such a combination harms your corporate identity.

Here’s a list of 7 of the most common colors combination mistakes that you should avoid when designing your website.

Neon

One of the first things that people may think when they are developing a website is to create something that catches the attention of the reader. The Neon color can be fun, but also are aversive and very irritating to the eyes when used in the wrong way. They can be very intense, causing the annoyance and frustration. Because they are too bright, the colors can have problems with either light or dark background.

A good way to solve the problem related to the Neon colors is to make use of a Tone. When you decrease the level of brightness from them, they will not be as intense as they were. It results in a less disturbing combination. One suggestion in designing your website is to limit your number of colors to two or three, or even four depending on the combination. It will make your content more visually organized and more engaging for the reader.

Vibrating

When you combine two high-saturated (intensity) colors, you have what is called Vibrating effect. For example, when you have a high-saturated color on the font and also in the background, it creates an aggressive and even uncomfortable situation for the eyes. It is difficult to read a text when there is this combination of vibrating colors.

The best way to solve this problem between two high-saturated colors is to use a neutral color between them, such as gray, or also decreasing the intensity of the brightness of one of them.

Light on Light

This is one of the most common mistakes; sometimes people may think that a light background matching with a light text would make it easier and simpler for the reader. But a lot of times it becomes unreadable. That’s why you need the contrast to make the font or images distinguishable from the background. For example, if you have a light background, you should make use of a dark font. Sometimes it doesn’t look that nice, but at least you are readable. If you make use of light on light, there will always be a problem to read it.

Dark on Dark

This mistake causes the same problem of the light on the light; the combination of dark colors can make the text unreadable. Instead of using both dark background and font, try to make use of some vibrant color or a light one. This would make your website way more visually appealing and easier to read.

Rainbow Colored

Sometimes people can get too excited when they are designing a new website and try to use too many colors to differentiate from the others and make it more interesting. That is a common mistake; especially for people that do not have experience in the area of designing. However, a lot of times, less is more, principally when you are dealing with colors. Even though this diversity of colors catches the attention of the reader for a moment, in a short period, it will start to be disturbing. This is because people will realize that the exaggeration of colors makes it harder to read the message.

Multiple Colored Boxes

One of the tools of web designing is to make use of boxes, because it makes the content more organized and easier to read. However, you have to pay attention to the number of boxes and the number of colors that you use on them. If you make use of too many boxes, your content can become really disorganized and visually disturbing, especially if you use different kinds of colors on the boxes. This loses the reader before they find the main focus.

One advice for those that are creating a new website is to make use of good contrast and avoid using two vibrant colors for it when designing the box.

Colors That Should Not Go Together

As previously mentioned, you have to be careful when you place two brightly colored hues together. This combination may cause a “visual vibration” which makes it hard for the reader to read it. You should avoid some color combination, such as: green and red; blue and orange; orange and yellow; purple and yellow; blue and green.

If you are willing to use a combination of any of these colors, be sure to use a neutral color between them or to reduce the brightness of one of them.

5. Beware the effect of using gray in buttons and titles

Source: Tesco

Under any circumstances should you use gray in your site’s buttons and/or titles. Why? Because when something is selected it turns gray as if it was deactivated. So, it creates a shadow effect.

What’s more, on this site the paragraph text is blue and the title is gray. Yet, this should be the other way round.

6. Watch out your website’s legibility

Not surprisingly, legibility is key. If you want your website to be effective, it will have to be easily readable. Color does affect readability. Indeed, colors should be used to help viewers notice relevant aspects of your site.

In other words, colors should work as a guide for users to better find relevant information. If your colors combination doesn’t fit well, it would affect the legibility of your site.

So, you need to make sure your website color scheme doesn’t affect readability, but guides users through your site.

7. Don’t overuse color gradients

hard rock cafe website screenshot
Source: HardRock

Some websites overuse color gradients. The truth is that you shouldn’t use them when they are not needed. What surprises me the most is that in this example, there is even a gradient on the search box on the left.

8. Don’t forget about branding

Use color to strengthen your brand’s image. Indeed, your brand’s image should be represented by everything that has to do with your brand: ads, logo, staff uniforms, etc.

Thus, your website is just another element on this list. It represents your brand and it should use your brand colors.

9. Try not to create too much vibrancy among colors

wipp express website screenshot
Source: WippExpress

Likewise, you should be careful not to use too much vibrancy. For example red vibrates too much with a blue background. Thus, it can be unpleasant for the eye. What’s more, the blue borders in the boxes are too heavy. So, be careful!

10. Consider user interface

A good user interface is crucial as it provides a user-friendly experience. Mainly, what it does is to help your site’s visitors to interact more naturally with your website’s software and hardware. That is to say, in a more intuitive way.


And that’s all for how to choose your website color schemes. Now, you know what features you need to bear in mind so as to make the right decision.

But, you still need to know where to use them and where not to. In the next chapter, I’ll tell you how to apply your color schemes on your website.

Chapter 4

Apply Your Color Schemes on Your Website

It’s high time you start using your website color schemes, but where? In this chapter, I’ll explain to you where you have to use your website color schemes. First, I’ll focus on your primary color. And then, I will continue talking about your accent/secondary colors.

On top of that, I’ll look at how to select the right images for your website. That’s to say, I will provide you some rules for website images. Then, I will comment on stock photography sites. And, I will also differentiate between free and paid stock photos.

Finally, I will show you how to create CTA button colors that convert. Not to mention that I will reveal the best and worst colors you can use on your CTA buttons. Ready? Let’s get into it!

Where to use your website color schemes

Once you have done some research about your industry colors and what your competitors are doing, you would probably have decided on your magic website color scheme. Remember that your choice should be original and not a copy of what your competitors are doing.

So, you will probably have your selected colors by now. But, where should you use them? And, what percentage would work best? Well, remember the 60-30-10 rule I mentioned before. It is not advisable to use exactly the same amount of each color as it would be more difficult to create contrast.

As regards where to use them, your primary color should be used to draw users attention to extremely important content. Whereas your secondary colors need to be used for less critical details, yet still relevant ones.

Primary color on your website

Primary colors are the ones that you can use to highlight important information. Your primary color will help you to call your viewers attention so you can guide them through your website.

You can use your primary color whenever there is something which you do not want your viewers to miss such as an important CTA. Still, you shouldn’t use your primary color too much or it would stop causing the effect it is supposed to. I mean, grab your audience’s attention.

home24 website screenshot
Source: Home24
  • Logo
  • Title and headlines
  • Call to action
  • Header
  • Highlight important information box
  • Hyperlinks
  • Icons
  • Graphs

Secondary/accent colors on your website

On the other hand, secondary or accent colors are more often used because you can employ them to highlight secondary information. For instance, you can use them to stress the relevance of support content like a testimonial or on secondary CTAs.

carhartt shop website screenshot
Source: Carhartt
  • Subtitles and subheadings
  • Call to action
  • Highlight secondary information box
  • Footer
  • Icons
  • Graphs

How to select the right images for your website

There are many elements you will have to take into consideration to choose the right images for your website. From the images size, pixels and colors to where you get your site’s images, everything counts.

Actually, choosing your website images is not at all easy. Most marketers don’t change their website images every now and then. But images are supposed to be relevant for a long time. Thus, selecting the perfect images for your Web page is a pivotal decision.

Besides, the images you choose have to represent your brand and impress your audience. Yet, sometimes it can be such an ordeal to find images that convey just what you want to say with them. So, you can also ask a professional to take pictures for you.

vodafone business employees photos screenshot
Source: Vodafone

For instance, if you want to show your brand’s personality, you can use a photograph of your employees. Still, this image should be real. Otherwise, a fake image with models would look just that fake. And instead of showing your brand’s personality, you run the risk of being deceitful.

Rules for website images

There are lots of aspects you have to consider to pick the right images for your website. Many would say it is not that relevant. However, images convey information, they help you to send a message to your audience.

Consequently, the images you choose for your web page do matter. Remember that an image is worth a thousand words. So, better choose your site’s images properly.

Besides, you should consider the rule of thirds when choosing your images. According to this rule, you have to divide an image into thirds both vertically and horizontally. 

Thus, you get four lines where important image elements should appear if you want your image to look more natural. Thus, more visually appealing.

kerastase water website screenshot
Source: Kerastase

But, what features do you need to bear in mind to choose website images?

Below there is a list of the main aspects that are relevant. Let’s have a look at them!

  • Use high-resolution images
  • Singularity matters
  • Image size is crucial
  • Be aware of licensing
  • Be careful with photos of people, they can either help you or harm your image
  • Find the balance between literal and abstract images
  • Don’t use cliché stock photos
  • Contemplate hiring a professional photographer
  • Employ faces, they evoke emotions
  • Work with images your audience identifies themselves with
  • Take pixels into account when choosing your images
  • Come up with pictures that represent your brand, your message, your identity
Quick Tip:

Bear in mind the color palette when choosing images for your website.

While it might be tempting to use bright and colorful images to draw others attention, it won’t always play the trick. Indeed, simplicity is better here. 

So, try to pick images that not only employ simple color combinations, but also images whose dominant colors go well with your website color scheme.

Stock photography sites

There are many stock photography sites available where you can get interesting images and normally for a reasonable price. Yet, remember that on these Web pages there is a lot of material, some of it extremely valuable, other might not be that useful for your site.

So, if you plan to use stock photography sites to get images, do a little bit of research first. Do not get the first image you see. What’s more, it’s advisable not to choose the images on the first pages as these ones might have been downloaded many times.

This matters as you won’t probably want to have the same images on your website as many other websites. It is unavoidable that if you get your images on one of these sites other people can get them too. Yet, you can always try to select one that hasn’t been chosen by thousands already.

istockphoto website screenshot
Source: iStock

Apart from that, stock photography sites can significantly help you to find awesome images taken by professionals. So, you shouldn’t be afraid of using them. There is a lot of great material out there. You just need to find it.

Below, there are some well-known stock photography sites that can help you with your site’s images.

Free vs. Paid stock photos

Whether you should use free or paid stock photos is open to debate. Thus, it depends mainly on your personal choice.

If you want to pay for your images, you can either use one of the websites I have just mentioned above or you can hire a professional photographer. 

Most marketers only go for the second option if they cannot find appropriate images online. Or when the motive of the image requires so like a team/company picture.

google advanced image search
Source: Google

Indeed, you can also look for free images online. There are tools like Advanced Image Search on Google where you can search for images for commercial use. 

Yet, most of the times these images are usually of a lower quality. But, who knows, you can find the ones you need and they are good enough for your site.


The key is to do some research, know what you want and consider several options before selecting your images. This way, you will make sure they match your brand’s image, website and philosophy.

Call-to-action button colors that convert

There are one thousand reasons why the color of a CTA button matters. Among many others because of lead generation and purchasing decisions. But, what color should you choose for your CTAs.

Well, if you want your CTA buttons to generate more leads and influence on purchasing decisions, your CTAs need to stand out from the rest of the Web page. A big contrast with the background is great. 

But, if you manage to make it highlight so it contrasts with everything else, you will no doubt increase its visibility. Thus, it will make a difference in your leads.

roncato shop website screenshot
Source: Roncato

Actually, a very well-known way to create contrast on your CTAs is choosing complementary or triadic colors. This way, you will make sure your CTA button differs from the rest.

Not surprisingly, you have to use brand colors on your CTAs or at least colors that your audience feels identified with. For instance, if you choose pink for a CTA button on a website whose audience is mainly men, it might not be very effective. So, it won’t generate many leads.

Another aspect you need to consider is to use colors consistently. That’s to say, try not to confuse your users. If you use the same color for CTAs and items which are not clickable, your CTAs will be unquestionably less productive.

Last but not least, choose a color that significantly increases the visibility of your CTA. Do not use the same color for your CTA buttons and for other items on your website.

Note:

If you add a sense of urgency to your CTAs, they will be significantly more effective. So, it’s worth trying. Remember that what works for some websites doesn’t have to work for all the Web pages. So, A/B test till you find something that works for you.

Best and worst CTA colors

What colors are best and worst for CTA buttons is open to debate. Yet, most marketers agree on the fact that the best colors for your CTAs are the ones which undoubtedly contrast with the rest of your website colors.

I mean, which colors are best or worst varies depending on the website and the colors that are used in that web page. For instance, if you have used green on your site’s background, green won’t be a good color for your CTA. Why? Because there wouldn’t be so much contrast.

jack and jones shirt shop website screenshot
Source: Jack&Jones

Many researches say that the best colors for CTA buttons are red, green and orange. But, you might be thinking why these three? Well, it’s true they call users attention and will easily contrast with many other colors.

Red stands out on most websites. On top of that, red is a color that evokes excitement and creates urgency. 

Green not only has a certain calming effect, but it is also associated with “go” in driving. Thus, it is also a good option.

Orange is a warm and exciting color. It’s also related with being energetic. So, it asks people to take prompt actions.

Source: Tom Ford

As regards the worst colors for your CTAs, it is worth mentioning black, white and brown. Any of these three colors is not a good option. Generally speaking because they don’t easily stand out on the majority of websites.

Indeed, black is totally dark and gloomy, what makes it difficult to highlight it on most website backgrounds.

Likewise, white is too light. Thus, it is hard it catches the eye on most backgrounds. What’s more, as a CTA color it’s terrible because white does not communicate many emotions, nor does it have a sense of urgency.

Brown is not liked by many people. Many think it is a boring and ugly color. So, it doesn’t motivate the average customer to go and click on CTAs.

Quick Tip:

To improve conversions from your CTA buttons, you will need to tell your website visitors the next logical steps. In other words, the more specific your CTA message is, the more conversions you will get with it.

Colors matter, but what you say matters too. So, you will need to find the perfect combination if you want your CTA buttons to be more effective and succeed.

How to choose CTA button colors for conversion

As I mentioned above, colors have a powerful psychological influence on your decision-making processes. So choosing the right CTA button colors affects your conversion rates and user experience.

Check out these important tips on how to select your CTA button colors:

1. Use a contrasting color on your main CTA buttons to stand out in comparison with the background

No wonder you should choose a CTA color that sticks out from the rest of your Web page. But, you would also need to make it clear that your CTA button is clickable, or else it would be less powerful.

Think of your CTA buttons as what they are. They have to be somehow rectangular and with borders. That is to say, they need to have a button shape to look clickable. And then, the more contrastive the effect they create, the more efficient they will be.

2. Match the color with your brand

zalando shop jacket website screenshot
Source: Zalando

It should come as no surprise so far that your CTA button color should match your brand colors. If you happen to pick a CTA color that doesn’t go with your brand colors, your CTA won’t be that much effective. 

Or even worse, you can confuse your website visitors and they wouldn’t understand your CTA as the next logical step. So, it will dramatically affect your CTR.

3. Strategically add white space

The importance of white space cannot be underestimated. The truth is that white space is relevant because it provokes a calming effect among website users.

Indeed, if you decide to include a white area around your CTA buttons, you will notice an increase in clicks.

In other words, if you use the right amount of white space on your Web page, this will influence the effectiveness of your CTAs. How? Because using white appropriately will make your CTA buttons more visible.

So, the more visible your CTAs are, the more productive they will be. On top of that, white helps to make websites not only long-term trusted, but also more successful.

Yet, where to use white and how much of it will depend on your website, its color scheme and any other elements it might have. Though, the use of white no doubt increases your CTAs success. Don’t be afraid of using it!

4. Leverage secondary CTA buttons

amazon usb cable shop website screenshot
Source: Amazon

Most websites only use one CTA button. Thus, if the site uses the right colors, its CTA button will stand out from the rest of the content. However, some Web pages need to use two CTAs as they have more things they want to highlight.

The problem is that in the second scenario with two CTAs, both of them can not be equally important. This would cause a lot of indecision and many users won’t click as they would be unsure of what to do.

So, if you use several CTAs (don’t use more than two), one of them has to be more prominent than the other. This way, most users will click the more visible CTA.

Another tactic that usually works well is to make the text of the secondary or muted CTA uncomfortable such as “Yes, I want more X, please” (main CTA) vs. “No, I’ve got enough X” (muted CTA).

Most people never have enough of X if what you have to offer is good. So, the obvious click would be the “Yes” option.

5. Don’t forget to consider CTA buttons size

Finally, it’s critical to consider your CTA button size. If your button is too small, it won’t be visible enough for your website users. Yet, if your button is too big, it will be annoying or the only thing your users would perceive on your website.

So, you should look for a size that is big enough in comparison to the rest of the elements on your website. But, a button size that doesn’t disturb your website visitors.

On top of that, do not forget to optimize your website CTA buttons for both desktop and mobile users. Most people browse the internet through their mobiles nowadays and button sizes differ.

For instance, on a mobile device buttons have to be big enough so that they can be clickable with a thumb.

Important Note

The simpler and shorter your CTA message is, the better. Thus, you should always try to keep your CTAs simple. What’s more, actionable words make your CTAs more attractive and create this sense of urgency you need to make them more efficient. 

Do not forget to use the first person on your CTAs. If you do so, you will notice they are not only more attractive to your audience, but also more personal. Thus, it boosts trust and creates excitement due to the ownership of the action they are just about to take.


Now you are familiar with where you should use colors on your website. Not to mention the fact that you know where to find cool images for your website and the relevance of your CTA colors.

So, it’s high time we move on into the next chapter where I will deal with how to optimize your website color schemes.

Chapter 5

Optimize Your Website Color Schemes

You’ve already learnt a great deal about website color schemes. But, there are still lots of pivotal features you cannot miss out. In this chapter, I will focus on the optimization of your website color schemes.

That’s to say, I’ll cover from how to track user behavior to conversion optimization thanks to your website color schemes. Thus, I will discuss the relevance of session recording, heatmap and A/B testing.

Lastly, I will handle user experience and how you can improve it with colors.

Track and monitor user behavior with website color schemes

Once everything is ready and your website is already working, it is fundamental that you track and observe your audience behavior. Understanding your website visitors behavior is necessary to optimize your Web page.

But, what is user behavior? Well, it means drawing your attention to your audience and try to get to know them better. In other words, you’ll have to center your attention on how they actually engage with your website.

Not to mention that you should know where do they click and where do they try to click but there’s no link. As regards your CTAs, check if they are effective, A/B test different options playing with colors and action verbs, etc.

So, it’s crucial you understand your users behavior. And then, make any necessary changes to make their journey on your website more pleasant.

The importance of understanding user behavior on a website

What is Lucky Orange
by Lucky Orange

There is no doubt that if you know how your website color schemes affect your users, you would be able to use this data to improve your website design. Thus, your conversions.

But, where do you start? First, you should come up with those color schemes you know would please most of your audience and match your brand’s identity. And then, you just have to be patient and observe.

Whenever you notice something could be improved, don’t be afraid to change it if it matches the preferences of your users. 

Indeed, you can use tools like Lucky Orange which would make your life a lot easier. It offers features like visitor recordings, heatmaps, chat, visitor polls, dashboard, etc. for quite a reasonable price.

Besides, Google Analytics can also help you with this task and it’s free. With this tool you will be able to check metrics like active users, cohorts, events, custom dimensions and more.

Whether you decide to use one or the other, what is critical is that you keep an eye on what’s happening and take your users behavior into consideration. That way, you will not only be able to optimize your website color schemes, but also succeed and get more leads.

Session recording

hotjar visitor recordings website screenshot
Source: Hotjar

Session recording is a resource that marketers use to record their website visitors sessions. The information you might get from session recordings is extremely valuable. It can show you if your visitors are having any kind of issues while they browse your website.

This feature gives you data as regards when your users scroll, click on your CTAs, engage with your website elements, and more. For example, if your users do not interact with your CTAs, you can try changing the color, the message or the size and check if it’s more effective.

Anyway, session recordings will help you to improve your UX and prevent visitors from abandoning your web page. You can also use it to analyze conversion rates and many other aspects.

Session recordings can provide you a lot of data that you can later analyze and use for your own benefit. It’s no doubt time-consuming, though it’s worth the effort.

Heatmap

The Crazy Egg Heatmap Report
by Crazy Egg

Likewise heatmaps are highly valuable to understand user behavior. A heatmap uses color-coding to show how visitors interact with your website. It takes into account clicks, how far have your users scrolled down and more.

Among its benefits is worth mentioning that heatmaps not only provide a users behavior analysis that is easy to understand, but they are also more visual than other reports. Thus, they are widely used because of their easy understanding.

Yet, if you do not want them to be misleading, you will have to wait until there is enough data to interpret. They do not take into account how much time people spend on an action, but just where they click. So, the information they provide is approximate. Though, still very useful to understand users behavior.

Conversion rate optimization with user behavior

Conversion rate optimization (CRO) is the procedure by which you improve your website according to your Web page users behavior. That’s to say, it’s an optimization process. So, it’s utterly important that you carry it out.

Indeed, such a CRO process will no doubt be beneficial only for you, but also for your audience. It consists of improving your website according to its users behavior. Then, your users and your audience will have a better journey.

What is Conversion Rate Optimisation (CRO) in Digital Marketing?
by Fountain

Basically what you should do is to optimize your homepage and landing pages. It is also important to pay attention to your CTAs, the navigation of your Web page, its forms and your site’s loading time.

If you improve your website according to how your users interact with it, you will improve your ROI and enhance UX. This means that if you personalize your Web page according to your users preferences, there would be more chances they return. And also, more conversions.

The following are key features to optimize for website color schemes:

1. A/B test of your CTA button colors

If you want to know which colors work best on your CTA buttons, there’s no other option than A/B test their effect on your audience. Obviously, the color of your CTAs would create different effects on people due to your site’s background color and the color of other elements.

But, it’s worth testing which CTA colors have a more convincing effect among your audience. Bear in mind the message you write on your CTAs matters too. If you A/B test the effectiveness of your CTA button, you will just have to change one color for another. And then, use the one that gets more CTR.

2. A/B test of your CTA button sizes

Likewise, you can also experiment with the sizes of your CTAs. What size would work best? As well as with the color, this will depend on the rest of the elements you have. That’s to say, if the rest of the elements are not very big, you might consider using a bigger CTA so that it is more visible.

But, if in your Web page there are already too many elements of a considerable size, it may not be that effective if you change the size of your CTA. What’s critical on a CTA is that it contrasts with the rest of the elements.

Actually, you will have to be careful with the size of your CTAs as they have to be optimized both for mobile and desktop users or else your conversions would be dramatically affected.

3. A/B test of your imagery

Images are extremely important on a website. Most people remember images a lot better than text. So, you will have to choose them wisely. Do not forget that with your website images you are also sending a message to your audience.

Thus, they will judge you for the idea you communicate with them. In fact, images can be tricky to optimize. There are lots of elements you have to consider. For example, you have to combine your website color schemes with the colors of your images or vice versa.

Image’s size, its quality, how many of them, etc. are aspects you have to pay attention to. Consequently, A/B testing with your images is far more complex than with CTAs. 

Yet, it is necessary. Though, remember not to change everything at once. It is better to introduce small changes according to your audience preferences and see how it goes.

4. A/B test of your links to the place people are clicking

Split Testing Call To Action Buttons in Landing Pages
by Nelio Software

Not surprisingly, you must check if your existing links work properly and direct people to where you want them to go. But, on top of that, you should know if people are clicking on places where there is not a link, yet they believe there is.

What does this tell you? That your website visitors consider you should introduce a link there. So, if that is your case, you need to listen to them and create a link that is appropriate there.

The same is true for those links that your audience is not using. Perhaps, if your website visitors are not paying attention to your links is because they are not necessary where you have placed them. Or maybe, your links are not visible enough or of the right color.

So, you will need to watch out how people interact with your links. And then, A/B test to introduce the necessary changes. This way, your website will undoubtedly have more clicks.

How to improve user experience with website color schemes

Website user experience refers to how your website visitors feel while they’re browsing your Web page. Thus, it’s crucial you pay attention to it. The idea is that the better your users experience is, the more time they will spend on your website.

Moreover, if you don’t convince your audience from the very beginning they won’t visit your site again. Or even worse, they would abandon it without interacting with you. So, it is fundamental that you make their experience as pleasant as possible.

If your UX is good enough, they will probably download a file, subscribe to your newsletter, buy a product, make a phone call, click on your CTAs, and more. Though, if your site doesn’t offer a great UX, you will lose prospects, clients, money, etc.

If you want your website visitors to interact with your Web page, you have to offer them something valuable. It is fundamental that you provide them high quality content, cleverly placed CTAs, appealing and relevant images and more.

There are many things you should focus on to provide better user experience:

1. Make sure there is consistency on your colors usage

Source: Rowenta

Obviously, there has to be consistency on the colors you use. Mainly, because if there is no regularity as regards how you use colors, you will confuse users. 

So, if you do not want them to feel lost or send them the wrong message, it’s compulsory you use website colors consistently.

It is necessary you use the same colors for the same features because they need to evoke the same emotion. That’s to say, if you always use red for your headings and black for your subheadings, you should keep on doing it that way.

Say, all of a sudden you decide to use black for your headings and red for your subheadings, you will no doubt confuse your Web page users as they are used to seeing it the other way round.

Besides, the emotions red evokes differ from the emotions black evokes. So, if you change one for the other, your audience will feel differently too when they engage with your website.

2. Use white space, it’s your best ally

It is strongly advisable if not a must to use white on your Web page. Even though white isn’t a color that stimulates prompt reactions, it does combine really well with most colors. Thus, white is a color that mixed with other color makes the second one more visible.

Indeed, white not only highlights other colors, but it also makes text more legible. That’s to say, if your background is white and your text is any other color, except maybe yellow, your text color will be easy to read.

On top of that, as white gives the impression that there is a lot of empty space, if you place something on a white background, it will help users to focus their attention on the content. So, there is no doubt that white is a powerful ally.

Most marketers also use it to make their CTAs more visible. Whatever the color of your CTAs, they will probably contrast quite a lot with white.

3. Check your website’s readability

webfx website readability by color design website screenshot
Source: WebFX

Readability is essential. You need to check the readability of your content and make sure it is easy to read and understand. But you should also check the readability of your colors. Some colors are easier to read over one another.

In theory the more contrast, the better. Yet, check that it is not annoying to the eye. In fact, there are color contrast analyzer tools which you can use to check your website’s readability.

Don’t be afraid to make your links and text color stand out from the background. This way, you will communicate your users that they are key content and you want to emphasize them.

4. Be careful with the colors of your hyperlinks

africa travel resource website screenshot
Source: ATR

It is vital that you make a consistent use as regards the colors of your hyperlinks. Actually, the colors you use have to be appropriate. For instance, blue underlined text is generally associated with hyperlinks.

So, if you happen to use blue as your text color, but this text it is not clickable, your users will no doubt feel frustrated as they will try to click something that it is not clickable.

The same is true for red. This color is believed to communicate a warning. The majority of people associate it with that. So, there is no sense you use it to communicate something pleasant that nothing has to do with alerts, alarms, caution, etc.

Besides, people expect you to change the colors of visited links. Imagine that you have several  links, your visitors would appreciate to know which ones they have already clicked. 

Likewise, you need to change the colors of your CTAs due to hover UI. In other words, if your website users have the intention to click on a button, you should make it visible. It doesn’t matter whether you make it darker or lighter, what is needed is that is shows the contrast.

These days, there are more and more people who surf the internet through their mobiles. So, be careful with your website’s mobile design. It’s pivotal that you make your hyperlinks clickable on all devices.

5. Highlight your call-to-action button

It is mandatory that your main and most important CTA button stands out above the fold. Given the fact that your conversions depend on it, you have to give it the relevance it deserves.

As to your secondary CTA, it has to be visible too. Yet, the main CTA should be brighter and bigger. Usually of a different color too.

There is no doubt that your main CTA has to be visible and contrast with the rest of your Web page. So, it’s a great idea to surround it with white. White is a color that offers a high contrast in comparison with the rest of colors. So, it is just perfect to make your main CTA more powerful.

Not surprisingly, there needs to be a hierarchy. If you have more than one CTA on your website, both of them cannot be equally important. If you do so, they will compete against each other. And, you will lose customers.

So, it’s critical that you make one not only more relevant, but also more appealing than the other. This way, most of the clicks will go to your main CTA.


Now you know how to optimize your website color schemes. In this chapter you learnt how to track user behavior, conversion optimization and how to improve user experience with your website colors.

Thus, it’s time we move on to the last chapter of this guide. There you will learn about website inspirations for your color palettes. You cannot miss it out!

Chapter 6

Website Inspirations for Your Color Palettes

There are times when it’s difficult to decide; and choosing your website color schemes is not at all a piece of cake. In this guide, you’ve learnt everything you need to know about website color schemes.

You know what they are, why they’re so important, where to use colors, images, CTAs and so on and so forth. But, you might not be sure what colors combination you should use yet. Thus, here you have a list of website color palette inspirations that will work well in 2020.

Let’s have a look at them!

Website color scheme inspirations in 2020

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top