Using the Right Color Combinations in Web Design

Finding the right colors for your website. Many people face this challenge in web design. Learn here how to find good color combinations.

Colorful windows with trees

Patrick Mitter /

01.03.2021


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.

ColorEffect
Bluecold, distant, calming, masculine
Redhot, warning, loving, impulsive
Greenfresh, recreational, toxic, natural
Blacksad, heavy, hard, elegant
Yellowenvious, summer, glamour, sour
Pinksweet, tender, soft, dreamy
Whiteclean, innocent, neutral, honest
Purpleextravagant, vain, artificial, fashionable
Goldexpensive, splendid, proud, festive
Silverquick, reserved, cool
Brownvintage, cozy, lazy, aromatic
Grayindifferent, lonely, mediocre, insecure
Orangewarm, 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:

Color examples to not use

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.

Greyd Youtube Account

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.

Color Example Blue tones

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.

Backend Examples

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.

Screenshot Website Mailchimp
  • 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.
Screenshot Website TRSCOR
  • 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.
Screenshot Website MOZ
  • 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.
Screenshot Website Hammer & Nagel
  • 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.

Red color pallets example

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!


By Patrick Mitter

Patrick loves good texts. Preferably about topics concerning online marketing and WordPress. Having built websites by using well-known page builders on his own and being very experienced in the SEO industry, he is very familiar with any kind of problems regarding those plugins. This is the reason why he adopted Greyd’s mission to simplify work for web designers as well as agencies.

Recent in Learn

A hand with one finger pointing at a glass wall which depicts a network of folders.

Demystifying WordPress Multisite

Read more

an AI using wordpress

How to use AI sensibly for WordPress websites

Read more

wordpress better cms alternative blog banner

Navigating the Headless CMS Landscape: Why WordPress is a Prime Choice

Read more

accessible website content blog image

How to create accessible web content

Read more

Several screens and devices connected with a WordPress server in the middle

Using WordPress for franchise websites

Read more