Design - Color Theory

Color Terminology

I am fascinated by User Interface design.  Over the years I have developed web pages and applications, I’ve done some rudimentary Graphic Design to create some custom backgrounds or logos.  When creating a design I like to think it through for usability, simplicity and elegance; and I have found that it is the little details that make the difference between an award-winning website and something that looks like a high-school student threw it together for an assignment.  As such, I find Color Theory a fundamental skill; and not just for Website Design or Interface Design, but as a transferable skill that can be used for presentations and gaining a deeper understanding of human psychology and physiology at some level.

To start colors have subtle, yet distinct meanings; the same way that two synonyms have different flavors.  When picking a color you should think about the kind of message you want to send:

Black – strength, professional, definite
Gray – balanced, calm
Pink – romantic, feminine, friendship, affection
Red – exciting, bold, youthful, danger
Orange – cheerful, friendly, confident, adaptability
Yellow – optimism, clarity, warmth, concentration
Green – natural, organic, calming, money
Blue – calming, dependable, clean, sincerity
Violet – loyalty, wisdom
Purple – creative, imaginative, tension, wealth

Or possibly your target audience:
Men’s Favorite Colors – Blue, Green.
Women’s Favorite Colors – Blue, Purple, Green, Red.

Colors are generally viewed two different ways: Additive – created by the mixing of light (adding red, green and blue together gives us white light), and Subtractive – created by the mixing of paints and objects (mixing cyan, magenta and yellow together gives us black, subtracting each color gets us back to white).  Additive colors (RGB) are used to describe colors on a computer monitor or website.  Subtractive colors are used to describe real world physical objects such as a poster.

If we were to set up a color-wheel with red at the top (lets’ call it 12-O’Clock or 0° position) and travelling through our rainbow through Green, then Blue and back again to Red we would see that Red, Green and Blue are equidistant from each other (0°, 120° and 240°).  These are often known as our Primary Colors and can be combined on your monitor to make white; in all honesty any three equidistant colors would work here but we like these because they line up more naturally with the way our eyes perceive colors.  Cyan, Magenta and Yellow are often referred to as Secondary colors; they can be combined to give us black ink and were chosen by the printing industry due to dye availability and cost.  Other colors are often referred to as Tertiary colors.

Warmer colors (the top half of our wheel) feel as if they are moving toward you, Cooler colors (the bottom half) feel as if they are receding.  Warmer colors work well for foreground objects while Darker colors work better for the background.  As an interesting side note there are certain types of 3D glasses that can amplify this effect and work right-out-of-the-box with many cartoons penned by traditional artists since they use rudimentary Color Theory when drawing.

RGB vs. HSV

Computers understand RGB (how much Red, Green and Blue to use to make our color); the computer usually stores these as hex values (a range from 0% to 100% becomes 0x00 through 0xFF (0123456789ABCDEF)).  Two Hex digits are used for each color (0xRRGGBB).  Color Theory works off of Hue, Saturation and Value though.  Let’s look at an example - the 216 Web-Safe colors come from creating all of the different combinations of 0%, 20%, 40%, 60%, 80%, 100%) values:

    Decimal   Hex      Percent
    0         0x00     0%
    51        0x33     20%
    102       0x66     40%
    153       0x99     60%
    204       0xCC     80%
    255       0xFF     100%

As you can imagine, it is difficult to determine which color is 30° away from Red (0xFF0000 or #FF0000).  In order to determine which colors to look at we need to convert to HSV (Hue, Saturation and Value). 

Hue is defined as the perceptible color corresponding to a specific wavelength of light (eg. Bright Red Violet “#CC00FF” – Violet “#9933FF” – Blue Violet “#6633FF”).  This is normally represented as a value between 0° and 360°, we will treat Red as 0°, Green as 120° and Blue as 240°.

Value is either the Lightness or Darkness of a color; depending on the conversion formula this is referred to as Tint (combined with white), Tone (combined with white/black) or Shade (combined with Black).  The exact formula you use for conversions will cause some minor variations in much the same way that choosing a Black vs. a White Movie Theater screen will cause variations (eg. Red “#FF0000” – Carnation Pink “#FF99CC” – Empire Ruby Red “#CC3333” – Deep Burnt Sienna “#660000”).

Saturation (Chroma) is the relative intensity of a chromatic color, or how far away from Gray the color is (eg. Pure Cyan “#00FFFF” – Carribean Blue “#33CCCC” – Mediteranian Blue “##339999” – Deep Blue-Green “#336666” – Charcoal Gray “#333333”).  A color is considered pure Gray-Scale if Red==Green==Blue.

So, to translate we are going to switch to some pseudo-code:
   RGB_to_HSV()
   {
      Min = min(R, G, B)
      Max = max(R, G, B)
      Value = Max         // this is our brightness
      Delta = Max – Min
      If (Max != 0)
         Saturation = Delta / Max
         If (R == Max)      Hue = (G – B)/Delta
         Else If (G == Max) Hue = 2 + (B – R)/Delta
         Else               Hue = 4 + (R – G)/Delta
         END_IF

         Hue *= 60
         If (Hue < 0) Hue += 360
         END_IF
      Else
         Saturation = 0
         Hue = -1
      END_IF
   }

Basically we are using Brightness for our Value (how close are we to white).  We could also add our R + G + B together here and get slightly different results.  It can be fun tweaking these formula to see how the results change.  Hue gives us a value between 0° and 360°; If Red is our predominant color we get a value between -60° and 60°.  Saturation is a measure of how closely the color is to Gray-Scale or how closely the three colors match in intensity.

Now that we have our Hue values we can start talking about color combinations:
Picking three colors that are side-by-side on the Color Wheel (eg. Yellow, Spring and Green at 0°, +30°, -30°) provides a harmonious balance, these are called Analogous colors.  Analogous colors are relaxing and grounding.  Neutral combinations are a little more closely related so more subtle, these are 0°, +15° and -15°.

Complimentary colors on the other hand represent a contrast, they provide energy with some discord; they are located directly across from each other on the wheel (0°, +180°)..  Split-Complimentary colors are a little easier to work with (0°, +150°, -150°) and open up a third color choice.

If you were feeling more confident you could try a Triadic Combination (0°, +120°, -120°) which provides a lot of tension.  Tetradic (0°, +90°, +180°, -90°) or even 4-Tone (0°, +60°, +180°, +240°).

Tonal Color Harmony can be obtained by adjusting the base colors Tint, Tone or Shade.  Chromatic Color Harmony is based on adjusting the Hue and Brightness while keeping the Saturation the same.

Monochromatic Color Harmony can be achieved by playing with the Hue, Tint, Tone, and Shade individually.

Summary

So, what does all of this actually mean?  If you want to design something (presentation, webpage, software, painting, etc…) you should try to pick a color that enhances your message for your base color.  After  you have picked that color you should choose a few more colors to round out your pallete.  It is best to limit yourself to four or fewer colors;  I’d recommend Analogous or Split-Complimentary colors unless you are feeling extra bold.

With this information under your belt you should be ready to create an attractive looking… whatever.

And now for some links to sites that probably describe color theory far better than I just did:
http://www.worqx.com/color/
http://www.colorvoodoo.com/