Color Theory Applied to the Web

Choosing colors for a new site may seem daunting at first, but creating a color scheme for your Volusion online store is simple if you follow a few basic principles of color theory when selecting your palette.

Color Theory

What is Color Theory?

Color theory covers a range of topics related to categorizing and mixing colors. You may already be familiar with the Primary Colors: red, yellow and blue. In addition to the Primary Colors, there are Secondary Colors—green, orange and purple—and the Tertiary Colors, red-orange, red-violet, yellow-orange, yellow-green, blue-violet and blue-green. The combination of Primary, Secondary and Tertiary Colors make up the full spectrum of the color wheel. With the right colors—either alone or in combination—you can add personality, emphasis and nuance to your website that will drive traffic and dramatically enhance your brand.

Who is your customer?

Consider your target audience. Colors create a lasting impression with customers as they reinforce the tone of your business and the products or services you sell. To communicate reliability and time-tested experience, consider a more conservative color scheme. Monochromatic tones set the right tenor with customers and prospects by communicating stability. On the other hand, if you offer unique, eclectic goods, your preferred colors may be bolder and fall in the primary category.

How do you Select Colors?

Monochromatic Scheme

 

Monochrome Wheel

 When in doubt, keep it simple! Monochromatic Color schemes are appealing to visitors and easier to implement within a design. Start by choosing a single color as your base, and use lighter and darker variations of that color to add contrast and emphasis throughout your site. Sites like PFFlyers.com (see figure 1a) and Gap.com (see figure 1b) use one strong color to reinforce their brand and accent deals and promotions. The rest of the site relies on photography and shades of grey to provide contrast and emphasis for content. A monochromatic scheme can bring visual harmony to your site and will help you ease into learning to use color in your store design.

Figure 1a

Figure 1a

Figure 1b

Figure 1b

Analogous Scheme

Analogous Wheel

Combining Analogous Colors is another way to simplify your color choices. Analogous colors sit next to each other on the color wheel. Two or three colors, like yellow, yellow-green and green can bring cohesiveness and a playful range of hues to your site. You might choose to use the brightest color to emphasize selling points and purchase opportunities. GetDoneDone.com (figure 2a) and Starbucks.com (figure 2b) make excellent use of analogous colors to direct customers’ eyes to important content. Analogous colors create visual harmony, but are more muted than colors on opposing sides of the color wheel. With varying intensity and saturation, Starbucks’ unique shade of green is grouped with yellow-greens and deep blue-greens that resonate with the brand and add variety that doesn’t feel chaotic.

Figure 2a

Figure 2a

Figure 2b

Figure 2b

Complementary Scheme

Complementary Wheel

To create strong contrast, pair Complementary Colors like red and green, orange and blue, or yellow and purple. This example from Nest.com (figure 3a and 3b) shows how cool blues helps anchor text and illustrations on the page, while the vibrant complimentary orange boldly directs your eye through the content. By using a bright orange against blues and neutrals, you can help your customers find products and quickly add them to their cart with a vivid call-to-action button.

Figure 3a

Figure 3a

Figure 3b

Figure 3b

When combined thoughtfully, colors can add vibrancy and contrast to your site while also creating an overall impression of harmony on the page. In every sense, colors can set the right tone for your customers’ shopping experience.

If you’re interested in reading more about combining colors to improve sales, check out this great overview from Kissmetrics. In addition, Colour Lovers offers an array of inspiring palettes and guides for choosing color combinations.

Happy selling!
-Kelly Hanner, Volusion

10 Responses to “Color Theory Applied to the Web”

  1. jual tas murah

    In your color palette, there is no red (as it states above). In fact, the color choices are not the best in my opinion – See more at: //www.volusion.com/ecommerce-blog/articles/color-theory-applied-to-the-web/#sthash.nJJYHcZs.dpuf
    jual tas murah
    tas murah online
    toko tas online
    tas online keren

    Reply
    • Matt Winn

      Hi there! Thanks so much for your feedback – I will share this with our Product team. If you’d like to use colors that aren’t shown by default in the color palette, you can click the button provided and enter the proper HTML or CSS in the appropriate locations in the HTML code. Thanks again!

      Reply
  2. Dawn

    In your color palette, there is no red (as it states above). In fact, the color choices are not the best in my opinion. What happened to all the color choices we used to have for text?

    Reply
    • Matt Winn

      Hi Dawn, thanks for the response! Are you referring to our Easy Editor? If so, if you’d like to use colors that aren’t displayed, you can click the button and manually enter the proper HTML or CSS in the appropriate locations in the HTML code. Hope this helps!

      Reply
      • Tim Faber

        I agree with the poor color choices…new easy editor is a big step backwards in functionality…I’m sure there was a reason for the change, but now very limited capabilities…and saving often re-formats paragraphs and changes old formatting set-up. I would think the easy editor would have been enhanced. Please pass on to product development team…but, very satisfied with sites we’ve had with Volusion 6+ years.

        Reply
  3. Michelle Crumpler

    I like to play around with my options for sites with Kuler from adobe https://kuler.adobe.com/create/color-wheel/

    Reply
  4. Horizon Sunglasses

    Color is something so basic but yet sometimes so over complicated. I am a fan of complimentary colors and think they help direct the customer’s eyes.

    Great article!
    Thanks!-Horizon

    Reply
  5. Alex

    I prefer monochromatic colors and analogous colors for websites. There is something about complimentary colors that I do not like – I can not pinpoint why, but they just do not look good to me.

    Reply
    • Jamie Aucoin

      Thanks for your feedback, Alex — So many factors go in to a site’s design, monochromatic and analogous color schemes are definitely a great way to go.

      Reply

Leave a Reply