Building 3D Models for the Web

Color Basics

Subtractive or Reflective Colors

There are several different models for combining colors. The one that you are probably most familiar with is called subtractive colors or reflective colors. If you mix red and blue oil paints together, you will get purple. In the computer world, printers use subtractive colors. When a color printer places yellow in on paper, it appears yellow to you because when white light, which is composed of all colors, strikes the ink, the ink absorbs all colors except yellow. The yellow light is reflected to your eye. Most colors can be produced by combining cyan, yellow, and magenta. When you mix all three colors together, you get black. Color printers add black black ink as a fourth color, though, because impurities prevent cyan magenta and yellow from producing a good solid black color. This color system is called CYMK for the four colors, Cyan, Yellow, Magenta, and blacK.

Additive or Emittive Colors

Computer screens and other objects that emit light use a different color system, additive colors or emittive colors. The three primary emittive colors are red, green, and blue. This is called the RGB color system. Again, most colors can be generated by combining these three colors. If you combine equal portions of any two primary colors, you get the secondary colors, cyan, yellow, and magenta. Oddly enough, these are the primary colors for the subtractive color system! This is illustrated in the color wheel below.

In VRML, colors are represented in the RGB color system, with values from 0 to 1 for each of the three primary colors. A value of 0 means do not include that color and a value of 1 means include 100% of that color. For example, (1, 0, 0) means all red, but no green or blue. (0, 1, 0) is no red, all green, and no blue. (0.5, 0, 0) is pink, (0, 0, 0) is black, and (1, 1, 1) is white.

Photoshop, a premier 2D graphics program, can use CYMK or RGB color systems, along with some other color systems that we won't be covering. However, Photoshop represents RGB colors as integers between 0 and 255 instead of numbers between 0 and 1. If you want to convert from Photoshop colors to VRML colors, you must divide by 255. For example, the Photshop color (000, 255, 204) corresponds to the VRML color (0, 1, 0.8). Photoshop has a nice color wheel for picking colors. Once you've picked a color, it will show the color's RGB values.

  1. Interactive Color Selector. Click on the Hex menu on this Web page and change Hex to Pct. Then click on a color at the bottom of the screen. The color you selected will be the background color and the RGB colors will be displayed along the left side of the window. These numbers are percentages, so you will need to divide them by 100. For example, the color 80, 0, 45 would be represented in VRML as 0.80, 0, 0.45.
  2. Lynda Weinman's Web-safe color tables
  3. Fay's technical description of vision and perception
  4. Hoffman's brief introduction to additive colors and their use in presentation graphics
  5. Apple's extensive instroduction to color systems and color management

Maintained by H. Edward Donley <hedonley@grove.iup.edu>
Last Modified Monday, 13-Aug-2001 16:53:28 EDT