Home  :: Contact Us   :: Color Wheels  :: Magic Palette Color Mixing Guides  :: ViewCatcher  :: Miracle Sponges  :: Color Tools
 

  Working with Color

 

Visible light comprises a very small part of the electromagnetic spectrum. Within this small band lie all the colors we are capable of perceiving. Light can be broken down into three primary colors: red, green and blue. These colors cannot be created by mixing other colors of light. From the combinations of red, green and blue light come all other colors of visible light.

The red, green and blue colors of light are called additive color, because when they are added together, they form white light.

When sunlight falls on a colored object, some of the sunís wavelengths are absorbed (or cancelled out), and others reflected, the result being that only those reflected colors are visible. On a yellow ball, for example, all the short (blue) wavelengths are absorbed and the long (red) and middle (green) wavelengths are reflected. This results in the color yellow.

Colors can also be painted on objects, or printed using printing inks. Paints and inks are based on subtractive colors, cyan, yellow and magenta, which are actually equal mixtures of any two of the primary colors of light. For instance, cyan consists of equal parts of blue and green. When light shines on a cyan object, the blue and green wavelengths are reflected. The red wavelengths are absorbed. Similarly, yellow consists of red and green light; magenta consists of red and blue light.

Cyan, yellow and magenta are called subtractive primaries (these colors cannot be created by other pigment colors) because when they are added together they subtract light, and form black (theoretically. In reality, pigments are not pure and so they actually produce a dark muddy brown).

RGB:

Color monitors work by combining percentages of red, green and blue to create the appearance of millions of other colors. In the RGB system, the red, green and blue components of each pixel (picture element) are assigned a number between 0 and 255.

BIT DEPTH:

Bit depth is important in understanding web graphics. Bit depth refers to the number of colors an image can display, or the number of colors a computer monitor can display. Bit depth is calculated by figuring that 1-bit equals two colors (e.g. black or white, on or off). Multiply by 2 to arrive at each higher bit depth.

The number of colors in a particular bit depth is arrived at by the power of 2, for instance 32 bit color is 2 to the 32nd power, or 16 million colors. 8 bit is 2 to the 8th power (2x2x2x2x2x2x2x2).

Most web designers have monitors capable of displaying millions of color (24 bit), but the average computer user will likely have a monitor capable of viewing only 256 colors (8 bit).

HTML COLOR:

Using color on the web becomes a little more complex than using color for normal artwork. HTML 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 1st generation programming, Assembly language, or machine language). Here is a breakdown of base 16 math compared to what we are more accustomed to as base 10 math:

 Base 10:  0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
 Base 16:  0 1 2 3 4 5 6 7 8 9 A B C D E F

Base 16 math is also called Hexadecimal. All colors used in HTML programming are based on hexadecimal codes.

WEB-SAFE COLORS:

To further complicate matters, not all colors are safe for viewing 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. These vary across platforms, or in other words, each platform uses different colors for its system. This now leaves us with 256-40=216 colors that can be viewed similarly on any platform.

A web-safe palette has been constructed that delineates these 216 colors, and shows how the codes work. Basically, the web-safe colors are a combination of the following colors:

 
 Hexadecimal   RGB 
00 0
33 51
66 102
99 153
CC 204
FF 255
 

Any color mixture consisting of these components should be "safe" to use in web graphics.

THE WEB WHEEL

The Web Wheel shows all 216 web-safe colors, and has the RGB values and Hexadecimal codes printed on each color. This makes it fairly easy to locate a color, and use its hexadecimal code in your graphic.

You can also use the wheel to choose color schemes, or colors that work well together. Say, for instance, that you want to make a web site that consists of all "blue" colors. Turn the wheel (side A) so that the blue colors are visible, and then choose the desired hex codes to input into your layout. The following is a breakdown of how you can find color schemes using the Web Wheel.

Analogous colors

Side B of the wheel gives you a hint as to what analogous colors are. These are combinations of 2 or more colors that lie side by side on the color wheel. Turn the top wheel so that the Analogous colors slot encloses three full colors. These colors can be used together in a design to a) give the effect of a gradient, or b) to blend nicely together. Analogous color schemes create a "soft", calm feeling, as there are no jarring differences in color.

Triads

Triads comprise one of the most basic of color schemes. RGB and CMY are triad color schemes. Triad colors are a set of three colors that are equidistant on the color wheel. Any colors that are visible in the triad windows (whether they line up precisely or not) can be used as a basic color combination.

Outer RGB bands

Still on side B, locate the band of red, green and blue surrounding the outside of the wheel. These colors are displayed in increasing and decreasing quantities, showing how much of that particular color is used in the coded colors underlying it. For instance, the Green band shows full green over the green swatch (00FF00). The hex codes for green are defined as follows: 00=0 red; FF=255 green; 00=0 blue. Notice that there are two alphanumeric characters for each color. In between the green and red, we have a muted yellowish-green color (CCFF00, or 204 red, 255 green and 0 blue). This shows that there is almost as much red as green in this color, and it contains no blue. The color next to it is yellow, showing equal amounts of green and red.

You may notice that the colors on side B appear brighter than those on side A. Side B colors contain mixtures of only two colors each. Look at all the color codes on side B. You will notice that in the RGB values, at least one of the colors on each swatch contains 000, or no color. These colors are therefore a bit more pure than the colors on side A.

Value Scale

On side A of the wheel, a value scale is placed on the top wheel component. This can be used as a reference, to judge how bright or dark your chosen colors are. When creating web graphics, you want to be sure that there is enough of a value change between text and the background. This is very important, as text is extremely hard to read when its value is similar to the background color. You can place text on a background with similar colors (hues), but the text will not be easy to read unless the values differ greatly.

Complements

These areas show colors that lie opposite to each other on the color wheel.

Complementary (opposite) colors show the mathematical beauty and perfection of the color wheel. I described earlier how light is reflected off, or absorbed into, an object, thus defining that objectís color.

Colors always absorb the color opposite them on the color wheel. For instance, cyan is opposite, and thus a complement of, red. Cyan reflects blue and green light, and absorbs red light.

When two complementary colors are mixed in equal amounts, they produce mid-gray. An additive primary (red, green or blue) always opposes a subtractive primary (cyan, magenta, yellow).

Complementary contrast (two complementary colors used in a single image) is used frequently in graphic design, especially in advertising. These colors, when placed together, create an intensity that draws the viewer to them. For instance, blue and yellow (complements) are very dynamic together. Not only are they complements, but yellow is the lightest color in the color wheel, and blue is the darkest. Blue and yellow are used a great deal in advertising, because of their high visibility.

Back to all Color Theory resources

 
 


Home | Color Wheels | Magic Palette™ Color Guides | ViewCatcher™ | Miracle Sponges | Color Tools
Site Map | Price List | Retailers | Support | Product Images | Color Theory | Links | Contact Us

 

Color Wheel products are sold in the following locations:
Addison TX, Albuquerque NM, Allentown PA, Allston MA, Altoona PA, Ardmore PA, Arlington TX, Ashville NC, Astoria OR, Atlanta GA, Austin TX, Avon MA, Azusa CA, Baltimore MD, Barboursville WV, Beaverton OR, Bellerose NY, Bellingham MA, Bellvue WA, Bensalem PA, Berkeley CA, Bethany OK, Bethesda MD, Birmingham AL, Blacksburg VA, Blackwood NJ, Bonney Lake WA, Boone NC, Boston MA, Boulder CO, Branson MO, Bricktown NJ, Brisbane CA, Brockton MA, Bronx NY, Brooklyn NY, Broomall PA, Brunswick ME, Calumet City IL, Cambridge, MA, Campbell CA, Canton OH, Carle Place NY, Carolina PR, Cary NC, Casper WY, Cedar Falls IA, Centerville UT, Centerville OH, Charlotte NC, Charlottesville VA, Chicago IL, Chula Vista CA, Cincinnati OH, Clarkburg WV, Clay NY, Cleveland OH, Cleveland Heights OH, Clifton NJ, Clifton Park NY, Clovis CA, Cody WY, Colorado Springs CO, Columbia SC, Columbus OH, Concord CA, Concord NC, Coos Bat OR, Corvallis OR, D+San Rafael CA, Dallas TX, Damariscotta ME, Danvers MA, Dearborn MI, Denver CO, Deptford NJ, Des Plaines IL, Desert Hots Springs CA, Detroit MI, Dickson City PA, Dover DE, Downers Grove IL, Downingtown PA, East Brunswick NJ, Edina MN, Edmond OK, Egg Harbor Twp. NJ, Elgin IL, Ellsworth WI, Englewood CO, Erie PA, Eugene OR, Eureka Springs AR, Evanston IL, Evansville IN, Everett WA, Excelsior MN, Fairfax VA, Fairfield CT, Falls Church VA, Farmington IL, Fayetteville NC, Fort Washington MD, Fort Wayne IN, Framingham MA, Frederick MD, Freehold NJ, Frenchtown NJ, Ft. Collins CO, Ft. Lauderdale FL, Ft. Wayne IN, Ft. Worth TX, Galesburg IL, Georgetown TX, Glen Burnie MD, Glendale AZ, Glendale CA, Glendora CA, Glenview IL, Gold Beach OR, Grand Rapids MI, Greenville SC, Grosse Point Woods MI, Grove City MN, Hacienda Heights CA, Hagerstown MD, Hamilton Township NJ, Hampton VA, Hanover PA, Harrisburg PA, Hartford CT, Henderson NC, Henderson NV, Hickory NC, Hilliard OH, Holyoke MA, Houston TX, Hyannis MA, Indianapolis IN, Iowa City IA, Irvine CA, Ithaca NY, Jackson Heights NY, Jacksonville FL, Jenkintown PA, Jim Thorpe PA, Jupiter FL, Kalamazoo MI, Kansas City MO, Kent WA, Kingston NY, Knoxville TN, Lake Placid NY, Lancaster PA, Langhorne PA, Lansing MI, LaPorte CO, Las Cruces NM, Las Vegas NV, Latham NY, Lawrenceville, NJ, Lewis Center OH, Linden NJ, Livonia MI, Lombard IL, Longmont CO, Los Angeles CA, Los Lunas NM, Louisville KY, Loveland CO, Lubbock TX, Madison Heights MI, Manassas VA, Manchester CT, Medford OR, Medford MA, Melbourne FL, Melville NY, Merrillville IN, Mesquite TX, Miami FL, Middletown NY, Midland MI, Milwaukee WI, Minneapolis MN, Mishawaka IN, Monroe WA, Montgomeryville AL, Montgomeryville PA, Montpelier VT, Morehead City NC, Mt. Laurel NJ, Mt. Vernon WA, N. Dartmouth MA, Nanuet NY, Nashua NH, Nashville TN, New Albany IN, New Haven CT, New London CT, New Orleans LA, New York NY, Newtown PA, North Charleston SC, North Miami Beach FL, Norwalk CT, Nottingham MD, Oak Park IL, Oakland CA, Omaha NE, Onancock VA, Oneonta NY, Orange CT, Orland Park IL, Orlando FL, Overland Park KS, Owings Mills MD, Ozone Park NY, Palm Desert CA, Palo Alto CA, Panchatoula LA, Parsippany NJ, Pasadena CA, Pennsdale PA, Pensacola FL, Philadelphia PA, Philomath OR, Phoenix AZ, Phoenix OR, Pinebrook NJ, Pittsburgh PA, Pittsburght PA, Pittsfield MA, Plainsville MA, Plainville CT, Plano TX, Plymouth MA, Pompton Plains NJ, Port Chester NY, Port Townsend WA, Portland OR, Prescott AZ, Providence RI, Provo UT, Punta Gorda FL, Quincy CA, Raleigh NC, Reno NV, Reseda CA, Richardson TX, Richmond VA, Rockville MD, Roseville MN, Roswell GA, Royal Oak MI, Sacramento CA, Salem OR, Salt Lake City UT, San Antonia TX, San Antonio TX, San Clemente CA, San Diego CA, San Francisco CA, San Gabriel CA, San Jose CA, San Juan PR, San Rafael CA, Sandy UT, Santa Cruz CA, Santa Fe NM, Santa Rosa CA, Saratoga Springs NY, Savannah GA, Schaumburg IL, Scottsdale AZ, Seattle WA, Sharonville OH, Shillington PA, Shrewsbury NJ, Sidney IL, Silver Springs MD, Sonoma CA, South Portland ME, Spokane WA, Springfield MO, St. Augustine FL, St. Louis MO, St. Paul MN, Strongsville OH, Syracuse NY, Tallahassee FL, Tampa FL, Taos NM, Tempe AZ, Thousand Oaks CA, Toms River NJ, Torrance CA, Towson MD, Tucson AZ, Union City NJ, Utica NY, Valley Village CA, Vestal NY, Virginia Beach VA, Walnut CA, Wappingers Falls NY, Warwick RI, Waseca MN, Washington DC, Watchung NJ, Waupaca WI, Wenatchee WA, West Orange NJ, West Palm Beach FL, Westboro MA, Westminster CO, Westminster CA, Wheaton IL, White Plains NY, Whitehall PA, Williston VT, Wilmington DE, Wilmington NC, Winston Salem NC, Woburn MA, Yorba Linda CA, Yorktown Heights NY, Yucaipa CA

The Color Wheel Company