Use consistent saturation

One thing you can do to strengthen your brand is to use various colors with a similar saturation. Saturation is another way of saying a color’s brightness. Have a look at drink company Innocent’s usage of color:

Here they have six different colors, but none of them feel out of place or jarring. That’s because their saturation is muted to the same level, making it feel consistent.

Use the same color, but vary saturation

When a brand has a strong connection with a certain color, they might not want to branch too far from it. However, everything being a single color can become a bit stale, so it can be fun to take your primary color and play with the saturation a bit. Have a look at the social media options in the bottom left of this TechCrunch article.

All five of them are a similar green, but have varying levels of brightness. These vary up the visuals of the page, while also reinforcing the idea that a lighter green is synonymous with TechCrunch.

The final stop on your colorful journey is to nail down a typeface color. You might go for the easy choice and choose black, but have a browse around the internet, and you’ll find that purely black typefaces aren’t as common as you’d think.

A black typeface on a white background can lead to eye strain, as there’s a 100% contrast – and people will be more likely to click away if your website is difficult to read.

While explicitly colored typefaces should be reserved for links and important bits of information, you can use gray or gray-tinted color to give your website a softer, more inviting look. There isn’t a ton of room for experimentation, but it can be worth coloring your text for that finishing touch.

A quick look at this page on Penguin Books’ website shows that they’ve elected for a softer grey tone for their text. This is a lot less aggressive than a stark black and white contrast, and allows for a softer vibe.

You can go for a more muted version of your primary color in order to solidify your branding. This will require a white or grey overlay on the background in order for text to show up.

Alternatively, you could just have the whole website be an off-white color, which is the more common choice. It’s inoffensive, and won’t stop anything – text, images, or links – from jumping off the page.

Look no further than our own website to see what a blank, gray background can highlight.

For example, a red circle on a green background pops a bit more than a blue circle on a green background. But a blue circle will look a lot better and more obvious on an orange background.

So if you’re using a predominantly green website, it’s a good idea to implement red calls to action, or use red to highlight important features that you want to catch the eye of any readers.

Try to only have one or two colors on top of your primary color. More than that, and you’ll be struggling with clutter. Nothing will stand out well if you inundate visitors with loads of different stimuli.

A good example of using additional colors is hearing aid brand Eargo. It has a main color of orange, so it’s used this duller blue to highlight this important section of its website. From what we know about color compliments, we can see how this blue and bright orange contrast against each other. The orange also makes important elements pop, like the “add to cart” button and the logo.

• Red: Coca-Cola or Nintendo – Implies excitement or happiness
• Orange: Nickelodeon or Fanta – Implies a friendly, fun time is ahead
• Yellow: Nikon or McDonalds – Implies optimism and happiness
• Green: Whole Foods or Animal Planet – Implies freshness and nature
• Blue: Walmart or American Express – Implies dependability and reassurance
• Purple: Hallmark or Cadbury – Implies a distinguished brand that has a history of quality
• Brown: Nespresso or UPS – Implies a reliable product that can be used by anyone
• Black: Chanel or Adidas – Implies luxury or elegance
• White: Apple or Nike – Implies sleek, user-friendly products

If you already have a colored logo, it makes sense to have a primary color that matches your existing branding. Nintendo’s branding is very red, and this comes through on their homepage.

This is probably the easiest step, as you’ll likely already have an idea of what color you want your website to be. Just make sure to save the hex code!