Web Design: Tips on Using Color By Helen Bradley
June 26, 2008
Of all the choices you make when designing a Web site, one of the most important is the colors you use. Without reading anything on a Web site, simply seeing the colors it uses can tell you a lot about its products and the company behind it.
That is, of course, provided the designers chose colors that would deliver the right message to the site's 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 colors for your Web site.
Back to Grade School
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.
Color Wheel: The color wheel is composed of three primary, three secondary and six tertiary colors. (Source: www.valdosta.edu)
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.
Color Schemes
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.
Think Christmas: Complementary colors are opposite each other on the color wheel and they have a big impact.(Source: www.sessions.edu)
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.
Online Tools
To save having to do all the work, there are some online tools you can use to do this more easily. One site is from the Online School of Design. Here you can select a color by dragging on the color wheel and then select a color scheme to test. For example, choose Complement and drag on the color wheel to view complementary colors. In the Design Pane you will see a design showing you the colors in use so you can see how they might look when applied to a project.
Click the triangle option to view a Split Complementary color scheme. The Triad shows you the Triadic color scheme and the rectangle and square offer you different complementary color schemes.
One benefit of a tool like this is that you can adjust the saturation and lightness so you can view a pastel version of the scheme by increasing the Lightness and achieve a more muted version, tending to monochromatic, by reducing Saturation.
The analogous color scheme is very subdued and the colors are all close to each other. (Source: http://wellstyled.com)
One reason why color is so important a choice for a Web site is that colors are suggestive of emotions and many have a cultural significance. In western society, white is the color of purity and associated with weddings but in other societies it is associated with death and funerals. Knowing what a color means to your visitors can help you choose colors that will carry your desired message to your Web site's visitors.
For a site that wants to look serious and professional, a monochromic or analogous color scheme will carry that message, particularly if it is based on a shade of blue. Brighter high contrasting color schemes of lime green and pink are appropriate for kids and pastels are always popular for babies. At any time, there are colors that are very "in" and you might use these if being on the cutting edge is important for your site. The Pantone Web site tracks the colors that are in fashion each season, for example, here is the Fashion Color Report for Fall 2008.
Choosing the right color scheme for your web Site is a combination of determining what colors will carry your desired message to your site visitors and assembling a small palette of colors designed around this color to be your color scheme. In an upcoming article I'll show you how to implement your chosen color scheme on your Web site.
The split complementary color scheme uses one color and colors either side of its complement.(Source: http://wellstyled.com)
If you need help, here are some of my favorite color resources:
Color in Motion: You'll need a spare hour or so to really take in all this site has to offer. Here you can put the primary and secondary colors through their paces to see what each color suggests in terms of emotions and cultural significance. The site is an absolute delight to view and enjoy. If time is short, select the Menu and then Stars for the nitty-gritty gritty of what the colors are all about.
Well Styled : After Colors in Motion any site will look a bit lackluster but this site is a very handy tool. Use it to experiment with monochromatic, contrasting/complementary, triad, tetrad and analogous color schemes. Click a color on the color wheel and the panels will show you alternative color schemes you can use.
Go to Design School: This tool from the Online School of Design is similar to the tool from wellstyled.com but less web-centric and more general in its approach. You can see colors side by side in working patterns but not the way they might be arranged in a Web page.
Adobe Kuler: This site from Adobe is a good place to find interesting color schemes that other people have already designed. If you're looking for inspiration this is a handy place to start.
Helen Bradley is a respected international journalist writing regularly for small business and computer publications in the USA, Canada, South Africa, UK and Australia. You can learn more about her at her Web site, HelenBradley.com.
Do you have a comment or question about this article or other e-commerce topics in general? Speak out in the SmallBusinessComputing.com E-Commerce Forum. Join the discussion today!
Tools:
Add ecommerce-guide.com to your favorites Add ecommerce-guide.com to your browser search box IE 7 | Firefox 2.0 | Firefox 1.5.xReceive news via our XML/RSS feed
IE 7
Firefox 2.0
