Colors can sometimes be a headache as it is a piece of a website you don’t really want to change afterward. Colors on websites are often referred to as color schemes and are simply combinations of colors chosen by the web designer.
Choosing a color is usually what people do first when they are convinced about designing a new website yet so many people fail to pick the right color combinations for websites.
Suppose you are asking someone about a brand. I'm positive they will right away (in their mind) connect that brand to its color or logo. Colors can have a huge impact on how people perceive your company. For these reasons, it is crucial to wisely choose your color combinations to avoid a badly designed website.
But no worries! In this guide, I’ll share with you my best techniques when it comes to choosing colors that go together for you or your client’s website. Once you finish reading, you’ll be a color scheme expert and you’ll be able to help many website owners.
But before we choose our color combinations, we need to understand what are good vs bad colors, the meaning of colors, and what’s hiding behind this powerful reflection that our eyes capture.
Table of Content
When it comes to design, it is imperative to understand the psychology behind colors. It is strongly suggested to not randomly choose a color for your business but to choose it reasonably; meaning you need to make research.
But lucky you, I made them for you…
Colors have been studied for such a long time now that we know it can have an unconscious impact on our attitude, reactions, emotions, decisions, and more.
But as many people ignore, colors are a little bit more complex than we think. A specific color might have a different meaning depending on the context but also depending on the culture. For instance, in the Western culture, the color dark represents funerals, death, and white refers to brides, weddings, and purity. Therefore in China, it is quite the opposite: white symbolizes death and mourning whereas black is the color for young boys.
Consequently, color psychology is somehow ambiguous and if you want to use it well, make sure to know who your main target audience is.
To last define the role color psychology plays in our mind, suppose you are at the mall shopping. As you are looking around, you get unconsciously attracted by items due to their color. I can’t count how many times I went shopping because I needed my shirt’s color to match my shoes.
And believe it or not but the same happens online with websites. The color combinations used on websites have an effect on us. It can make us feel comfortable, welcomed, or totally the opposite.
This is why it is becoming trendy for marketers to study colors so it can have the best impact on their audience.
Red is associated with insistence, threat, expensive, speed, courage, and power. This sounds like a powerful mixture therefore, it should be used sparingly. According to a study conducted by Joe Hallock, only 8% of people refer to this color as their favorite one.
Black is also a versatile color. Some people consider it as a modern design but others see it as traditional, some exciting and some relaxing. Dark websites have been seen as the potential new trends of 2021 according to many designers. It seems like dark backgrounds make design elements stand out more, creating a higher contrast ratio with the use of other colors, but still improving visual ergonomics by reducing eye strain.
Blue indirectly increases sales. It is a popular color for financial institutions because it is associated with calmness, tranquility, and stability. It is also a popular color when you want people to think about safety and tranquility. Therefore, blue is often used for high-priced products with high passenger rates.
Most financial and assurance sites use blue. Light blue gives independence and security, and dark blue is linked with tradition, importance, and intelligence. While PayPal makes hay on both sides, other financial services sites have adopted Royal Blue and Navy Blue for their relationship with plain security.
It’s known that colors like orange and yellow are strongly associated with something cheap, fun, exciting, inexpensive therefore surprising that both colors combined are ranked among the least favorite colors by adults. Therefore, you could incorporate it into your website while targeting adult buyers but it has to be done strategically.
The relationship with green is with the environment. "Green" is a one-word reference that defines the spread of nature, organic, and globally friendly things. As such, it is used by businesses that want to appeal to, or have similar interests in, similar audiences without a direct connection. Plus, green is becoming more attractive since it combines both the calmness qualities of blue and the energizing effects of yellow.
Now that you have a better understanding of colors and what each can express, let’s discuss how to use colors together, which colors are a good match, and which ones are a bad combination.
Please note that NOT every color is a good color but that there are bad ones. Some colors can strongly distract users from the actual content, or making it difficult for the user to know what to consume first. What you definitely want to aim for are colors that attract attention (in a good way).
Be aware that white is already bright, so adding light-colored text such as green or yellow to a white background causes readability issues. Bold text helps a slight, but not so much. It's always best to stick to dark shades of gray or black to white.
In order to fix this problem, you would want to increase contrast to make your text or image easy to process for your users. Let’s say you have a clear background, then consider using dark blue, or black so it’s easy to read.
The combination of neon and rainbow colors is known to be eye-catching which is why a lot of people think they are good colors to implement.
Therefore, these vibrating colors quickly tire our eyes and, in most cases, only cause annoyance in lieu of the more positive sentiment that companies want their customers to associate with their brand.
In addition to being disturbing, because they are really bright colors, it can be extremely hard to use them on light or dark backgrounds.
As this issue might seem hard to solve, it is actually pretty simple. And the best way to fix it is by using tones to decrease the brightness of the color.
Suppose the brightness was at 100, by decreasing it to at least 60 will already turn your neon color into a better color. Then if you want to go even further, you can also decrease by -20 its saturation and voila... less distraction, and less tiring.
Regardless of the colors you use, too many colors will look bad. You need to find a color match otherwise readers don't know where to start, as many shades can confuse the eye. I usually use one primary color, a noticeable one for all my call-to-actions, and a tertiary color that is lighter than the 2 others and match with both.
The website below is one of my previous client's one and you can tell that the color combinations are not good at all. There are literally 6 different colors on the same page and this should never happen.
.jpg)
There is a good amount of people who believe that the more color used, the more catchy, so more interest, and more conversion. Therefore, as it might be true in a really short amount of time, your users wouldn’t want to spend more than a minute on your site as it becomes really disturbing and confusing.
As I’m sure you’ve heard the quote “sometimes less is better”, I guarantee, you can apply these words when it comes to colors too.
One advice I can give you is to not use more than 5 colors. And after building hundreds of websites, I honestly don’t see any reason why you would be using more than 5 colors.
If you made it that far, congrats because it means you understand the meaning of colors and I’m sure you already know which one is going to be your primary color.
To clarify, while choosing the dominant color for your site, you need to understand that colors need (sometimes) to be cool and trendy but more importantly, it has to align with the message you want to convey. Use colors to communicate a specific message to your audience.
In order to pick colors that go together for your brand, I’ve decided to break it down into multiple steps:
The good thing about using this technique is that you don't have to purchase the image yet. You can test different color palettes and then once you think it is a good image and the good color combination for your company, then you can go ahead and purchase the image.
And this works for many different industries and types of images. Let's say you are an entrepreneur and search for it in Shutterstock, then you can use vector images like this:
These varieties of images are great to use for blog posts for instance as it will allow you to have colors that match the rest of your site.
Now that you have found colors that go together, you need to define your primary color. Please note before you choose that you will want to use this specific color for the followings:
As you can notice, it will be displayed on the big elements to really convey that message you want to transmit to your page visitors. Taking the image below as an example, you can tell right away which main color has been chosen.
Let's take the image above as an example again, and for the secondary color, I have chosen the color orange for it because it contrasts well with the dark blue chosen, and the orange color for CTAs is often used for successful websites in that specific industry. Below is a list of elements that could use your secondary color:
You can use your secondary color whenever there is something that you do not want your viewers to miss such as an important CTA. Still, you shouldn’t use your secondary color too much or it would stop causing the effect it is supposed to. By this I mean, grab your audience’s attention. Which is why the list above contains only small elements.
Your tertiary color is used maybe 10% of the time only. You could use this color for:
Then, it all depends on which type of website you are building. If you are building a simple website with a few services, then having a primary, secondary, tertiary, black (for text), and white (for background) is enough.
Therefore, sometimes, with some websites, you might need to use all 5 colors of your palette plus the black (for text) and white (for background). Let's say are building a website for a fitness instructor. Well, maybe that instructor has 3 different packages. In that particular situation, it would be a good idea to use your primary and secondary colors (throughout the website) for the elements mentioned above, and then use the 3 other colors of your palette for the 3 packages (see example below)
By understanding the meaning of colors and the psychology behind them, you know which primary color you want for your site.
By applying the image technique I gave you, you are able to generate 5 colors that go together for your website.
By understanding how to use your 5 colors on your website, you are becoming a color master and that's an important skill to have.
.svg)