Color Theory / Color Schemes - Part 1 of Chapter 2 from Web Graphics for Non-Designers (2/6) | WebReference

Color Theory / Color Schemes - Part 1 of Chapter 2 from Web Graphics for Non-Designers (2/6)

To page 1current pageTo page 3To page 4To page 5To page 6
[previous] [next]

Web Graphics for Non-Designers, Chapter 2: Using Color

Color Terms to Know

Hue: A hue is a pure color with no black or white added. It is the feature of a color that allows it to be identified as, say, red or blue:

Pure colors

Intensity: Also known as saturation or chromaticity, intensity describes the identifiable hue component of a color. A blue with RGB (0,0,255) is considered intense (or completely saturated, and high in chromaticity) and 100% saturated. A gray, however, has no identifiable hue, and is termed achromatic with 0% saturation:

Percentages of Intensity: Red

Percentages of Intensity: Green

Shade: A shade is a hue with black added:


Tint: A tint is a hue with white added:


Tone: A tone is a hue with gray added (tending towards neutrality), or a hue with some strength of its complementary color added:


The results of adding a hue to its complement generally appear richer than the addition of straight neutrals:

Adding a hue to its complement

Adding a hue to its complement

RGB and CMYK: RGB and CMYK are color spaces relied upon by designers every day. The RGB space, representing red, green, and blue, will be the most familiar to web developers. Understanding the two, though, is as easy as comprehending the differences. RGB is additive color used by electronic displays (and curiously, the human eye) where red, green, and blue light creates the colors we see on screen. The default black you see on screen is simply a deficiency of all of these colors. Conversely, combining the three gives white.

CMYK, on the other hand, is subtractive and standard in the printing industry. A blank page, for example, is white and reflects all colors. Adding cyan, magenta, and yellow to the page actually subtracts from the light reflected. Combining cyan, magenta, and yellow does not give black, and so black is added independently. It is represented as the letter K.

Due to limitations of printing with ink, the CMYK color space is actually smaller than that of RGB. Photoshop, for example, has the ability to warn you of colors in the RGB space that will not survive a conversion to CMYK. As such, when converting from RGB to CMYK, some colors are lost (you may have seen Photoshop's "out of gamut" warning which is telling you that this is occurring). Nonetheless, for the most part web developers will not need to step outside of RGB, other than to occasionally convert corporate color values, and should not be troubled by this.

Alpha: The term "alpha" refers to a further value within a color definition, and determines transparency. As you may be well aware, a GIF provides support for transparency, but the value at a given pixel must be either fully transparent or opaque. Forward-looking formats such as PNG provide better alpha bearing, but are not as supported by browsers as the GIF and JPEG formats.

To page 1current pageTo page 3To page 4To page 5To page 6
[previous] [next]

Created: December 2, 2002
Revised: December 2, 2002