Chapter 3 — Digital Image Basics
Tri-Chromatic Vision
The digital camera you take photographs with and the computer monitor you're currently looking at both create colors by combining various amounts of pure red, pure green and pure blue. These are called the additive primaries of tri-chromatic vision. We make our digital photography gear work this way because it is how our eyes work. In the central part of the retina we have three types of color-receptive cells (called "cone cells"): One sensitive to red, one sensitive to green and one sensitive to blue.
Visible light is electromagnetic radiation between the wavelengths of 400 nanometers (nm) for violet and 700 nm for red light. Rather than try to work out the wavelength (and corresponding color) directly our eyes just compare how any given light source stimulates each kind of cell. A beam of light of 580 nm wavelength will trigger the Red cells a lot, the green cells moderately and the blue cells not at all. "Ah-ha!" says our brain, "this is yellow!".
This interactive Shockwave tool shows approximately how this works. Click on the arrow at the left edge of the frame and drag it along the horizontal axis to simulate the look of various wavelengths. The graphic will show the wavelength of light at the bottom and the rough color it corresponds to at the top. The curves represent the relative sensitivity of the red, green and blue cells in your eyes.
 |
Color and Computers
Most computers today work with what's called either 8-bit color or 24-bit color. Computers monitors are all RGB deviecs; that is, they create colors by combining Red, Green and Blue values in varying proportions, using 8 bits per color. 8 bits x 3 colors = 24 bits total. This is why, confusingly, "24-bit color" and "8-bit color" are sometimes used synonymously.
To make matters even murkier, GIF images and PNG-8 images use 8 bits total for all three colors, so they're "8-bit images" but not "8-bit color". Usually, "8-bit" refers to 8 bits per color but it's best to ask the person who's specifying what precisely they mean. If there's any doubt, go with 8-bit color (a 24-bit image): It's relatively easy to convert a 24-bit image into an 8-bit image but virtually impossible to go the other way.
But for the most part, the images (and colors) we work with are going to be in 24-bit format (8-bit color) so any color value you use is represented by 24 ones and zeros like this, for example:
111110010010001000100111
With a string of 24 ones and zeros there are 16.7 million combinations possible (224 = 16.7 million), so there are 16.7 million colors we can represent this way. But it is tad inconvenient, don't you think? To make it a little easier to cope with, the 24-bit value can be broken down into three chunks of 8 bits:
11111001 00100010 00100111
The first 8 bits (11111001) represent the red value; there are 256 possibilities. The second 8 bits are for green, and the third 8 bits are blue. There are 16.7 million possible combinations.
Hexadecimal Color for the Web
That string of ones and zeros in the previous section describes the color R249/G34/B39. This is because the binary number 11111001 — the first 8 bits — equals 249 in decimal;
00100010 — the second 8 bits — equals 34 in decimal; and 00100111 — the third 8 bits — equals 39 in decimal.
Binary notation is clumsy for humans to use and decimal notation is impractical for computers to use, but there's a compromise that both can adapt to. It's called hexadecimal, a base-16 number system. It uses the digits 0-9 plus the letters a-f to provide 16 possible values per "digit". Hexadecimal — usually refered to as "hex" — is commonly used in some computer languages, including HTML, the markup language used to create web pages.
| Decimal | Binary | Hex |
|---|---|---|
| 0 | 0000 | 0 |
| 1 | 0001 | 1 |
| 2 | 0010 | 2 |
| 3 | 0011 | 3 |
| 4 | 0100 | 4 |
| 5 | 0101 | 5 |
| 6 | 0110 | 6 |
| 7 | 0111 | 7 |
| 8 | 1000 | 8 |
| 9 | 1001 | 9 |
| 10 | 1010 | a |
| 11 | 1011 | b |
| 12 | 1100 | c |
| 13 | 1101 | d |
| 14 | 1110 | e |
| 15 | 1111 | f |
The first 8 characters of our binary monstrosity above are 11111001.
Or 1111 — which is hex "f"
and 1001 — which is hex "9".
So binary 11111001 is hex f9.
The Adobe Color Picker in Photoshop lets you specify RGB colors in decimal or hex values; hexadecimal is shown directly below the RGB boxes. You'll see from the illustration above that R249/G34/B39 works out to be f9 22 27 in hex. If you type in hexadecimal values in the hex box Photoshop will automatically show the equivalent RGB values above, and vice-versa. Convenient, eh?
When you're working with web designers they'll typically express their color requirements in hex because this is how they have to write their code in HTML (as well as CSS and JavaScript). And they'll expect you to tell them what colors you're using in hex. As long as you know how to use the Color Picker you should be able to deal with this without any problem.
Another good use of hexadecimal color notation is when you're copying a color value from one dialog box to another in Photoshop or between Photoshop and another application. Instead of copying the values "249", "34" and "39" in three steps you can simply copy and paste the hexadecimal "f92227" in one go. Done!
Remember: The hexadecimal RGB box at the bottom of the Polor Picker doesn't represent a different color modeling system (like HSB, Lab and CMYK) — it's exactly the same as the RGB values above it, just written in a form friendly to web designers.