Color Theory

Regardless of your output goal, you cannot accurately reproduce color without a basic understanding of color theory. Keep in mind that we say basic — color theory is a complex, often confusing topic. The following discussion presents the issues that will help you to understand and effectively use color in design.

In the most basic sense, color is light. Different wavelengths of light are visualized as different colors. The human visual system can detect light waves between 400 and 700 nanometers (nm) in length, which make up the visible spectrum or range of visible colors. Light waves below 400 nm (including ultraviolet) and above 700 (including infrared) are not discernible by the human eye.

Additive Color

The additive color model is based on the idea that all colors can be reproduced by combining pure red, green, and blue light in varying intensities. These three colors are considered the additive primaries, and are the basis of most digital color reproduction (used by televisions, computer monitors, digital cameras, and scanners).

Although usually considered a "color," black is the absence of light (and, therefore, of color). Combining any two additive primaries at full strength produces one of the additive secondaries — red and blue light combine to produce magenta, red and green combine to produce yellow, and blue and green combine to produce cyan. White is the sum of all colors, produced when all three additive primaries are combined at full strength.

Additive color theory is practically applied when a reproduction method uses light to reproduce color. A television screen or computer monitor is black when it is turned off. When the power is turned on, light in the monitor illuminates at different intensities to create the range of colors you see.

Subtractive Color

Printing pigmented inks on a substrate, of course, is a very different method of reproducing color — it does not begin with a black screen, and it does not involve a source of light. Reproducing color on paper requires subtractive color theory, which is essentially the inverse of additive color theory.

Instead of adding red, green, and blue light to create the range of colors, subtractive color begins with a white surface that reflects red, green, and blue light at equal and full strength. To reflect a specific color, a surface must subtract or absorb only certain wavelengths from the white light. To reflect only red, for example, the surface must subtract (or absorb) the green and blue light.

Remember that the additive primary colors (red, green, and blue) combine to create the additive secondaries (cyan, magenta, and yellow). Those additive secondaries are also called the "subtractive primaries," because each subtracts one-third of the light spectrum, and reflects the other two thirds:

Cyan absorbs red light, reflecting only blue and green light.
Magenta absorbs green light, reflecting only red and blue light.
Yellow absorbs blue light, reflecting only red and green light.

A combination of two subtractive primaries, then, absorbs two-thirds of the light spectrum and reflects only one-third. As an example, a combination of yellow and magenta absorbs both blue and green light, reflecting only red.

We mentioned earlier that red and green light combine to make yellow. According to additive color theory, yellow is the result of the absence of blue light. Using subtractive color theory, yellow reflects red and green light and absorbs blue; as a subtractive primary, yellow is sometimes referred to as "minus blue" (RGB - B = Y).

To practically apply subtractive color theory (as in color printing), inks made with cyan, magenta, and yellow pigments are combined to absorb different wavelengths of light. To create the appearance of red, the green and blue light must be subtracted or absorbed, thus reflecting only red. Magenta absorbs green light, and yellow absorbs blue light; combining magenta and yellow inks on white paper reflects only the red light. By combining different amounts of the subtractive primaries, it's possible to produce a large range or gamut of colors.

Understanding Complementary Color

A basic color wheel is helpful to understand the concept of additive and subtractive color theory. As the colors are positioned on a color wheel, red, green, and blue (collectively called the "RGB colors") are directly inverse (opposite) to cyan, magenta, and yellow (called the "CMY colors").

Referencing the color wheel allows us to understand how RGB colors relate to CMY colors. If you center an equilateral triangle over the color wheel, the points of the triangle touch either the RGB primaries or the CMY primaries. Adding together two points of the triangle results in the color between the two points. Red and blue combine to form magenta, yellow and cyan combine to form green, and so on. This is why the two color modes are said to be "directly inverse." Each CMY color is made up of two RGB colors and vice versa.

Opposite colors on the color wheel are called color complements. Using subtractive color theory, a color's complement absorbs or subtracts that color from visible white light. As an example, cyan is opposite red on the color wheel; cyan absorbs red light and reflects green and blue. Because you know green and blue light combine to create cyan, you can begin to understand how the two theories are related.

Obviously, a red apple is not red because only red light is shining. It is red because the surface absorbs green and blue light and reflects red light. Cyan is red's complement - it absorbs red light. Placing a cyan filter over a red apple removes the red color. The same concept applies to items of different colors.

Human Color Perception

The most important thing to remember about color theory is that color is light, and light is color. You can easily prove this by walking through your house at midnight; you will notice (after your shins stop throbbing from bumping into the coffee table) that what little you can see appears as dark shadows.

Without light, you can't see -- and without light, there is no color.

The biology of color vision is the heart of color perception. Because this is not a science book, we present here a very simplified explanation of color vision and human color perception.

Light enters the eye through the lens and is focused on the retina. In the retina, a group of tiny cells called rods and cones (collectively referred to as "photoreceptors") respond to the light; these cells stimulate special nerve cells, which pass on signals to the brain.

Rods are not sensitive to color; they capture lightness information, and work best in low-light conditions. Rods allow you to determine how much light there is, but not the color of the light.

Cones are the color receivers of the human eye. They are concentrated at the center of the retina, where the visual field is most focused. Cones contain a photopigment called "rhodopsin," which stimulates an electrochemical response to light. There are three different types of rhodopsin; one absorbs shorter wavelengths of light, one absorbs medium wavelengths, and one absorbs longer wavelengths.

We perceive specific colors because the pigments in an object's surface absorb different wavelengths of light (called "spectral absorption"), reflecting only the wavelengths that define the object's color (called "spectral reflectance"). As an example, a lemon's surface absorbs blue light, reflecting red and green wavelengths to create the visual appearance of yellow.

The surface characteristics of an object absorb and reflect varying percentages of the different wavelengths. Because white is a combination of all colors, white paper should theoretically reflect equal percentages of all light wavelengths. However, different papers may absorb or reflect varying percentages of some wavelengths, thus defining the paper's apparent color. The paper's color will affect the appearance of ink color printed on that paper.

A spectrophotometer is used to precisely measure the wavelengths that are reflected from an object's surface, whether that object is a natural object, a printed page, or a blank piece of paper.

How Lighting Affects Color

Additive color supposes that the three colors of light -- red, green, and blue -- are added to a black space -- the lack of light -- to create all the colors in the visible spectrum. According to subtractive color theory, cyan, magenta, and yellow pigments subtract the red, green, and blue components of pure white light to create the colors in the visible spectrum. The practical application of these theories, however, is not so simple.

The light source in any particular viewing situation can (sometimes dramatically) affect the perceived color of an object. "White" light is rarely pure white -- each of the three primaries combined at full strength. The color of a specific light source can add a color cast to a design, and can cause the same color to appear different under various lighting conditions (called "metamerism").

The term "color temperature" is used to define the color properties of a light source. As an object is heated it first glows red, then yellow, then white, then blue. Cooler color temperatures, correspondingly, have a yellow cast and the hottest color temperature has a blue cast.

It is interesting to note that physical color temperature is contradictory to human color perception; we perceive yellow hues as "warm" and blues as "cool."

Fluorescent light, commonly used in office settings, ranges from 3000 to 4100K and often has a slight yellow or blue cast. Tungsten lights, which are commonly used in household lighting, have a color temperature around 3000K and a pronounced yellow cast. The graphic-arts industry uses 5000K light in controlled environments -- press rooms, proofing stations, and so on -- to allow production staff to match colors created in the design phase. This high temperature corresponds to white light with equal amounts of red, green, and blue light -- and no cast -- for optimum color viewing conditions.

As a designer, it is equally (if not more) important to consider the lighting conditions in which your final design will be viewed. If your product will be displayed under the fluorescent lights of a grocery store, you need to consider how the colors will look in those lighting conditions instead of in a controlled production environment.

If a light source has an apparent color cast, it means red, green, and blue wavelengths of light are not equal. Yellow light, for example, has stronger components of red and green and a weaker blue component.

Consider what would happen to a blue poster displayed under yellow lighting. The blue poster would be created from inks of cyan (to absorb red light) and magenta (to absorb green light), thus reflecting only blue light wavelengths. The yellow light source, though, would have only a weak blue component. The pigments used to create the blue poster would still absorb the red and green wavelengths from the light; the weaker blue wavelengths would be reflected, but not as brilliantly as if all three wavelengths were equally present.

Such a blue sign displayed in yellow light, then, would appear more grayish-black than blue. Although standardized viewing conditions are essential for matching design colors on a printing press, understanding the practical use and display of your work is essential to creating compelling color design.

Communicating Color

The language of color can be confusing, which makes it extremely difficult to communicate specific color concepts. You can tell someone to use a "nice, dark red," but what exactly is dark? And who decides what's "nice"?

To further confuse matters, different color terms can have similar meanings or a single term can have different meanings. These terms might also have different meanings depending on the speaker. Your clients might say something vague such as, "Make that brighter" when they really want a color to be more saturated. Or you may hear something like, "Make that greener." Unfortunately, we do not have a "Greener" button on most of our equipment, so we need to be able to translate our clients' statements about color into something physically meaningful.

Many vague and technical-sounding terms are mentioned when discussing color. Is hue the same as color? the same as value? the same as tone? What is the difference between lightness and brightness? What is chroma? And where does saturation fit in?

This problem has resulted in several attempts to normalize color communication. A number of color systems have been developed to define color according to specific criteria, including Hue, Saturation, and Brightness (HSB); Hue, Saturation, and Lightness (HSL); Hue, Saturation, and Value (HSV); and Lightness, Chroma, and Hue (LCH). Each of these models or systems plots color on a three-dimensional diagram, based on the elements of human color perception -- hue, colorfulness, and brightness.

Understanding the Terms

Hue is what most people think of as color -- red, green, purple, and so on. Hue is defined according to a color's position on a color wheel, beginning from red (0¡) and traveling counterclockwise around the wheel.

Saturation (also called "intensity") refers to the color's difference from neutral gray. Highly saturated colors are more vivid than those with low saturation. Saturation is plotted on a color-space diagram from the center of the color wheel. Color at the center of the wheel is neutral gray, and has a saturation value of 0; a color at the edge of the wheel has a saturation value of 100, and is the most intense value of the corresponding hue.

If you bisect the color wheel with a straight line, the line makes up a saturation axis for two complementary colors. A color is dulled by the introduction of its complement. Red, for example, is neutralized by the addition of cyan (blue and green). As the two colors mix near the center of the wheel, the result is a neutral gray.

Chroma is similar to saturation, but factors in a reference white. In any viewing situation, colors appear less vivid when the light source dims. The process of chromatic adaptation, however, allows the human visual system to adjust to changes in light and still differentiate colors according to the relative saturation. The white area of a printed page, for example, can serve as a reference point from which to adjust one's perception of other colors. If a particular viewing situation does not have an identifiable white point for reference -- such as dusk in a forest -- then saturation is a better measure of colorfulness than chroma.

Brightness is the amount of light that is reflected. As an element of color reproduction, brightness is typically judged by comparing the color to the lightest nearby object (such as an unprinted area of white paper). It is important to note that there are many different variations of "white" paper, from the pristine coated paper used to print inkjet photos to the off-white newsprint used to print many books and daily papers; these variations affect the relative appearance of color brightness.

Lightness is the amount of white or black added to the pure color. Lightness (also called "luminance" or "value") is the relative brightness based purely on the black-white value of a color. In other words, lightness defines how light or dark a color is without regard to the specific color being described. A lightness of 0 means there is no addition of white or black. Lightness of +100 is pure white; lightness of -100 is pure black.

Output Color Models

Most software applications allow you to choose from built-in color libraries, or to define new colors using several different color models or color spaces. The color model or space defines the structure of the color, or how the color will be created. Two primary color spaces are used to reproduce color -- RGB color space and CMYK color space. Other color spaces or models are used to describe and communicate color, but those models are not "output" models because they do not specifically create the color you see on a monitor or a piece of paper.

RGB Color

The RGB color space is used in any device that reproduces color with light, such as televisions and computer monitors. The RGB color space reproduces the range of color according to additive color theory -- red, green, and blue light are combined in varying intensities to create any color in the visible spectrum. Each color or channel in the RGB output model has 256 possible intensities (0-255).

A number of factors can affect the appearance of color on an RGB output device. The internal mechanics used to create the red, green, and blue channels vary from one device to another. Different types of devices use various technologies, such as cathode ray tubes (CRTs) and light-emitting diodes (LEDs). The accuracy of a device's light source can deteriorate over time. The color of external light -- such as the lamp in your office -- can change the perceived color on the monitor. Because of these and other factors, RGB color is considered to be a device-dependent color model -- the specific output device being used determines the final appearance of the color.

CMYK Color

The CMYK color model, also called "process color," uses subtractive color theory to reproduce the range of printable colors. The process-color model recreates the range of printable colors by overlapping layers of cyan, magenta, yellow, and black inks in varying percentages from 0-100.

Using theoretically pure pigments, a mixture of equal parts of cyan, magenta, and yellow would produce black. Real pigments, however, are not pure; the actual result of mixing these three colors usually appears as a muddy brown.

The fourth color, black (K), is added to the three subtractive primaries to extend the range of printable colors, and to allow much purer blacks to be printed than is possible with only the three primaries. Black is abbreviated as "K" because it is the "key" color to which others are aligned on the printing press. This also avoids confusion with blue in the RGB color model.

Like the RGB model, different factors can affect the appearance of any given CMYK build. The specific pigments used to make the inks, the color of paper on which a job is printed, and the color-reproduction characteristics of the press used can all affect the color that finally appears on the page. Because of this potential for difference, CMYK is also considered a device-dependent model. Color management, which we discuss in Chapter 6, addresses the problems associated with working in device-dependent color models.

Hexachrome Color

Hexachrome (also called "hifi" or "high-fidelity color") is the latest innovation in color printing. Standard printing presses have four printing units, one for each of the four primary CMYK inks; many of the new commercial printing presses, however (especially in the U.S.), have six or more printing units. The Hexachrome system, created by PANTONE, takes advantage of the additional printing units by adding two extra colors -- green and orange -- to the standard CMYK ink set. The green and orange units extend the color gamut so more shades can be reproduced on a traditional printing press.

Special Color Libraries

Special colors, commonly called "spot colors," are those that use a premixed ink to reproduce a specific color with a single ink layer -- they are not built from the standard process inks used in CMYK printing. When you output a job with spot colors, each spot color appears on its own separation.

Spot-color inks are used in two- and three-color documents, and may be added to process-color documents when a special color, such as a corporate color, is needed. In the United States, the most popular collections of spot colors are the PANTONE Matching System (PMS) libraries. TruMatch and Focoltone are also used in the U.S.; Toyo and DICColor (Dainippon Ink & Chemicals) are used primarily in Japan.

Special inks exist because many of the colors cannot be reproduced with process inks (in the CMYK color space), nor can they be accurately represented on a computer monitor (in the RGB color space). Although most graphics applications include on-screen simulations of the most popular special-color libraries, you should look at a swatch book to select a particular color instead of selecting a color directly from the electronic library. Furthermore, if you specify a special color in a document, but then convert it to a CMYK process color, your job probably won't exactly look as you expected.

CIE Lab* Color Space

The problems created by device-dependent color models are obvious: many devices reproduce a given color differently. This issue is made even worse by the fact that color is often converted from one model to another during the design and production processes.

In 1931, the Commission Internationale de l'Eclairage (CIE), an international standards-making body, developed the CIE XYZ color model as the first widely used device-independent color space. The model was modified and renamed CIE L*a*b* in 1976, and is often shortened to simply L*a*b*.

In the L*a*b* model, color is defined numerically on three axes:

L* defines the luminance of a color, expressed as a percentage from 0 to 100.
a* defines the color on the red-green axis, ranging from -128 (green) to +128 (red).
b* defines the color on the yellow-blue axis, ranging from -128 (blue) to +128 (yellow).

The L*a*b* model describes the physical characteristics of a color without considering any specific output device. This helps to eliminate the confusion created by different gamuts and different reproduction characteristics, and allows us to communicate color based solely on numbers. This color space, though not used for the output of color, is used as an intermediate step for converting from one color model to another. Spectrophotometry, defined earlier in this chapter, measures colors in the L*a*b* color space, so they can then be translated to either the RGB or CMY equivalent.

RGB	Used for designing electronic documents such as Web pages or PDF files that will be distributed electronically.
Web-Safe	Used for designing electronic documents; this is an abbreviated version of RGB, which attempts to ensure the accurate reproduction of color from one monitor to another
CMYK	Used for designing commercially printed documents
Hexachrome	Adds green and orange to the CMYK inks to extend the color gamut.
Special Libraries	Used in combination with WMYK to create specific colors outside the CMYK gamut, or as the only colors in a one-,two-,or three-color job.
Lab*	Used for converting images from one color space to another; generally not used to define colors in graphics applications

Understanding Gamut

Different output color models have different ranges or gamuts of possible colors. A normal human visual system is capable of distinguishing approximately 16.7 million different colors. Color reproduction systems, however, are far more limited.

The RGB model, using light as the means to reproduce color, has the largest gamut of the output models. The CMYK gamut is far more limited than the RGB gamut. Many of the brightest and most saturated colors that can be reproduced using light cannot be reproduced using subtractive theory.

The difference in gamut is one of the biggest problems graphic designers face when working with color images. Digital image-capture devices (including scanners and digital cameras) work in RGB space, which, with its larger gamut, can more closely mirror the range of colors in the original scene. Printing, however, requires such images to first be converted or separated into the CMYK color space.

Depending on the images, at least some colors captured with the RGB model likely cannot be reproduced in the more limited gamut of the CMYK color model. These out-of-gamut colors pose a challenge to faithfully reproducing the original image. If the conversion from RGB to CMYK is not carefully controlled, color shift can result in drastic differences between the original and the printed image. Color management (Chapter 6) and color correction (Chapter 7) are both important tools for quality color reproduction.

Conclusion

There is, of course, far more that could be said about color theory; color science can be extremely complex and confusing to all but the devoted color scientist. In your role as a graphic artist, however, you need to understand the basics of color reproduction to address the issues that affect the colors you use. This chapter has examined the theories that underlie the practical application; we will refer to these concepts frequently throughout the rest of this book. Much time and effort is spent choosing just the right color for a job. A clear understanding of color-reproduction theory can help to ensure that the colors you get in the final output are the ones you chose in the development stage.

Glossary

Additive Color Process: The process of mixing red, green, and blue light to achieve a wide range of colors, as on a color television screen.
Black: The absence of color. An ink that absorbs all wavelengths of light.
Brightness: 1. A measure of the amount of light reflected from a surface. 2. A paper property, defined as the percentage reflection of 457-nanometer (nm) radiation. 3. The intensity of a light source. 4. The overall percentage of lightness in an image.
Chroma: The degree of saturation of a surface color in the Munsell color space model.
CIE: Commission Internationale de l'Eclairage. An international group that developed a universal set of color definition standards in 1931.
CMYK: Cyan, Magenta, Yellow, Black. The subtractive primaries, or process colors, used in four-color printing.
Color Gamut: The range of colors that can be formed by all possible combinations of the colorants of a given reproduction system, such as colors that can be displayed on television screens.
Color Model: A system for describing color, such as RGB, HLS, CIELAB, or CMYK.
Color Shift: The result of compressing out-of-gamut colors into colors that can be reproduced with a given model. Color shift can drastically change the appearance of the final output.
Color Space: A three-dimensional coordinate system in which any color can be represented as a point.
Contrast: The relationship and degree of difference between the dark and light areas of an image.
Density: The ability of a material to absorb light. In film, it refers to the opacity of an area of the image. A maximum density of 4.0 refers to solid black. Improper density in film results in washed-out or overly-dark reproduction.
Dynamic Range: The difference between the lightest and darkest area of an image. Also used to describe the range of color capture capability in a scanner or digital camera.
Gamma: A measure of the contrast, or range of tonal variation of the midtones in a photographic image.
Grayscale
: 1. An image composed in grays ranging from black to white, usually using 256 different tones. 2. A tint ramp used to measure and control the accuracy of screen percentages. 3. An accessory used to define neutral density in a photographic image.
Hex Values: Numbers specified in the hexadecimal system, commonly used for specifying colors on Web pages.
Hexachrome: Six-color printing process developed by PANTONE, in which green and orange are added to the process colors to extend the printable gamut. Also called "HiFi."
Highlight: The lightest areas in a photograph or illustration.
HLS: A color model based on three coordinates: hue, lightness (luminance), and saturation.
HSL: A color model that defines color based on its hue, saturation, and luminosity (value), as it is displayed on a video or computer screen.
HSV: A color model based on three coordinates: hue, saturation, and value (or luminance).
Hue: The wavelength of light of a color in its purest state (without adding white or black).
L*a*b*: The lightness, red-green attribute, and yellow-blue attribute in the CIE L*a*b* color space, a three-dimensional color mapping system.
Lightness: The property that distinguishes white from gray or black, and light from dark color tones on a surface.
Luminosity: The amount of light or brightness in an image. Part of the HLS color model.
Metamerism: Phenomenon in which the same color appears differently in different lighting conditions.
Midtones: The tonal range between highlights and shadows. Also called "middletones."
Non-Reproducible Colors: Colors in an original scene or photograph that are impossible to reproduce using process inks. Also called out-of-gamut colors.
Opacity: 1. The degree to which paper will show print through it. 2. The degree to which images or text below one object, whose opacity has been adjusted, are able to show through.
Out-of-Gamut: Color that cannot be reproduced with a specific color model. Many RGB colors fall outside the CMYK gamut.
PANTONE Matching System: PMS. A system for specifying colors by number for both coated and uncoated paper; used by print services and in color desktop publishing to assure uniform color matching.
Primary Colors: Colors that can be used to generate secondary colors. For the additive system (a computer monitor), these colors are red, green, and blue. For the subtractive system (the printing process), these colors are yellow, magenta, and cyan.
Process Colors: The four inks (cyan, magenta, yellow, and black) used in four-color process printing. A printing method in which a full range of colors is reproduced by combining four semi-transparent inks.
RGB: 1. The colors of projected light from a computer monitor that, when combined, simulate a subset of the visual spectrum. 2. The color model of most digital artwork. See also CMYK.
Rich Black: A process color consisting of solid black with one or more layers of cyan, magenta, or yellow. Also called "superblack."
Saturation: The intensity or purity of a color; a color with no saturation is gray.