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.

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:

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.

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.

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.

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.

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.

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.

Let’s look at some examples of cool color combinations on websites.

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.

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!