Darius Carrick

How to Choose the Right Colors for Your Website

Posted
on January 24, 2018

There’s no way around it. Color affects many of the interactions and impressions on your website. Recent studies have shown that color and appearance comes first for 93% of people making a purchase. The same studies indicate that brand awareness increases by 80% when the right colors are used. To choose the right colors for your website, we need to take a jog through color psychology, user research, and marketing strategy.

Color Psychology and Your Website

Part of choosing the right colors is knowing what colors mean to your audience. Keeping in mind that colors mean different things in different contexts and cultures, you can easily find colors that accomplish your goals. I’ll come back to that in a moment, but for now let’s look at how color psychology can inform the choices you make.

Color Context

Colors often have different meanings in different contexts. For example green is often associated with environmental or conservation causes, while green can also indicate a successful action such as entering the correct password. The colors you choose can be useful navigation guides. However, you should never rely on color alone to indicate important states such as error messages.

Image source: Shopify

Red and green are known to cause problems with accessibility for colorblindness, as you can see in this example. There are some free tools to check colorblindness accessibility on your website:

Aside from the accessibility problems that arise with different colors and contrasts, keep in mind that colors also have cultural cues, such as red or yellow for alerts or warnings and green for confirmations.

Perception of Brands and Products

With the right color choice, you can better control the perception of your brand, products, and website. For example, bank websites tend to use blue as their primary color because it implies stability and trust.

Here are some great examples of how well-known companies have made color choices to control the perception of their brand.

Image source: creativemarket.com

Using Contrast as a Cue to Take Action

Most websites have an end goal of getting the user to take some kind of action. Color can help direct your users to those areas, such as buttons or important callouts, by using the power of contrast.

Example of a high contrast button.

A theory known as the Von Restorff effect suggests that using a color that is totally different (in isolation) from all the other colors on your site will immediately draw the user’s attention to that spot.

Choosing Colors for Your Audience

Now that you have an understanding of how color psychology can inform your website design, let’s move the focus over to your audience. Before you choose colors, you should conduct a little research about your people. While surveys and focus groups are great for staying in touch with your customers, you may not have those resources yet, so where do you turn?

Instead, research your competition. This is a great opportunity to observe the choices they’ve made and assess what you can do better. Think about how you might use a color palette to beat the competition.

Color Preferences

Depending on who your demographic is, you might use a different palette entirely. Studies show that certain color preferences can draw a specific group of people in, or repel them. Keep in mind, these are generalizations, so you shouldn’t build your whole strategy on them.

Image source: CoSchedule

Researchers have identified certain color preferences by gender, which can be useful if your business or blog is catering to a specific gender’s interests.

Location is another consideration that can affect your color choices.

Image source: amara.com

Image source: amara.com

As you can see, blue and red can mean very different things across the world, so if your target audience is in a specific geographic location, it’s a good idea to research the cultural significance of your color choices.

Determining the Emotional Impact of Your Color Choices

In addition to color context and preferences, a big part of choosing the right colors is the emotional impact. Your colors should leave users feeling exactly way you want them to about your brand. So if your big push is credibility, blue is a great option. Or if you want to inspire your customers to be creative, try purple.

Image source: CoSchedule

This great color chart from CoSchedule can help you choose the colors that will most likely convey the feeling you want for your brand. Also, their word association chart can help further refine your ideas.

Finding your audience and the emotional impact you want to make as a brand will set you up nicely to create a color palette you can test.

To add variety, texture, and hierarchy, you can experiment with the different shades of your primary color choices. This article on color in UI design shows how effective designing with one color can be.

Image source: https://medium.com/@erikdkennedy/

Adjusting the saturation and brightness of your primary color choice can give you a great palette of secondary colors to add dimension to your website.

Balancing Your Colors

When actually placing your colors in different areas of your website, it’s good to go by the 60/30/10rule. This means using your primary color 60% of the time, a secondary color 30% of the time, and a contrasting color (this would be your call to action or button color) 10% of the time.

Often this translates to a hierarchy on websites that carries through each page. For example, you might have a header with your dominant color, a white background for the page content with splashes of your secondary color, and your contrasting call to action color smattered across buttons, links, and important callouts.

When playing with your options, keep accessibility in mind and use the colorblindness tools from the beginning of the article to check your contrast.

Common Website Elements and Color Choices

To help you get on track faster, and not waste time reinventing the wheel, let’s look at some examples of how a color palette might be used with common website elements.

Here are two homepages for similar products—Nike and Brooks. We could summarize their color palettes by element:

Header

Navigation

Buttons

Text

Images

Nike relies on a stark black and white scheme with splashes of bright, highly contrasting colors in their images. This has the effect of appealing to a wide audience—which makes sense because Nike spans the sports, fitness, and fashion industries.

Brooks, on the other hand, is more running-focused. They use a similar black and white palette, but with a very bright blue secondary color which is also used for their calls to action.

The simplicity of these palettes make it easy to navigate without getting distracted and draw attention to the products—perfect for an ecommerce website. Brooks even uses their blue as part of their brand promise, with their “true blue guarantee”—that’s a prime example of how to insert your secondary color right where users are looking for more information (it shows up after the product feed).

As you can see in these examples, the headers and footer are full, saturated primary colors, while other elements are accented with more or less color saturation. This creates a nice balance of color and allows your buttons and calls to action to stand out.

Practical Tools for Creating Your Color Palette

Now that you can strategize and research your color choices, I’ve wrangled up some of the best free tools online to help you get started.

Share this article!

About Darius Carrick

Darius is a content marketer with a passion for empowering people to create their dreams. With MOJO, you can learn new skills, build great experiences, and have a good time doing it. Got questions? Need help? Leave me a comment! View all articles by Darius Carrick.

Build a Better Website with MOJO

MOJO Marketplace is a community of web professionals providing digital goods and services that empower you to Build a Better Website.