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.

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:

• The Colorblinding Chrome extension—simulates colorblindness on any website you’re browsing.
• Coblis colorblindness simulator—upload any image file and simulate colorblindness.

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.

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.

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.

Research has shown that calls to action with bright colors drive action way more than darker or muted colors. And even within the common choices for buttons, such as green, red, and yellow, companies have found a 21% increase in actions taken just by changing the color of the button. The performance of your button color and calls to action will depend on your audience, but it’s one of the easiest A/B tests you can run to discover what works best.

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.

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.

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.

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.

Creating a Great Color Palette for Your Website

The key to a good color palette is balance. Having too many colors makes balance difficult to achieve. Plus, research points to the fact that users prefer websites with simple color palettes, so keep yours to no more than 3 primary colors.

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.

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/10 rule. 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.

• Color Hunt – Find interesting color combinations and copy the color codes.
• The Colorbook – Find the most popular color palettes from leading designs on dribbble.
• Coolors.co – Generate random color palettes by pressing the spacebar and create palettes by uploading images.
• Colorzilla chrome extension – See a color or palette you like? Get the color code using this Chrome extension.