How to Choose Colors for Your Website: A Surprisingly Simple Guide

Feb 6, 2019 | 0 comments

How do some people achieve such a clean look on their websites?

Why doesn’t your website look as clean and classy as theirs? You can see the difference, but you just can’t put your finger on it.

That’s why today, we’re going to talk about website colors. This isn’t a guide for designers, but for people who want to finally put together a website color palette that works, without having to learn a lot of theory.

This is the third part of the Brand Colors series. Here are the first two if you missed them or want to go back to them: Brand Colors 101 Series Directory

 

Ready to put together your website color palette? Let’s get started.

 

Using the color palette generator

You may be familiar with the free tool called Coolors that helps you generate color palettes. It generates five colors at a time that work well together. Now, it’s a useful tool that saves you a ton of time, but if you don’t know what you’re doing, it may cause more problems than it solves.

The thing is, a random color palette is just a little bit better than a random set of colors. The tool doesn’t tell you anything about where and how to use the colors.

It may work well for other projects, but when putting together a palette for a website, you need to know what colors you’re looking for, first, and then use the tool to give you options.

I’ve created a mini-tutorial on how to use Coolors, but before we get there, we need to do some work:

 

Step 1: Choose your main brand color

Read the previous posts if you haven’t done it yet.

How to Choose Colors for Your Brand: All you need to know to get started choosing your brand colors.

Kill Color Overwhelm: How to Choose Your Main Brand Color: Choose your main brand color and make sure it knows how to do its job.

Got your color in mind? Cool, let’s see where it belongs on your website.

 

Where your main color belongs on your website

There are two scenarios:

a) Your main brand color is your call to action color

A call to action (CTA) color is the color you use for buttons and links.

If your main brand color is a dominant, vibrant color, it’s a good candidate for a CTA color. How do you know?

The more saturated the color is, the more dominant and vibrant it appears. Color saturation refers to its intensity — a fully saturated color is a pure color not diluted by white, black, or grey (in other words, without tints, tones, and shading). Such color pushes through the design and grabs attention.

You can try to check your color in a shades and tints tool (like this one: 0to255) to see if it appears towards the middle of the scale (it means it’s saturated), or you can simply try to use it on your website for buttons and in-text links to see if it stands out.

I like to use warm colors as CTA colors because they tend to stand out from the background. However, it is possible to use a cool color supposed you reduce the color clutter on your website — you surround it with neutral colors (see below) so that nothing competes with it.  

Where to use the color:

If your color passed the test and can become your CTA color, use it for buttons, text links, things you want to highlight so that people see them first, and possibly small decorative elements (like small dividers). The rule of thumb is to use it sparingly so that it pops.

 

b) Your main brand color is not your call to action color

If your main brand color doesn’t work well for buttons and links, don’t worry, you can still use it. You’ll just need to choose one more color to do the CTA job.

Where to use the color:

Use it for the top bar or navigation bar, headlines (not necessarily; see below), and decorative elements (dividers, boxes, images). Because it’s a less dominant color, it may work well even for larger elements and you can be more generous with the color.

 

Step 2: Choose your secondary color

Now that you know what you’re looking for, you can use a color palette tool Coolors.co to help you. Here’s a little tutorial to show you how the tool works:

Tip: Playing with the tool and trying different shades, hues, saturation, brightness and temperature can teach you more about what these terms mean than any explanation.

 

Here’s how to choose the secondary brand color:

a) Your main brand color is your call to action color

In this case, you don’t need a secondary color; you can add only neutral colors (see below) to your palette to achieve a clean, classy look.

If you do want one more color to use on headlines, bars, button hover, and decorative elements, make sure it doesn’t compete with your main brand color. Use the color palette tool to come up with a cool, less prominent color (blues tend to work well here), and save it to your palette.

 

b) Your main brand color is not your call to action color

You want to add a saturated (and possibly warm) color to your color palette to work as a CTA color for links and buttons. Use the color palette tool to come up with a few options and check how they look on the website when used on buttons and in-text links. When you find the right color, save it to your palette.

 

Step 3: Choose neutral colors

To achieve a clean look, you only need one main color (checked!), (optionally) one secondary color (checked!), and 3 – 5 neutral colors.

For the purposes of this article, neutral colors are the opposite of saturated colors — think light greys, dark greys, and light and dark shades of your brand colors (that you can find in Coolors).

Note: Technically, white and black colors are neutral, too, but absolute white and absolute black don’t work well in web design.

 

Here’s what you need neutral colors for:

 

Light neutrals

Where to use them: Different background (to break the page into sections), text box background (to highlight some parts of the text).

 

Dark neutrals

Where to use them: Footer, bottom bar, subheads (optional — see below).

 

How to find neutral colors: Use Coolors to generate shades of grey that harmonize with your primary brand color and/or to find dark and light shades of your chosen brand color(s).

 

Step 4: Choose the page background color

Because you are an online teacher or coach and the main thing on your website is your content, I don’t recommend getting too creative here. Let the text stand out by using an almost white page background.

Why almost white? Because #ffffff (absolute white) is harsh on the eye.

You may also use light neutrals when you want to break a page into sections or emphasize parts of text using text boxes.

 

Step 5: Choose the text color

For body text, don’t use black color (#000000), but very dark grey.

For in-text links, use your CTA color — you already know which one it is.

Never emphasize parts of text by changing the text color — it’s confusing because then the text looks like a link, but isn’t clickable.

For headlines, use the same color as the body text color, or your secondary brand color (supposed it is different from your CTA color; blues tend to work well here). Don’t use your CTA color for headlines; they would look like links.

For subheads, use the same color as the body text, or one of your dark neutral colors (grey).

 

 

Website color palettes examples

Summary

For a clean look, you need to limit your website color palette. Use your main brand color, possibly a secondary color, and 3 – 5 neutral colors.

To make sure the colors fit with each other, use a color palette generator such as Coolors.co.

Assign each color a job. Always use the same color for CTAs (links, buttons), and don’t use it for things people can’t click.

Make sure your CTA (call to action) color is a strong color that stands out from the background and grabs attention.

Don’t use absolute black for text and absolute white for the background. You’ll create a soft, pleasant look and better reading experience.

 

Next time, we’ll talk about the use of colors on social media to create an eye-catching, clean, and consistent online presence.

Now, if you liked the article, would you please share it on your favorite social media? Thank you!

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Tweet
Share
Pin