How to strategically use color in website design

by
Stephanie Corrigan
Paintbrush and web browser visualisation
Using color intentionally in website design is critical; colors evoke meaning and emotion, often at a subconscious level. When used strategically, color is a powerful tool for communicating a brand's message and creating brand recognition.

Color selection in website design comes down to more than just aesthetics. In order to create an effective color palette for a website, it's important to first understand color theory, psychology, and harmony. From there, you can create a palette that aligns with the brand's values, messaging, and target market.

In this post, we'll teach you how to use color to create impactful, high-value websites for your clients. If you prefer to consume content in video form, watch the video below for a ten minute lesson on using color in website design with Ran Segall, Flux Academy's founder.

1. Consider cultural context

Although different colors have different meanings on an individual level, certain colors also have deep-rooted cultural significance. For instance, in Western cultures, red is an attention-grabbing color that signifies danger and urgency (think stop signs). However in some Eastern cultures, like China and India, red represents luck. As another example, black is the color of death and mourning in Western cultures. In some Eastern cultures, the analogous color is white.

As the above examples illustrate, context is critical in color section. Depending on where a brand's target market is based, the colors used on its website could send a very different message. So how do you know which colors to include or avoid based on a client's target market? A simple Google search should do the trick.

If a brand has a global target market, consider avoiding colors like red that have deep cultural significance. Since cultural color meanings are so ingrained in our psyche, we may not consciously realize that we're averse to certain colors. Of course, there are some exceptions. The Coca-Cola Company is known universally for its signature red brand color. In this case, the recognition associated with the brand color is powerful enough to overshadow any negative connotations associated with the color red in Western society.

2. Understand color theory

Color theory is a set of fundamental principles that govern how to create harmonious color combinations. Understanding these principles is an important first step in creating effective color palettes for brands and websites.

The color wheel

A great tool for understanding the basics of color theory is the color wheel. We've all seen a color wheel before in some variation or another, but for the purposes of this post, we'll use it to examine primary, secondary, and tertiary colors.

Visualization of the color wheel
The primary, secondary and tertiary colors on the color wheel

Primary colors

The three primary colors are red, yellow, and blue. When combined, primary colors form secondary colors.

Secondary colors

The secondary colors are purple (red + blue), green (blue + yellow), and orange (red + yellow). Combining secondary colors with primary colors creates tertiary colors.

Tertiary colors

The tertiary colors are combinations of primary and secondary colors (i.e. red-purple, yellow-orange, blue-green, etc.)

Tints, shades, and tones

Primary, secondary, and tertiary colors are considered pure colors. They are saturated, vivid, and cheerful. Tints are the addition of white to pure colors. This creates lighter, less intense colors. Shades are created with the addition of black to pure colors. Finally, adding black and white to pure colors creates tones. Tones are more subdued than pure colors.

Visualization comparing tint vs shade vs tone
Comparing Tint vs Shade vs Tone

Now that you understand how different colors are formed and arranged on the color wheel, it'll be easier to create visually appealing color palettes. Color palettes are covered in more detail below in Step 4.

Using contrast

Another important color theory principle concerns the use of contrast. The higher the contrast, the more two colors stand out from one another.

When evaluating contrast, it's important to consider not just the colors (i.e. blue and green), but also their tone. Two different colors with an even tone don't create high contrast. An easy trick for determining the contrast level of two colors is to convert them to grayscale--the difference in contrast will be much more apparent.

3 green backgrounds with varying blue foreground text to show high vs medium vs low contrast
Make sure to use a contrast checker!
graphic comparing high vs medium vs low contrast
Contrast is a big part of accessibility

Generally, we want to use colors with high contrast in website design because of greater legibility. For instance, white text on a dark background, or vice versa. Contrast draws attention and can make certain important elements stand out visually. However, too much color contrast on a website can wear out our eyes. The below website is a good example of how to balance high and low contrast in web design.

Source: Raw Studio

Check out this post to learn more about color theory and how to apply it in website design.

3. Use color psychology to communicate brand messaging and values

Color psychology refers to the influence of color on our feelings, emotions, and behaviors. Although it's a bit subjective, color psychology can help us subconsciously influence people who visit our website in meaningful ways. This makes it a powerful tool for design and marketing.

Colors spark emotions

People are drawn to certain colors in part because of how they make them feel. On the flip side, colors can also cause a gut reaction that would lead someone to avoid associating with them. If this is sounding a bit vague, it's because we're missing a crucial piece of the puzzle: context. In a certain context, red might cause us to feel fear and anxiety. In another, it could incite passion and excitement.

If you want to use color in website design to convey a certain emotion, it needs to integrate seamlessly with other the elements on the page, such as typography, imagery, and copy. With that caveat in mind, let's review some of the most common associations between color and emotion.

Common color associations

The below color associations can be used as a reference guide as you consider which colors would best represent a particular brand. How should the target audience feel when they encounter the brand's website? What actions should they take? With the right context, color could make the difference between an engaged potential customer and a disinterested passerby.

  • Red: passion, power, love, danger, excitement
  • Blue: calm, trust, competence, peace, logic, reliability
  • Green: health, nature, abundance, prosperity
  • Yellow: happiness, optimism, creativity, friendliness
  • Orange: fun, freedom, warmth, comfort, playfulness
  • Purple: luxury, mystery, sophistication, loyalty, creativity
  • Pink: nurturing, gentleness, sincerity, warmth
  • Brown: nature, security, protection, support
  • Black: elegance, power, control, sophistication, depression
  • White: purity, peace, clarity, cleanliness

Check out this post to learn more about the psychology of color.

4. Create a color palette

Now that you have a better understanding of color theory and psychology, you're well-equipped to create an intentional color palette for your client's website. The first color you choose should be the brand's primary color. Not to be confused with primary colors in the color wheel, in this case "primary color" refers to the main color in a palette. This is where color psychology really comes in handy. Below are some examples of brands that effectively used color psychology to select their primary brand color.

Coca cola webpage screenshot
Coca-Cola proudly showing off their vibrant red

To reiterate on an earlier example, The Coca-Cola Company is a brand who took their primary color, a vibrant red, and ran with it. The color is all over their website and advertising. The only other colors in their palette are black and white, which are used for text. Red associates Coca-Cola with feelings of excitement, love, and warmth.

Whole Foods webpage screenshot
Whole Foods' green color matches perfectly with their company mission

Whole Foods uses an earthy green as their primary color. Like Coca-Cola, Whole Foods displays their signature color all over their website. Green ties in nicely with Whole Foods' values and clientele: health, nature, and abundance.

Lowe's webpage
Lowe's dark blue conveys trust and reliability

Lowe's is a popular home improvement chain whose primary brand color is a deep blue. Due to the nature of their products, it's important that the Lowe's brand and website convey trust, competence, and reliability, all of which are associated with the color blue.

Color palette types

There are five main types of color palettes: analogous, monochromatic, triad, complementary, and split complementary. Any of these can be used to creative an effective color palette for a website. Below we'll look at some examples of how each of these color palette types are used in website design.

Analogous

Analogous colors are colors that sit next to each other on the color wheel. This type of palette can look very beautiful because the colors fit together so nicely. However, the effect could be too subtle, preventing any elements from standing out enough.

Analogous palette
Analogous colors sit very close to each other on the color wheel

Emme webpage screenshot
Source: Emme

Monochromatic

Monochromatic color palettes are based on a single color paired with various shades and tints. Like analogous palettes, monochromatic palettes can be very pleasing to look at. However, it's a good idea to add a complementary color to a monochromatic palette in web design in order to draw attention to important elements.

Monochromatic color palette
Monochromatic colors mostly involve brightness variation

Rosaluna webpage screenshot
Source: Rosaluna

Triad

Triad color palettes consist of three colors that are evenly spaced apart on the color wheel, forming a triangle. This type of color palette is a bit risky to use in website design because it can appear noisy. However, depending on context, triad color palettes can be very effective for youthful, playful, and/or artistic brands.

Triadic color palette
Triadic colors are evenly spaced on the color wheel

Source: Parse

Complementary

Complementary color palettes contain colors on opposite ends of the color wheel. These palettes are very effective for web design because they create visual balance and tension. If the colors are used equally however, the tension can be too high. Instead, choose one of the complementary colors as the primary brand color, and use the other as an accent color.

Complementary colors
Complementary colors are opposite to each other on the color wheel
Aerial webpage screenshot
Source: Aerial

Split Complementary

Split complementary color palettes are similar to complementary palettes but with a third color thrown in that's next to one of the complementary colors on the color wheel. This type of color palette is also very effective in website design and can add more visual excitement without creating too much noise.

Split complementary colors
Tons of premium brands that use this color combination!

Shelby Kay's portfolio website
Source: Shelby Kay

How to use color palettes in website design

There are various online tools you can use to aid in the process of creating color palettes. A personal favorite, demonstrated in the screenshots above, is Adobe Color. With this tool, you can play around with the color wheel to create a custom palette with any of the five color palette types listed above. You can also upload an image to extract colors from, or click on the Explore tab to peruse pages and pages of color palettes.

To start, I recommend choosing three colors for your palette: a main (or primary) color, secondary color, and accent color. Then, use the 60/30/10 rule to apply these colors in your website design. According to this rule, 60% of the color used should be the main color, 30% the secondary color, and 10% the accent color. Keep in mind, black and white count as colors, too. Below are some examples of stunning websites that incorporate the 60/30/10 color rule.

Spendesk webpage screenshot
Dominant purple with teal used as an accent

Spendesk uses purple as their main color, white as their secondary color, and teal as their accent color.

Greenlist webpage screenshot
Dominant green paired with a nice salmon as an accent

Greenlist uses green as their main color, white as their secondary color, and pink as their accent color.

Demuxed webpage screenshot
Demuxed leads with Yellow and pairs that with black and white

Demuxed uses yellow as their main color, black as their secondary color, and white as their accent color.

An important note about the 60/30/10 rule is that it's really more of a guideline than a rule. For example, you may wish to incorporate more than three colors in your palette. The main takeaway is to focus on the primary color and use other colors to divide elements, create contrast, and highlight important features.

Master the use of color in website design with our course

In this post, we covered the basics of color theory and psychology and how they're used to create impactful color palettes in website design. But as you know, color alone isn't the be-all-end-all of functional web design; in order to create high-value websites for clients, we need to combine color principles with strategy, typography, layout, UX, and more. Our course, The $10k Website Process, teaches just that.

Click here to learn more about what's covered in the course and how it's helping 1,500+ students transform their web design process and book larger projects.

FREE WEBDESIGN COURSE IN YOUR INBOX

Start growing your business today with Ran’s High-Value Web Designer Secrets email course that teaches you the three most significant things he’s learned as a freelancer.