Light, as you may 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. The
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 gray. (See the color wheels below.)
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.
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. "Forest green" is a tint of green.
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:
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.
What a nice color
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 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.
The Color Wheel
Primaries, Secondaries and Neutrals
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.
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).
Lighting the way
When humans started fooling around with light, they discovered that if they
projected colored light it behaved differently than reflected light. In the case of light, 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
When red, green and blue light 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.
You might also notice that the combinations of red, blue and green don't make the same colors as you might expect them to based on the color wheel. "Red and green make yellow?" you ask. So they tell me. It's not very intuitive given our understanding paint mixing and color wheels.
CMYK, or how printers do it
To commercial printers, artists, designers and soon to you, intrepid interpreters, color is ink. Unfortunately for our brains, we have to leap between RGB representation on a computer monitor to a CMYK printed page. Never fear. Explanation is on the way.
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, Yellow and
Black or
CMYK (K represents black). There are special instances where additional colors are added during printing, but that's not for us to worry about.
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
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.
It all adds -- uh, I mean subtracts -- up
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, 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 (but don't tell your printer that or he'll give you a really funny look and think you're sniffing the ink). Dark colors (created by densely built-up 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"
Color gamuts (Photoshop)‡
A gamut is the range of colors that a color system can display or print. The spectrum of colors seen by the human eye is wider than the gamut available in any color model.
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 a CMYK gamut. (See
Identifying out-of-gamut colors (Photoshop).)
 |
Broken link :^( Looking for another version of this graph
Color gamuts: A. A Lab color gamut B. An RGB color gamut C. A CMYK color gamut
|
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.
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.
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 and printing unique to each medium.
Left: Grayscale image, halftone screen with black ink. Light areas have smaller dots, dark areas have larger dots. Right: 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 (more correctly, black).
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.
*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
What would you say about the color scheme of this logo? (What relationships do these colors have to each other? Cool? Warm? Complementary? Analogous?)
