eCommerce Website Page Design: How to Match Colors

TMO Group TMO Group

Before designing some eCommerce website pages, nearly none of us look at theories about how to match colors, which probably cause us bored. But after that, reviewing these theories sometimes can inspire us. In this article, we’ll avoid telling some boring theories and give some useful tips on how to match colors for good looking web pages.

1. Color matching ratios

A Japanese designer ever put forward a golden ratio to match colors, which is 70:25:5. That mean 70% of the page use main color, 25% use subordinate color, and 5% use ornament color. Normally, colors quantity should not more than 3(Dark red can be considered to red).

To be honest, using colors, the less, the better. It makes the page clean and mature. Except for some holiday poster, more colors will make it lively.

2. The relationship of colors

Matching colors is a progress which depends on the color’s position in the color ring. The contrast will getting smaller along with the angle getting smaller and vise versa.

color ring

There are 6 colors we need to remember in our mind: red, orange, yellow, green, blue and purple. All colors can be made by mixing these 6 colors. The following is some common ways to match them.

  • Match colors with neighbors

According to the color ring, this kind of matching could be red+orange, orange+yellow,yellow+green..and so on. It creates a warm feeling. It also weakened the visual impact. Here are some examples:

Match colors with nerghbors

The characters color is similar to the background. It looks comfortable and elegant. Characters are converted to word art, which are harmony with the style.

matching colors with neighbors

This poster use the matching “red+orange”. Orange is the main color. Combining light orange and dark orange makes a sense of hierarchy. The person’s surprised expression makes it filled with energy.

  • One color interval

According to the sequence, we can use the matching “red+yellow”, “orange+green”, “yellow+blue” and so on. The visual impact is stronger than using neighbor colors. Especially for the trichromatic color including red,yellow and blue. Mixed with these three colors are widely used and popular.

trichromatic color

This banner mainly use the trichromatic color. Blue is used as contrasts. It has a good sense of spacing.

red+yellow poster

“Red+yellow” looks like a holiday promotion poster.

For “red+blue”, it is the most popular matching that many designers use it. These two colors have a strong contrast. What can you remember for this matching? Here are some famous logos:

Baidu logo
pepsi logofirefox logo




  • Complementary colors matching

From my point of view, matching two opposite colors in the color ring is dangerous for any eCommerce websites. But some experienced designer can handle it very well. One important thing should be keep in mind if we use this kind of matching. We’d better choose a main color. Otherwise may make it uncoordinated.


In short, the wider the angle, the stronger the contrast in the color ring. Although practises are based on theories, our imagination should not be limited, isn’t it?

TMO Group is a web technology company in China. We provide eCommerce website development from early stage design to long-term maintenance. Send us an email to communicate with us!

Subscribe to our newsletter

News of the eCommerce world, best practices to use in your eCommerce platform, insights and analytics of Chinese and South East Asian eCommerce markets - all that and much more in our monthly newsletter.