Color Theory 101 : Compliments & Tones

Part One – Color Theory

Color is a very important part of design. Someone may look at a layout that is very well-designed and absolutely hate it, outright, without knowing why. Usually the culprit for this is the colors used in the layout. A small adjustment of hue could make all the difference in the world for the site.

The Color Wheel

This will be your new best friend. Learn as much as you can about the different kinds of colors that compliment eachother so that you can help your clients when it comes to the all important advice they expect you to give them.

The color wheel is the ultimate basic for every color scheme and compliment. Color is one of the most power-packing design concepts to learn. Color is everywhere – shouting at us from the vibrant red of stop signs, enchanting us with sunrises and sunsets, glaring at us from the neon advertisements in city streets…

The image to the left is an expanded color wheel, detailed to include hexidecimal color codes for reference in case of monitor discrepancies. (Note: Colors listed vary slightly from true #RRGGBB values for visual clarity.)

I’ll start at the 12 o’clock position and move clockwise:
Yellow: #FFFD00, Yellow-Orange: #FFCB01, Orange: #FF9800, Red-Orange: #FF6600, Red: #FB0200, Magenta: #9A005B, Purple/Violet: #9C00FF, Indigo: #660298, Blue: #0000FE, Teal: #009999, Green: #059732, Lime Green: #67CD00

Color Variations

There are also different variations of a color. Hue is the purest form of the color (and what is typically shown in a color wheel). Tint is the pure color with white added to it in a gradient. Shade is the pure color with black added to it. A monochromatic color scale shows all versions of a color, from adding white to the pure hue, to adding black. Grayscale is a black to white gradient.

This is a grayscale gradient, showing the full range of colors from white to black. A true grayscale is very cold compared to common misconceptions of “Black & White” because most B&W photos have a slight sepia tint. (Sepia is a very muted peach-tan color, often associated with aged photos, or used to soften the harsh contrast of typical black and white.)

If you were to lay a color over the top of the above color scheme, such as the blue pictured here, this is what you would end up with. This is a blue monochromatic gradient. As with the above gradient, several middle steps between the colors have been purposefully left out to show the distinction between the different shades in a digital media.

Color Compliments

The way colors work together with one another is based upon their position on the color wheel. You may understand a lot of these concepts without even realizing why. You know that Red and Green go well together, as they are the colors seen every year in every store as the Christmas season rolls in. If you’ve ever eaten in a fast food restaurant, you know that Red, Orange, and Yellow go well together. You know that Red and Blue go well together as those colors are seen everywhere – from the American Flag to Superman’s costume. If you’re a Carolinian, you know Purple and Yellow go well together, because you’ve seen them together as the school colors of East & West Carolina Universities.

Basic complimentary colors are those found directly across from one another on the color wheel. The most known of these are: Red and Green, Blue and Orange, and Yellow and Purple.

(It’s also no coincidence that these basic color compliments each contain a portion of the basic colors that introductory art students are taught to use as the basis of all colors: Red, Yellow, and Blue – or in television and movies: Red, Green, and Blue.) There are, of course, other colors that can be considered complimentary, such as Teal and Red-Orange, or Lime Green and Magenta.

Different Compliments
Split compliments and Triadic compliments are also seen on a fairly regular basis. Split compliments are complimentary colors (such as red and green) combined with one other color to the left or right of the first two. Examples pictured above: Red, Green, Teal; Orange, Blue, Yellow-Orange; Yellow, Purple, Magenta. Triadic compliments are three colors set at equal distances apart from eachother on the color wheel. Examples pictured above: Red, Yellow, Blue (whee!); Orange, Purple, Green. Analogous colors are three colors found directly beside eachother on the color wheel. Examples pictured: Red, Red-Orange, Magenta; Orange, Yellow-Orange, Yellow; Lime Green, Green, Teal; Blue, Violet, Indigo.

Even if you don’t remember what it’s called when a company has Purple and Green for their main color scheme, or the wording presented above, it’s always important to remember which colors look best together so your design doesn’t turn out to be the most hideous thing on the planet. Remember: colors that are often chosen to go with one another are usually done so for a reason!

You can see more detail about color compliments at the following link:

Share and Enjoy:
  • email
  • Facebook
  • Twitter
  • LinkedIn
  • MySpace
  • Google Bookmarks
  • Google Buzz
  • Tumblr
  • StumbleUpon
  • Digg
  • Reddit
  • Yahoo! Buzz
  • Add to favorites
  • RSS
This entry was posted in Uncategorized by Jackie. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *



You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>