EMP253: color

Light, as some of you science folks probably already know, is a pretty tricky thing. It is often described as waves or particles or radiation or energy. We see it reflected off the surfaces of objects or projected from computer monitors. Light is received by our optic nerves and transmitted to the brain which interprets it. Different wavelengths of visible light are interpreted as different colors. While physics or physiology are important, in this class we're mostly concerned with how we interpret and use color in our layouts and designs.

The visible spectrum (above) can be visualized as a rainbow: red, orange, yellow, green, blue, violet. NASA image, Wikimedia Commons

We see color that is reflected from an object. If all colors of the visible spectrum are reflected, we perceive the object as white (all the colors of the spectrum combine to make white light). If only the red light waves are reflected, we perceive the object to be red. If little or no light is reflected, we perceive the object to be black. Reflected light is described as subtractive (if you mix colors together, color gets absorbed, subtracted or taken away.) Remember mixing all your finger paints to make that yukky brown? That's subtractive.

Subtractive Color Model (RYB)

Stated above, but we'll repeat here for emphasis: We see color that is reflected from an object. If all colors of the visible spectrum are reflected, we perceive the object as white (all the colors of the spectrum combine to make white light). If only the red light waves are reflected, we perceive the object to be red. If little or no light is reflected, we perceive the object to be black. Reflected light is described as subtractive (if you mix colors together, color gets absorbed, subtracted or taken away.) Remember mixing all your finger paints to make that yukky brown? That's subtractive.

The Visible Spectrum and a simple RYB (Red-Yellow-Blue) Color Wheel

Another RYB Color Wheel,
"Primary, secondary, and tertiary colors of the RYB color model" —Wikipedia

See more color wheels here.

Color Relationships (RYB)

Primary colors are red, blue and yellow. Think of them as prime numbers. They are as simple as it gets. The secondary colors are a mixture of two primary colors: red + blue = violet. Equal mixtures of primaries (or secondaries) makes a neutral(ish) gray.

RYB Color Model -- Primaries, Secondaries and Neutral

Now refer back to the color wheel. Colors opposite each other on the color wheel are considered to be complementary*. They have nothing in common. For instance red is complementary to green, green is made of the primary colors blue and yellow which have nothing in common with red. Complementary colors seem to vibrate when placed next to each other and have an energizing and sometimes shocking effect on a color scheme.

Colors near each other (adjacent) on the color wheel are called analogous. They are harmonious color combinations because they are similar or have something in common. For example, violet, blue and green are analogous because they have blue in common.

Another way to think of color is in terms of temperature. Warm colors are red, orange and yellow. Cool colors are green, blue and violet.

Another word for color is hue. If a color is fully saturated, it is at its most intense. If it is desaturated, it is less intense. "Baby blue" is less saturated than "cobalt blue."

A tint is a color that is a color that has been lightened, as if it had white added to it. Pink is a tint of red. A shade is a color that is darkened. "Navy blue" is a shade of blue.

White and black are neutrals. White reflects all the wavelengths of light, and black absorbs all. Grays can be neutral if composed of equal amounts of color. Sometimes grays can lean toward a color, and be considered warm or cool accordingly (blue-gray, for example.)

Here is Photoshop's color picker with examples of saturated and desaturated colors, tints, shades and neutrals:

Photoshop's Color Picker

Wikipedia explains this better than I can:

In colorimetry and color theory, colorfulness, chroma, and saturation are related but distinct concepts referring to the perceived intensity of a specific color. Colorfulness is the difference between a color against gray. Chroma is the difference of a color against the brightness of another color which appears white under similar viewing conditions. Saturation is the difference of a color against its own brightness. …

A highly colorful stimulus is vivid and intense, while a less colorful stimulus appears more muted, closer to gray. With no colorfulness at all, a color is a “neutral” gray (an image with no colorfulness in any of its colors is called grayscale). With three attributes—colorfulness (or chroma or saturation), lightness (or brightness), and hue—any color can be described.

Saturation is one of three coordinates in the HSL and HSV color spaces. Note that virtually all computer software implementing these spaces use a very rough approximation to calculate the value they call "saturation," such as the formula described for HSV and this value has little, if anything, to do with the description shown here.

The saturation of a color is determined by a combination of light intensity and how much it is distributed across the spectrum of different wavelengths. The purest color is achieved by using just one wavelength at a high intensity, such as in laser light. If the intensity drops, so does the saturation. To desaturate a color in a subtractive system (such as watercolor), you can add white, black, gray, or the hue's complement.

Colors also have cultural, social and emotional baggage. There was a time when you would seldom see anything but red, white and blue used in political advertising because of the patriotic sentiment that the designers are trying to evoke. Likewise, blue is an unappetizing color so it might be used judiciously in food packaging. On the other hand, reds, yellow, browns and greens — colors which we readily associate with edible items — are frequently employed in food advertising and packaging. Think about that the next time you have a blue M&M or sports drink.

Colors are subject to trends, too. Every so often fashionistas elevate certain colors while others fall out of favor. I wouldn't expect to see a trendy new house appointed with avocado green carpet and harvest gold appliances like those of my 1970s childhood.

Additive Color Model (RGB)

Many of us -- artists, painters, commercial printers, designers of printed products, and so forth -- work with the subtractive (RYB) color model described above. As users of computers and mobile devices, we need to grasp RGB representation (in the additive color model) and learn to understand its relationship to RYB.
If we project colored light, we will discover that it behaves differently than reflected light (paint, for instance). In this case, the prime units of color are red, green and blue. Your TV screen and computer monitor use this scheme to represent colors and thus pictures. Grab a magnifying glass and put it up to the monitor and you'll see. (Really! It's cool!)

This model of representing color is known as RGB.

RGB Color Model -- Primaries, Secondaries and Neutral

When red, green and blue light (RGB) is mixed equally at full intensity it creates white light. This is known as additive color. By adding the red, green and blue light together you create white light, the full visible spectrum. On the other hand, if you take light away, it becomes black --- the absence of light.

Notice that the combinations of red, blue and green don't make the same colors as you might expect them to based on the subtractive (RYB) color wheel. Red and green light mixes to make yellow light.

Printing Color Images (RYB)

Full color images are printed by what's known as four color process (or process color). Generally, just four colors of ink are used to approximate the colors we see in the visible spectrum: Cyan (blue), Magenta (red), Yellow and Black or CMYK (K = "key" or black). There are special instances where additional colors can be added during printing.

A full color image, such as the one at right is separated into the four colors below for process printing. These separations are made into negatives which in turn are used to make printing plates. Each of the plates is used to print its corresponding color, and the colors are registered or aligned so that the colors match up and create the "full color" image we see on the page.

CMYK Composite image

Below is a representation of each separation of the full color picture above. As each ink is printed on the page, the colors combine to create the full color image. Think back to the color wheel and the primary colors... blue...red...yellow.... Since there is a lot of green in the foliage, it's natural to see lots of yellow and blue in that area. But what you might find enlightening is the amount of magenta and black there too. These colors help make shadows and highlights and give depth and richness to the color of the foliage.

CMYK Separations: Cyan, Magenta, Yellow, Black

Process printing inks are semi-transparent which means that they allow some of the other inks to show through. Inks are also printed as halftones (see below), so that some of the paper will show through too.

And even though we talk about the color building up, keep in mind that it's really "subtracting" light. Dark colors (created by densely printed inks) absorb more light rays than they reflect and thus subtract light that your eyes would otherwise see.

How process color builds up to appear to be "full color"

Halftones**

Halftone screens consist of dots that control how much ink is deposited at a specific location. Varying their size and density creates the illusion of variations of gray or continuous color. For a process color image (four color or full color), four halftone screens are used: cyan, magenta, yellow, and black-one for each ink used in the printing process.

Three examples of color halftoning with CMYK separations.
From left to right: The cyan separation, the magenta separation, the yellow separation, the black separation, the combined halftone pattern and finally how the human eye would observe the combined halftone pattern from a sufficient distance. (Wikipedia)

In traditional print production, a halftone is produced by placing a halftone screen between a piece of film and the image and then exposing the film. Digital halftoning uses a raster image or bitmap within which each pixel which may be on or off, ink or no ink.

Get out that magnifying glass again and take a close look at newspaper and magazine photos to see the tiny dots which create the "photo." Note also how high quality glossy magazines use a finer screen (dots) and newspapers use a coarse screen. This is because of the type of paper, printing processes and machinery unique to each medium.

Grayscale image, halftone screen with black ink.
Light areas have smaller dots, dark areas have larger dots.

CMYK color image, halftone screens with process ink
at different screen angles; correctly registered dots form rosettes.

Spot Color (Pantone or PMS Colors)

Sometimes you might want to just use a single color of ink, or perhaps black plus one color called a spot color. You'll be specifying a Pantone or PMS (Print Matching System) color. Printers have books of color swatches from which to select these colors. These colors come either ready-mixed or are custom-mixed by the printer.

Pantone colors libraries are available in InDesign, Illustrator and Photoshop. These libraries, as well as specific CMYK colors, allow designers and printers to speak the same language because what is baby blue to you might be a horse of a different color to your printer.

Models vs Modes of Color

Until now we've been discussing color models. Models are methods of defining color, whereas modes are particular to Photoshop, specifically, how the application defines color. Here is a list of Photoshop's modes:

Bitmap
Grayscale
Duotone
Indexed Color
RGB Color
CMYK Color
Lab Color
Multichannel

In the case of RGB and CMYK, the color models share the same name as the color modes. In all other cases, the modes are specific to Photoshop. In our work, we will concern ourselves with only these modes:

Bitmap - uses only two colors, black and white, to represent images. (Note: This is not the bitmap file format ".bmp" you might see generated from some PC applications.)
Grayscale - uses 256 shades of gray.
RGB - based on the primary colors of red, green and blue. This is how your monitor displays colors and how scanners scan images. After a picture is scanned, it needs to be converted to CMYK for printing.
CMYK - based on the Cyan, Magenta, Yellow and Black process printing model. This is the color mode used for printing color images.

InDesign and Illustrator create images in either RGB or CMYK modes.

Color gamuts (Photoshop)‡

A gamut is the range of colors that a color system can display or print.

The term gamut was adopted from the field of music, where it means the set of pitches of which musical melodies are composed ….

In color theory, the gamut of a device or process is that portion of the color space that can be represented, or reproduced. Generally, the color gamut is specified in the hue–saturation plane, as a system can usually produce colors over a wide intensity range within its color gamut; for a subtractive color system (such as used in printing), the range of intensity available in the system is for the most part meaningless without considering system-specific properties (such as the illumination of the ink).

When certain colors cannot be expressed within a particular color model, those colors are said to be out of gamut. For example, while pure red can be expressed in the RGB color space, it cannot be expressed in the CMYK color space; pure red is out of gamut in the CMYK color space.

A device that is able to reproduce the entire visible color space is an unrealized goal within the engineering of color displays and printing processes. While modern techniques allow increasingly good approximations, the complexity of these systems often makes them impractical.

While processing a digital image, the most convenient color model used is the RGB model. Printing the image requires transforming the image from the original RGB color space to the printer's CMYK color space. During this process, the colors from the RGB which are out of gamut must be somehow converted to approximate values within the CMYK space gamut. Simply trimming only the colors which are out of gamut to the closest colors in the destination space would burn the image. There are several algorithms approximating this transformation, but none of them can be truly perfect, since those colors are simply out of the target device's capabilities. This is why identifying the colors in an image which are out of gamut in the target color space as soon as possible during processing is critical for the quality of the final product.

— http://en.wikipedia.org/wiki/Gamut

The visible spectrum of colors (those able to be seen by the human eye) is wider than the gamut available in any color model:

Color gamuts: A. Lab color gamut
B. RGB color gamut C. CMYK color gamut

Among the color models used in Photoshop, Lab has the largest gamut, encompassing all colors in the RGB and CMYK gamuts. Typically, RGB gamuts contain the subset of these colors that can be viewed on a computer or television monitor (which emits red, green, and blue light). Therefore, some colors, such as pure cyan or pure yellow, can't be displayed accurately on a monitor.

CMYK gamuts are smaller, consisting only of colors that can be printed using process-color inks. When colors that cannot be printed are displayed on-screen, they are referred to as out-of-gamut colors — that is, outside of the CMYK gamut. (See Identifying out-of-gamut colors, Photoshop.)

A comparison of RGB and CMYK color spaces. The image demonstrates the difference between the RGB and CMYK color gamuts. The CMYK color gamut is much smaller than the RGB color gamut, thus the CMYK colors look muted. If you were to print the image on a CMYK device (an offset press or maybe even a ink jet printer) the two sides would likely look much more similar, since the combination of cyan, yellow, magenta and black cannot reproduce the range (gamut) of color that a computer monitor displays. This is a constant issue for those who work in print production. Clients produce bright and colorful images on their computers and are disappointed to see them look muted in print. (An exception is photo processing. In photo processing, like snapshots or 8x10 glossies, most of the RGB gamut is reproduced.)
— http://en.wikipedia.org

:: :: ::

*com·ple·men·ta·ry
Pronunciation: "käm-pl&-'men-t(&-)rE
Function: adjective
1 : relating to or constituting one of a pair of contrasting colors that produce a neutral color when combined in suitable proportions
2 : serving to fill out or complete
3 : mutually supplying each other's lack
4 : being complements of each other
5 : characterized by the capacity for precise pairing of purine and pyrimidine bases between strands of DNA and sometimes RNA such that the structure of one strand determines the other
- com·ple·men·ta·ri·ly /-'men-t(&-)r&-lE, -(")men-'ter-&-lE/ adverb
- com·ple·men·ta·ri·ness /-'men-t(&-)rE-n&s/ noun
- complementary noun

com·pli·men·ta·ry
Pronunciation: "käm-pl&-'men-t(&-)rE
Function: adjective
1 a : expressing or containing a compliment b : FAVORABLE
2 : given free as a courtesy or favor
- com·pli·men·ta·ri·ly /-'men-t(&-)r&-lE, -(")men-'ter-&-lE/ adverb

source: http://m-w.com

** Adapted from Adobe Photoshop Help.

‡ Gamut adapted from Adobe Photoshop 7.0 Help

More about Color on Wikipedia (try to not get lost)