Color wheels are tools that teach color relationships by organizing colors in a circle so that you can visualize how they relate to each other. 

DESIGN ON THE WORLD WIDE WEB  The Web Wheel

By Bev Harcus

Computer monitors display color by combining percentages of red, green and blue light to create the appearance of millions of colors.  In the RGB system, the red, green and blue components of each pixel (picture element) are assigned a number between 0 and 255.  Choosing colors for display on a computer, projector or video is then a simple matter of selecting a particular combination of red, green and blue.

Using color on the Web becomes a little more complex.  HTML (hypertext mark-up language) is the basic programming language for Web graphics.  Colors must be recognized as HTML code, and HTML code describes colors using base 16 mathematics. (This goes way back to first generation programming or machine language.)  Base 16 math is also called Hexadecimal.  All colors used in HTML programming are based on hexadecimal codes.

To further complicate matters, not all colors display similarly on all computers or across platforms or browsers.  The Web designer must also keep in mind that a large percentage of Internet users have systems that are not capable of viewing all 16 million colors.  Most users are capable of viewing at least 256 colors.  So why are there only 216 Web-safe colors?

This has much to do with viewing colors across platforms.  Each platform (PC, Mac, SGI, etc.) uses specific colors (about 40) for its own system colors.  This now leaves us with 256-40=216 colors that can be viewed similarly on any platform.

Web-safe palettes delineate these 216 colors in a linear fashion, showing specific color swatches.  These palettes can be difficult to use, as colors are not arranged in a visual manner.

The Web Wheel by the Color Wheel Company was constructed to aid the user in selecting Web-safe colors based on a visual display.  Each color has the hexadecimal code and RGB values printed on it.  The Web Wheel makes it easy to locate a color of your choice, without having to search through numbered charts.  To use the Web Wheel, all you need to do is choose a color on the wheel and use the printed HEX code, or RGB values, in your HTML coding.

The Web Wheel serves a secondary function, that of finding analogous colors (colors lying side by side), opposite or complementary colors, and color triads.  This allows the user to easily find a color scheme that appears blended (analogous colors), has high impact (complementary), or has a harmonious appearance (triads).

One side of the wheel contains a strip of "hue" names, indicating the natural sequence of colors around the spectrum, going from yellow through red, magenta, blue, cyan, green, etc.  This allows you to locate "safe" colors that most closely resemble the natural colors of the spectrum.

The Web Wheel is a valuable aid to Web graphics, allowing the user to see, at a glance, colors and codes necessary for the Web design process.  With a physical wheel at hand, or propped on a desk, there is no longer a need to flip between programs or to use a digital hex calculator to find the appropriate colors for your Web design.

A good exercise might be to study the paintings by your favorite
artists.  Learn the placement of shapes, the line and contrasts of the components.   Contemporary artists are the boldest with their use of design elements in color, line and balance.  A good exercise would be to follow a master's lead, utilizing his/her design elements in your own interpretation.  You may be surprised at the results.  

Primary Colors — Part 1
By Bev Harcus and Patricia Jaster

When you work with color, two of the most important things to learn are:

1. How to mix colors so that you can get exactly what you want.

2. How to control color values so that your pictures don't look too flat.

Primary means "first," and primary colors are therefore the first colors you need in order to mix a variety of other colors. Knowing your primary colors is the first step to achieving proper color mixing.

What are primary colors?

Color is actually a component of light. Light travels in waves, and these waves have different lengths and speeds. When the waves reach our visual receptors (our eyes), we experience the sensation of color. These wavelengths of light can be broken down into three (primary) categories:

1. The longer, slower wavelengths produce red light.

2. The shorter, quicker wavelengths produce blue light.

3. The middle range wavelengths produce green light.

An equal mixture of these wavelengths produces pure white light.

Red, green and blue are called the primary colors of light. These colors are used to project images in television screens, computer monitors, and anything that transmits light from a light source.

But, as artists, we are using pigments (paints, inks, dyes, etc.), not light. So what does light have to do with primary colors? Actually, everything! Colors of pigment are produced by reflecting and absorbing certain wavelengths of light.

Primary Colors of Pigment

A primary color of pigment is a color that reflects equal parts of any two of the (primary) colors of light (red, green and blue). (Diagram A, which can be viewed online at www.colorwheelco.com/use_cmywheel.html, illustrates the result of projecting red, green and blue lights onto a white surface in overlapping fashion.) Where any one light reaches the surface, it is reflected back from the surface. Where two lights overlap, they are both reflected from the surface, resulting in a mixture of those two colors. Here's how it works:

• Where red and blue lights overlap, they combine to produce magenta.

• Where blue and green lights overlap, they combine to produce cyan.

• Where green and red lights overlap, they combine to produce yellow.

And where all three lights overlap, they combine to produce white.

These three resulting colors--cyan, magenta and yellow--are the three primary colors of pigment. These are the purest colors and cannot be produced by mixing other pigment colors. Using these three colors, you can produce a vast number of other colors. When white or black are added to your colors, the range is even greater.

Look for "Primary Colors Part 2" in the next (October) issue of ARTtalk where you'll find a basic guide for mixing colors using cyan, magenta and yellow as well as creating tones, tints and shades.

To locate retailers who carry Color Wheel Co. products and find answers to Frequently Asked Questions, go to www.colorwheelco.com.

Primary Colors — Part 2
By Bev Harcus and Patricia Jaster

Following is a very basic guide for mixing colors using cyan, magenta and yellow:

Mixing Colors

First, let's take a look at what happens when we overlap the three primary colors of pigment. Using a format similar to Diagram A at www.colorwheelco.com, we can mix "equal" parts of any two of these primary colors to produce an opposite result. Diagram B at www.colorwheelco.com illustrates the results of blending (mixing) equal parts of any two primary colors of pigment. Because pigments reflect and absorb light, their resulting mixtures are not as pure as light. Some pigments tend to be more intense than others, so an "equal" mixture is relative to the intensity of the pigment. This is why a color wheel is very useful as a guide to color matching.

• When magenta and cyan pigments are blended, the resulting mixture is blue.

• When cyan and yellow pigments are blended, the resulting mixture is green.

• When yellow and magenta pigments are blended, the resulting mixture is red.

• When all three colors are blended, the result is a "black" color.

This black is rarely a pure black, as some light is still being reflected. Okay, so now we have our three primary colors. How can we produce so many other colors from just these three? Actually color is quite mathematical. Just as you can add 1 and 1 to make 2, or 0.5 and 0.5 to make 1, you can mix colors in a similar manner. Let's start with yellow and magenta. If you mix these two colors together, you produce red. What would happen if you then mix yellow and red? Here you have twice as much yellow as magenta, and the resulting color is orange. Diagram C at www.colorwheelco.com shows how colors can be incrementally mixed to produce a vast array of "in-between colors."

But what if you want to produce a beautiful, rich brown, a maroon, or a subtle grayish-blue? This is where placing colors around a wheel is an excellent way to illustrate color mixtures. The colors we have looked at so far are produced in a "linear" fashion, by mixing any two colors equally, then varying the amount of each of the two primary colors. If we look at colors arranged in a circle, we will see that colors can also be mixed across the circle. So far, we have mixed only around the outside of the circle.

Creating Tones

"Breaking colors" across the wheel, or creating tones, is achieved by mixing varying amounts of colors that are opposite each other on the color wheel. For instance, if you mix equal parts of red and cyan (opposite colors or complements), the result will be a dark grayish-black color. (Opposite colors neutralize each other.) If you mix a small part of cyan to red, the result will be a red-brown color. If you mix more cyan, the result will be a bit grayer, etc. When creating tones, you are actually lowering the saturation, or intensity, of the original pure colors.

Creating Tints

When you add white to a color, you are creating a tint of that color. The more white you add, the lighter the color becomes.

Creating Shades

When you add black to a color, you are creating a shade of that color. The more black you add, the deeper the color becomes.

Start Mixing

Now you have the basics of mixing colors from the three primary colors--cyan, magenta and yellow. If you have a color wheel, it will be easier to practice mixing, as you can look at the wheel and have an actual color to match. Practice mixing colors around the wheel, and when you are happy with the results, try mixing across the wheel, then creating tints and shades by adding white or black to any of your colors. Happy painting!