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.
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
- What Role Color Psychology Plays?
- Color Meanings In Western Culture
- Good Vs. Bad Color Combinations
- How To Choose Colors That Go Together For Your Website?
- Primary, Secondary And Tertiary Colors
What Role Color Psychology Plays?
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.
Color Meanings In Western Culture
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 2020 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.
Good Vs. Bad Color Combinations
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.
1. Using Light Colors On White Backgrounds
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.
How to turn Light colors on white properly:
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.
2. Neon Combination
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 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.
How to turn Neon Colors into good colors:
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.
3. Too Many Colors (Rainbow)
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.
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.
How do I know how many colors are enough?
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.
How To Choose Colors That Go Together For Your Website?
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 main 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:
- Choose your primary color according to the emotion and message you want to convey to your audience. Or if you have a logo already with a dominant color, you can also pick that one. Note that you can have 2 colors for your logo depending on the background (one primary and a secondary).
- Go into a stock image website such as Shutterstock and find your color palettes that way:
- Enter your 1-3 keyword for instance, “cooking desserts”
- Assuming your primary color is yellow because you want to convey fun, happiness, and curiosity through your recipes, then look for images with a little bit of yellow in it.
- Once you find it, simply use a tool like Sketch, Figma, Illustrator, Photoshop to get the HEX of the 5 main colors of that image.
- If you don’t have access to any of these programs, you can always go visit cooler.com and get your palette using that tool.
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.
How To Use Your Primary Color
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:
- Navigation bar
- Section separators
- H1 text / headings
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.
How To Use Your Secondary Color
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:
- Call-to-action buttons
- Hover over text links
- Lines separator
- Highlight important information box
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.
How To Use Your Tertiary Color
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.