Landing Page Design Best Practices

Using Colors

Color has an impact on how we think, how we feel, and how we act. It has an impact on human psychology because colors define moods and has an influence on the choices we make.

Understanding the impact of color psychology on human behavior helps your conversion rates because you can predict how your prospects are going to react to your marketing messages when designed in specific colors.

Understanding color psychology is a big part of conversion rate optimization because it gives you an insight into how your customers think and are most likely to act. And understanding colors is required for marketers because no matter which colors you select, they are a big part of every marketing message you share with your audience.

Primary colors: Three primary colors make up all other colors: red, blue, and yellow.

Secondary colors: Purple, green and orange are secondary colors.

Tertiary colors: These are hybrids created by mixing a primary and secondary color. Tertiary colors have hyphenated names such as red-orange where red color is added more than the orange and yellow-green where yellow is added more than the green.

This color wheel represents the primary, secondary and tertiary colors:

To understand how colors work, it is important to recognize the visual nature of color.

For example, these are all considered the color blue:

They look very different because according to the Munsell System all colors contain three components:

1. Hue: This is the name of the color such as red, blue, orange, etc. Just limiting yourself to hue in your marketing materials is not a good idea because all three components (Hue, Value & Chroma) have their individual role to play:

2. Value: This is the level of brightness — how light or dark a certain color is. Colors with low value are darker (a.k.a. “shades”), colors with high value are brighter (a.k.a. “tints”):

3. Chroma: This is the level of saturation (i.e. how “vivid” a color is). In other words, colors with high chroma are vivid, while colors with low chroma look washed out:

Nick Kolenda describes how to choose the three color components in most graphic programs:

According to Kolenda people prefer different colors over others based on four theories:

1. Evolution: The research suggests that our preference for certain colors was formulated in early human history. Man associated blue color with nighttime, so it symbolized passivity, whereas sunlight was associated with bright yellow and it symbolized action. This is also why males prefer colors like blue and black, whereas females prefer yellow and pink, because — as gatherers — females had to pick different colored fruit from foliage.

2. Gender Schema Theory: According to this theory, when you come to identify with your gender as children, you seek out gender-related information and use that information to develop a concept of gender. As an example, many parents dress boys in blue and girls in pink, which helps children associate these colors with their gender as they grow up.

3. Ecological Valence Theory: EVT dictates that people develop preferences for different colors based on their emotional experiences with those colors.

4. Associative Network Theory: According to this theory, our brains have an interconnected web of knowledge known as an associative network. A unit of knowledge represents each circular node in this network. For example, different emotions would make up one node while various sensory experiences would make up another. All the nodes are connected to each other and make connections; some connections are strong while some are weak.

Your brain also contains nodes for different colors, the information in these nodes are modified as you gather more information about a certain color. All associations you make with colors have an influence on decisions you make.

Choosing Color Combinations

If you’ve been choosing color combinations at random, you’ve been doing a great disservice to your conversion rates. When choosing color combinations, you need to keep in mind three simple color relationships:

1. Analogous Colors:

Analogous colors are colors with matching hues (i.e. they sit next to each other on the color wheel). The colors tend to overpower each other with no one color standing out too much. The use of analogous colors can create a beautiful page, but it’s wise to use a complementary color if you want one element (like your CTA button) to stand out from the rest.

2. Monochromatic Colors:

Monochromatic colors are a single color with different tints, shades, and tones. The differences between monochromatic colors are even more subtle than analogous colors. The colors work great when paired with the right complimentary color.

3. Triangle, Rectangle and Square Colors:

Once you’ve decided on analogous or monochromatic colors, you can use color combinations using a triangle, rectangle, and square on the color wheel:

A triangle (triad) is a color combination consisting of three colors evenly spaced on the color wheel. A rectangle (tetradic) is four colors — a color combination that consists of two complementary pairs. A square is similar to a tetradic; the difference is that the two sets of complementary pairs are evenly spaced on the color wheel.

Color and Word Associations

We tend to associate different colors with certain emotions. For example, red is often associated with danger while gold is associated with luxury.

CoSchedule’s graphic depicts colors with concepts that they symbolize:

Tools such as Adobe Color CC are a great help when you can’t decide which color combinations work well together. You can select the color combination, choose the shade, or simply play with the color handles until you find something you love:

Then, all you need to do is to import the color palette codes into the program you’re using.

No matter what color combination you choose, remember that contrast matters. Contrast is what makes your page elements stand out.

You can add contrast to a page by using one color with another color. Two different colors may not have contrast because their tone is the same. To see if the contrast is right, turn your colors into grayscale and review their contrast:

High contrast is usually your best bet on a landing page because the high contrast directs visitors’ attention to a particular element.

According to Jared Christopherson of Yellowhammer, if you’re choosing three colors for your page, it’s best to follow the 60-30-10 rule. That means 60% of color should be the background, 30% for the base (a form or different page section) and 10% of the color should be for accents (CTA button).

The background color is dark gray, which comprises a majority of the page. The base color is black, (the section with the form and CTA button). Finally, the CTA button color (the accent) is green which presents a nice contrast against the navy and black.

Page design doesn’t have to be limited to just three colors. Choose colors you think work for your audience, go to the color wheel, and see if they complement each other well. Your landing page will be better off for it.