Web Design: Tips on Using Color

Does Your website need design help? Helen Bradley shows how to use the color wheel to design the best color schemes for your Web store.

Updated and re-posted on 6/02/2011

Of all the choices you make when designing your Web shop, one of the most important is the colors you use when designing the website. Without reading anything on a website, simply seeing the colors it uses can tell you a lot about its products and the company behind it.


Editor's Picks
» Eight Photoshop Tips for Product Shots

» Picture Perfect: Blinging It Out on eBay

» Take Better Photos, Make More Money

» Prepping Product Shots for the Web

» Product Shots that Pop: It's Not About the Pixels

» Time is Money: Batch Editing Photos

That is, of course, provided the designers chose colors that would deliver the right message to the Web shop visitors. In this article I'll talk about color, how to use the color wheel to find color combinations, and I'll introduce you to some tools that can help you choose the right colors for your website.

Back to Grade School: Primary Colors and Websites

When you were at school you learned that the three primary colors were red, blue and yellow. When you mix these primary colors together, you get what are called secondary colors -- mix red and yellow to make orange, mix red and blue to make purple and mix blue and yellow to make green.

Mixing the secondary colors gives you tertiary colors which are yellow-orange, yellow-green, red-orange, red-violet, blue-violet and blue-green. The name of each tertiary color is derived from the colors that are mixed to make it, with the primary color first.


Website Design Tips: The Color Wheel Explained
Color Wheel: The color wheel is composed of three primary, three secondary and six tertiary colors. (Source: www.valdosta.edu)
(Click for larger image.)


Arranged around a circular color wheel you will see that red, yellow and blue appear equal distances around the color wheel. Between them are the secondary colors and between each primary and secondary color is a tertiary color. The colors on the red side of the color wheel are called warm colors and those on the blue side are considered to be cold colors.


There is, however, more to this relationship between colors than simply being able to locate them on the color wheel. By drawing lines and triangles between colors on the color wheel you can assemble colors that look good together, which is our goal.

Choosing Color Schemes for Your Web Shop

Colors that are opposite each other on the color wheel are called complements or complementary colors. For example green and red are complementary colors and, used together they can have a big visual impact — think Christmas.

The Triad color scheme is a color scheme that works on three colors that are equal distance apart on the color wheel. The basic triad is the primary colors of red, blue and green, but you can also have a triad of the secondary colors or of a combination of some tertiary colors. Triad color schemes result in colors that work very well together and they're also very bright with a lot of contrast between the individual colors.


An analogous color scheme is an almost monochromic color scheme which is created using colors that are very close to each other on the color wheel. Because of their proximity to each other, the colors look very similar and have a very solid feel about them.


In addition to the complementary color scheme, you can have what is called the split complementary color scheme. In this instance, instead of using two colors that are complements of each other such as red and green you use one color and two tertiary colors either side of its complement. For example, you might combine red with yellow-green and blue-green.


Each of these color combinations can be created by simply looking at the color wheel and plotting those colors that are in the desired relationship to each other. To create a complementary color scheme you draw a line across the color wheel from one side to the other and the colors at either end of the line are complements of each other.

Comment and Contribute
* Required Field
Your email address will not be published

Note: No advertising, no spam, no keyword in name/nickname field. Thank you!

Free Resources

Subscribe To Our Daily Newsletter