Jul 20

How to Work With Color Schemes

Working with color schemes is an art but it is also science. For many, it is not something that comes naturally. Working with color schemes is akin to learning to play a musical instrument, learning to write, or learning a second language.

The point is that, while it may seem like an impossible task to some, learning to work with color schemes is not impossible. It may take some time, it may take some practice, but it is a learned skill and you can pick it up.

As with any skill, you must have the proper tools in order to advance. Even someone who is colorblind can learn to pick a color scheme that is effective and pleasing to the eye given the right tools. Almost anyone can select the colors to be a part of the scheme like a pro and there are web designers who prove this each day.

The Basics

Working with color schemes starts by understanding the fundamentals of color that we all learned back in elementary school (but may have forgotten amidst the foundational knowledge of calculus and advanced biology). Red, yellow, and blue are the three primary colors. The secondary colors are the mixture of one primary color with another primary color – yellow and red equal orange, blue and yellow combine to make green, red and blue mix into purple. This comes back to us quickly. However, can we move beyond this to the tertiary colors?

The creation of tertiary colors occurs when a primary color is added to an adjacent secondary color. The result is the six tertiary colors. Therefore, as you can see, there really are not that many options that you need to worry about in the initial stages of design. If you feel you are “color blind” when it comes to color schemes simply stick to these basics and you will be fine. When we consider color schemes, most of us think of the color wheel. Almost everyone uses a color wheel, from beginner to expert, from house painter to artistic genius.

The most basic color scheme is the triad scheme. It is also the easiest way to use a color wheel. The triad scheme simply uses an imaginary equilateral triangle hovering over the wheel. Each point of the triangle is a color that is compatible and that you can use. There are four basic positions that the triangle can take.

Once you have a clear understanding of the color wheel and triad scheme you can move to complementary colors. These colors are across from each other on the wheel and seem to make each other stand out more. One popular example is the “Christmas” color combination of red and green.

This covers the fundamentals of color schemes. It’s all coming back to you now right? Now that you have regained your previous understanding of the basics, let’s move on to trying some variations.

Advanced Color Schemes

Double complements, splits, alternate complements, and tetrads start getting us into new and exciting territory. Two complementary pairs combined form a double complement, a triad combined with a hue complement forms an alternate complement, and using three colors, a hue, and two hues adjacent to the colors complement gives you a split complement. This may sound confusing but get yourself an inexpensive color wheel and you will have no problem working with advanced schemes. Having the color wheel in front of you makes it much easier. You should be able to find a color wheel online that you can print off or go to your local art store.

Advanced color schemes are really beyond the scope of this article as we cover the basics. If you are one of those who do not have a lot of confidence in your color choices, the advanced color schemes may make you a little uneasy. However, if you are interested in learning more simply check out your local library or do some searches online. There is a lot of very good information out there that will help you learn about advanced color schemes.

Related Color Schemes

Monochromatic and analagous color schemes are easy to use and effective. They use related colors of the color wheel. They are some of the easiest and most popular schemes for online use. For those who have trouble with colors, it is hard to go wrong with related color schemes.

Monochromatic Schemes

Monochromatic colors use one hue along with its varying shades and tints. This is a scheme that can give your site a nice, crisp, clean, professional look. I find it to be one of the easiest schemes to use and it tends to be very effective.

Analogous Schemes

An analagous scheme uses any four continguous colors of the color wheel. This again is a very simple scheme to use and, although quite similar, it gives your site just a little more “pop” than a monochromatic scheme. Simply choose the main color focus for your site and then choose three colors immediately next to it. It is quick and easy to develop an analagous scheme.

Final Thoughts on Color Schemes

The information in this article provides some basic information on the fundamentals of color schemes. Keep in mind that the various schemes are meant to be played with. Start with the basic scheme and then tweak it to get it to where it looks good to you. If the scheme is appealing to the eye it will be much more effective. Vary the shade or the amount of saturation. However, remember the KISS principle and don’t go overboard. Your site should be readable and have an overall appeal that is pleasant to look at.

Look at how the colors play off each other and don’t be afraid to try something bold. If you don’t like the look simply delete it and start over. Unlike painting, working with color online can always be redone at the click of the mouse. Have fun with your color schemes and you will soon be working with color schemes like a pro.

Tags: , , , ,

Did you miss any of these?

Subsribe To Our Feed

If you enjoyed this post, make sure you subscribe to my RSS feed. Thanks!

10 Responses to “How to Work With Color Schemes”

8 Comments

  1. Great info – keep up the great work.

  2. moserw says:

    Good and important thoughts. Never fancied my chances with color schemes and color coordination though. Shall try to follow the points you have given here.

    moserws last blog post..Jesus Heals! Throat Pain Left Me In A Hurry!

  3. salwa says:

    Thanks guys for commenting. Been able to use of colors schemes well is very important in web design. Colors serve as a means of communication. Creating your website with the creative use of colors can give you many advantages.

  4. dimaks says:

    though i dont follow this religiously, some say colors shall be minimized as much as possible. stay on the base of simplicity. nice tips here by the way. keep posting!

    dimakss last blog post..How to Maximize Your Memory

  5. Nancy says:

    I’m one of those “color blind” souls you mentioned. I find when I try to do anything even remotely artistic using some kind of paint program I mess it up. My problem seems to be more of trying to use too many colors and then they all end up jarring with each other. Out of interest, do you have any idea what the average number of colors are you use in a template?

  6. Nancy says:

    I do like to dabble but I’m no good at it as I said. One site I found helpful you may like is http://www.colorcombos.com/. Its best feature from my point of view is you can put in the URL of a site whose colors you like and it tells you exactly which colors were used. You’ll see the Grab Website Colors option on the right. Don’t forget to use the “www” in the URL otherwise it won’t work.

    Even with tools like that I’m still pretty useless but I keep them in my Favorites. lol I really admire anyone who can coordinate colors effortlessly.

  7. Kay says:

    I’m a visual person myself and am very fickle about what attracts me to a template. Sometimes I like the softer, muted shades and others I want something with more of a vibrancy to it. Right now I’m in a muted phase but that will change no doubt. I wish I had an ounce of talent in that department but sadly it wasn’t meant to be. I have the greatest respect for graphic designs and artists who can bring something out of their head and onto the canvas.

    Kays last blog post..SEO Futures

  8. Sometimes, I wonder if it would be better to have 6 colors that compliment each other in various sections of a site, or if one would be better off sticking to 2 colors that partially compliment each other. It is a tough call because less colors can come out as cleaner and easier on the brain, while more colors can provide an abundance of thoughts for the viewer as they travel through a site.

2 Trackbacks

  1. [...] How to Work With Color Schemes [...]

  2. [...] – How to Work With Color Schemes saved by frenchbabe5002008-10-01 – A case study of poverty advocacy and GIS saved by [...]

Leave a Reply

CommentLuv Enabled

This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.

No public Twitter messages. twitter
flickr-photostream

BlogRiffic is powered by WordPress, with some pure XHTML and CSS Loving. All rights reserved