Table of contents
Finding the optimal color for a design is much more difficult than one might think. If you regularly create professional websites you know this problem first hand.
This article will walk you through the most important steps to take, and help you find the right colors if you’re just starting out.
Finding the right colors for your website
When you build a website for the first time, the choice of colors is an essential topic. Especially if there’s not yet a corporate design to guide you through the process.
You better take the color choice for your website seriously. Once set, it will determine the first impression for your website. And as we all know, there is no second chance for first impressions.
This is why you should ask yourself a few questions before deciding on any colors:
- What’s your industry?
This may be irrelevant for many companies. But gold and silver hues would look weird for a waste disposal company, for example. - What emotions do you want your web design to trigger?
It’s no secret that different color schemes trigger certain emotions in us humans (more on that shortly). - What color combinations does your competition use?
Obviously, you don’t want to bluntly copy your competitors. You don’t have to go in a completely different direction, but of course, you don’t want people to confuse you with your competition. - What colors do you like?
Don’t forget to consider your individual preferences. After all, you have to like your website!
After working through these points, you’ll have a better understanding of what color scheme is ideal for your website.
Let’s start by talking about how different colors subconsciously affect human perception.
How do colors work in web design?
Let’s be honest: We can’t cover the whole topic of color psychology in a single blog post. But there are plenty of other resources for folks who want to take a deep dive.
Instead, here’s a table with common web design colors, and their effects.
| Color | Effect |
|---|---|
| Blue | cold, distant, calming, masculine |
| Red | hot, warning, loving, impulsive |
| Green | fresh, recreational, toxic, natural |
| Black | sad, heavy, hard, elegant |
| Yellow | envious, summer, glamour, sour |
| Pink | sweet, tender, soft, dreamy |
| White | clean, innocent, neutral, honest |
| Purple | extravagant, vain, artificial, fashionable |
| Gold | expensive, splendid, proud, festive |
| Silver | quick, reserved, cool |
| Brown | vintage, cozy, lazy, aromatic |
| Gray | indifferent, lonely, mediocre, insecure |
| Orange | warm, fun, social, cheap |
Source: The unconscious power of colors in design and marketing
Depending on the impression you want your website to leave, you can use the effect of colors and their underlying psychology to your advantage.
Usually, however, there’s not just one single color on a website, right? When picking a web color combo, you should make sure that the perceptions of the individual colors do not contradict each other.
This is where it gets tricky!
The colors blue and red seem to convey the complete opposite. Cool and calm, on the one hand, hot and impulsive on the other.
However, some websites pull off this combination.
How you should NOT use color combinations on a website
Usually, it’s easy to spot a bad color combination.
Here’s an example:
Now imagine a website that uses all 5 of those colors. Not very pretty, if you ask me.
Note: This tool from Adobe helps you create different color palettes.
A common mistake for web design rookies is to use too many different colors at the same time. It’s just like font choices: less is more.
Choose one theme color for your website that should be the base. Two colors are more than enough for your web design. Each additional color should be used very consciously. For example, for call-to-action buttons.
With CTA button color choices, you can step out of your corporate identity. A CTA has to stand out to get your visitors to take the desired action. At GREYD, most buttons come in completely different colors than the rest of the website.
What makes good, modern color combinations?
Web design is constantly changing. The global pandemic has led to increased home office work, and the average time spent in front of a screen has gone up significantly.
In 2020, and now in 2021, we’re seeing more people using the dark mode on their devices.
The dark mode on YouTube is easy on the eyes and is becoming increasingly popular.
Modern web design is factoring in these developments and should use eye-friendly color combinations.
Of course, you don’t necessarily have to use black or dark grey hues on your website if they don’t suit your business (don’t forget color psychology, as mentioned above).
Your color scheme should be pleasing to the eyes. Flashy colors that scream for attention and overstimulate the optic nerves are not appropriate – except, as already mentioned, when used specifically for CTAs.
Here’s another tip we’ve learned from years of experience as web designers:
Using different hues of the same color.
Let’s say you want to take a specific shade of dark blue as your main color. You can then mix in different shades of that same blue to change things up while creating a consistent look.
Speaking of consistent web design:
GREYD.SUITE is one of the very few web design tools that offer completely global design settings.
All features (forms, page modules, pop-ups, footer, header, etc.) use the same colors that you set centrally!
Of course, you can still set individual elements in any other color. This will save you a lot of time and help reduce errors when several people are working on the same page.
For example, a content editor trying to recreate a button from another site can’t go wrong with the color value.
If this has piqued your interest, take a closer look at GREYD.SUITE.
The test version is, of course, absolutely free for you!
What colors go together in web design?
There’s no absolute right or wrong when it comes to color combinations.
There are just a few colors that don’t go together at all. But you can make it work by choosing individual shades and not the basic colors themselves.
Saying “Black and yellow NEVER go together” would be just as wrong as saying “Black and yellow ALWAYS go together!”.
Sorry, I don’t have a definitive answer for you here.
The best recommendation is to always look at as many different websites (besides the competition) as possible and get inspired by them.
Ask yourself Which color combinations particularly speak to you?
This is your starting point.
At the end of the day, your color scheme will determine the story about your brand and your business.
Examples of good website color schemes
Let’s look at some examples of cool color combinations on websites.
- Bright and matte – Mailchimp
Mailchimp is an email marketing software provider. It uses a combination of bright and flashy colors on one side, and matte dark hues on the other.
This is also a good example of how colors alone don’t define the overall look. The quirky drawings and graphics on the website make Mailchimp likable and go well with the website’s background colors used.
- Red and grey- TRICOR
A company in an old-school industry can still leave a modern impression. TRICOR, a company for packaging solutions, has achieved this with its website. Pleasant red and grey tones are used in a targeted manner. The well-thought-out color concept is visible across the entire website.
- A blue color palette – Moz
Moz helps online marketers improve their search engine optimization. The website has not only loads of useful information, but also a blue color palette. The company uses different shades of blue that look rather playful and “cute”, but still fit the company’s style. Buttons stand out with yellow hues and skillfully draw visitors’ attention.
- Unusual and cool – Hammer & Nagel
Mani & Pedi, but specifically for men? Hammer & Nagel’s services sound unusual. Their web design and specifically their color combination complement their concept. The website reflects the offer ideally and is undeniably aimed exclusively at men. Well done!
A generator for website colors will help you
Not sure how to find the right colors?
Fortunately, some tools generate complete color schemes for you.
Coolors.co automatically generates color palettes or helps you draw inspiration from established color palettes.
If you already have a specific color code in mind, the color generator will also help you.
You can specify individual color codes and then click through the suggestions until you find an appealing color combination for your web design.
Bottom line
Finding the right color combination for your web design is not always super simple. Especially if the company doesn’t have a proper corporate design yet, you practically have to start from scratch. Color palette generators can be very helpful in finding matching color combinations for your website.
When choosing colors, consider their psychological effect. Not all colors go together. But there are always examples of websites that cleverly combine quirky colors.
It’s best to draw inspiration from web designs you personally like!
