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 split collage showing partial screenshots of the websites for WP Umbrella and ManageWP, separated by a question mark. The image hints at a comparison between the two WordPress management tools.

Which WordPress management tool is best for you?

Read more

Close-up of hands typing on a laptop keyboard, representing the simplicity of performing a keyboard accessibility test.

Accessibility 101: How to perform a keyboard test

Read more

What To Do, When Your WordPress Site Got Hacked

Read more

A pen rests on top of a stylized table grid with the HTML tag prominently displayed in bold white text, symbolizing the structure of tabular data in web development.

Use Case Tutorial: When to use a table instead of a div

Read more

greyd sustainable websites blog

10 Tips for Sustainable Websites

Read more