Color Coding and the RGB Color Space
Color Coding
What's that, "Color Coding"? Why do colors have to be coded? The coding refers to numbering. Numbering is necessary because it's the only way a computer is able to store a color. Computer? Yes, we are talking about digital photographs only.
A digital image, as it comes out of a digital camera or a scanner, can be stored on the hard disk of your computer, processed, enhanced, retouched for whatever reason, and sent to a printer.
And here is the point: a computer cannot store colors the way we see them. A color is a property of light, a wavelength, or a mix of wavelengths. Or even better: a color is a perception, something that only exists in humans’ minds. We cannot store light waves on a computer's hard disk, let alone a human perception. A computer needs numbers or it cannot store, process and show any image.
A digital photograph consists of pixels, a pixel being a colored dot, the smallest element of the image. Each pixel has one and only one color. That may be a real color, but it may also be white, black or some shade of grey (which I consider colors too). These colors are somehow encoded as numbers. If I have a pixel that is white in my photograph, how is it coded internally? Black? And what about orange, dark olive green, lilac, etc.?
This is the goal of this article: understand the coding of colors.
UWV Office, Almere
The RGB way of Coding
Multiple ways of color coding exist. The most prominent of these is RGB.
So there we are: RGB. R means: red. G means: green. B means: blue.
The RGB color coding assumes that every color has three components: red, green and blue. Believe it or not, all colors that humans can see can be composed from a combination of red, green and blue.
To understand the basics of the RGB coding, let's get into action.
Open Photoshop. From the menu: Window and click the Color entry if it was not already checked. Find the Color panel on your workspace.
Make sure it contains RGB sliders. (If it doesn't, click the menu of that panel and choose RGB Sliders.)
Set all three of R, G and B to 0. Look at the small upper left box in the Color window: it turns black. See Figure 1.
Figure 1
Figure 2
Figure 3
Great! But what does that mean?
The Color panel allows a user to pick one color by entering a value for each of the R, G and B components. That value can be anything between 0 and 255.
It's as simple as that. Given three figures between 0 and 255, assign one to R, one to G and one to B, and you have defined a color.
For these three figures, 0 means: nothing, 255 means: the maximum amount. Remember that we are coding light, not ink or paint or something like that. A higher figure means more light. The higher the RGB values, the lighter the color. The lower the RGB's, the darker the color. We set RGB to 0,0,0 and got black.
Now go back to the Color panel. Move R, G and B to 255 each. Check the resulting color. It gets white, doesn't it? Next, set each to 128 and click again. Middle grey you will see. Similarly, RGB = 20,20,20 is a very dark grey, and RGB = 200,200,200 is a light grey. See Figure 2.
Properties of RGB
By now, we can identify two rules. I formulate them here as observations.
First observation: In the RGB way of color coding, the higher the numbers, the lighter the corresponding color.
Second observation: When all three of R, G and B are equal, we get a neutral color: white, grey or black.
The opposite is also true: if the three numbers are not equal, the resulting color is not neutral. Make RGB = 128,128,129 and it's a slightly bluish grey. Almost grey, but not quite. The difference is so minimal that everyone will probably identify that color as middle grey, but in reality there is a minimal blue cast.
Make the colors 128,128,150 and you will definitely recognize the blue component and probably call the result "greyish blue" or something similar. See Figure 3.
Third observation: When the three RGB values are close to each other, the corresponding color is close to neutral. The more they differ, the stronger, purer the color.
RGB Components
Now, let's look at the individual color components.
Still with the Color panel open, set RGB to 255,0,0 and see what that color looks like. That's what you'd call pure red, wouldn't you? No surprise here of course. Similarly, set the values to 0,255,0 and you get bright green. Set 0,0,255 and... you guessed it.
Now pause for a few moments and think about what the colors will be when two of the three components are set to 255, and the remaining one to 0. We will mix green and blue, red and blue, and red and green respectively.
Blue and green first. What do you expect? Bluish green or greenish blue? Well, both answers are fine, but I would definitely say it looks more blue than green. Light blue, to be exact. The correct name for this color is cyan.
This color is definitely lighter than each of green and blue. Why? Because two components both emit light for this color, instead of one. More light, so a lighter color.
Anyway, on with the mix of red and blue. What to expect? Purple? Pink? Again, it's a lighter color. Try it. It's called magenta, somewhere between purple and pink I would say.
Now for green and red. This one is very unintuitive. What do you get when you mix red and green? The correct answer is yellow. A real, bright yellow. Surprised? Maybe, but you may recognize a pattern. Ever replaced printer cartridges? Remember the colors? Right: cyan, magenta and yellow. Exactly the "mix" colors consisting of two full RGB components. Isn't that interesting?
See Figure 4 which shows all primary and mix colors in one picture.
Figure 4
Now look at the relationships between these "elementaries". What's the opposite of pure red? The answer, not surprisingly, is: the mix of green and blue, hence cyan. Looking at the numbers, the opposite of 255,0,0 is 0,255,255.
Similarly, blue and yellow are each other's opposites, and so are green and magenta.
There is one important observation to make at this point. Given any color, the question may be: how to make it more red? The obvious answer is: make the R bigger. That will certainly do the trick, but it has a side effect: the color will also become lighter. A bigger R value means two things: more red and more light.
Similarly the other way round. Remove some of the red and the resulting color will be both less red and darker.
Fourth observation: When increasing one component in any RGB combination, the color will go more towards that component and become lighter, both at the same time. Similarly, remove some of one component and the color will move away form it and get darker.
Dynamics of RGB
Back to Photoshop.
Still having the Color panel open, set RGB to 255,0,255. Magenta as you've seen before. The question now is: how to make this color darker resp. lighter?
Darker... that would require decreasing the R and B values equally. Set both to 175 and leave G on 0. That does the trick.
But lighter... how to do that? The R and B that together make up the magenta already have their maximum values. The only way to make the color lighter is to increase the third component that we had set to 0 until now.
Think about that. We make pure magenta lighter by adding green. It definitely works, try it. By now you know which numbers to enter. Still, it is strange. We make a color lighter by adding its opposite color. Yes, it lightens the color but also neutralizes it. Keep adding green and you will eventually end at white.
The same trick can be done the other way round. Start with one elementary color red, green or blue, 255 in one component, the others 0. You can make the color darker by decreasing the 255 to a lower value. The color will get darker but also closer to black, meaning more neutral.
Starting again from 255, the only way to make an elementary color lighter is to add equal amounts of the other two components. Again, the color gets lighter but also gradually less pure.
Fifth observation: The closer to white or black, the less pure a color can be coded in RGB. No RGB-coded color is "very light" (or "very dark") and "highly saturated" at the same time. Keep making any color lighter, and it will become white eventually.
In a later series of articles, I will explain how to use the RGB values to assess an image's color accuracy and correct color casts.
Gerald Bakker, 24 Dec. 2014
Related articles
Photoshop by the Numbers
