Numbers and Colors: How they relate
Introduction
Before being able to successfully judge color correctness of an image, it is useful to have at least a rough idea of how colors correspond with pixel values. In other words, if someone gives you a triplet of RGB values, can you determine what color is encoded by them?
Why not do the test right away.
Consider the RGB combinations 98,144,212 and 166,44,69. Do you know which colors hide behind these combinations? Probably not, but can you come up with a good guess? If so, write down what you think, and check Photoshop's Color panel to find out how you did.
And now that you have the Color panel open, why not play around a bit and choose your own RGB values? Write some random RGB values down, guess what the corresponding color is, enter the figures in Photoshop's Color panel and see what you get. Surprised?
Is there a way to know a color from RGB values alone? And what about CMYK, LAB or HSB?
If you are looking at these figures for the first time, it will be not easy, but it is certainly possible. How, is the subject of this article.
Colors in RGB
The important thing to consider for RGB triplets is always: what is the order from highest to lowest?
Graffiti
If the highest value is the R, then the color must be in the yellow - red - magenta range. Dark yellow, orange, brown, red, pink.
If G is the highest, then the color must be in the yellow - green - cyan range. Greenish yellow, green, emerald.
If B is highest, then the color is somewhere between cyan and magenta. Ocean blue, blue, purple.
The second highest component determines on which side of the primary the color lies. Let's assume G is the highest. So the dominating color is green. Is R the second? Then the color is on the warm side of green, tending towards yellow. Is B the second? Then the color must be on the cold side of green, tending towards cyan.
The lowest component doesn't contribute much to the hue. It is important however to determine saturation. Is it high, close to the others? Then the color is desaturated, close to grey. Is it low, close to 0? Then the color is saturated.
The same reasoning can be followed if you have to guess the RGB values (or better, their order from highest to lowest) from a given color. Unless you are very lucky, you may never guess their exact values at once, but for most colors you can indicate the RGB order.
Going back to the example values.
- In 98,144,212, B is the highest. So we have some blue hue. G is second, so we are on the green side of blue. This may well be the color of a deep blue sky. See figure 1.
- In 166,44,69, R is the highest. G and B are both considerably lower, so we are looking at a red hue, not a brown or orange. B is second and G third, not far away from each other, so the color is a dark, slightly pinkish red. See figure 2.
Figure 1
Figure 2
This subject is so important that I put all possibilities of the RGB order in a table.
First, if we consider the case that all three RGB values are different, then six possibilities exist. See table 1.
R > G > B | A warm red if G and B are considerably lower than R An orange shade if the three values are away enough from each other A brown tint if all three are not high Yellow if red and green are both high A warm bronze-green tint if red and green are almost equal and not high |
R > B > G | A magenta or pink shade. Close to red if B and G are much lower than R |
G > R > B | A warm green. If G and R are both high then close to yellow |
G > B > R | A cold green, nearing blue if B is close to G |
B > R > G | A purplish blue |
B > G > R | A greenish blue |
Table 1
Note that the R > G > B case is the most difficult because of the many different colors that exist in this range. Other cases are straightforward and usually easy to recognize.
Second, if two of the three RGB values are equal, we have again six possibilities.
So here we go:
R > G = B | red |
G > R = B | green |
B > G = R | blue |
R = B > G | magenta |
G = R > B | yellow or warm "olive" green |
B = G > R | cyan |
Table 2
Third, if all RGB values are equal, we have one case: R = G = B, denoting white, grey or black.
As stated before, the closer the three values are to each other, the less saturated, the closer to grey the color is.
Colors in CMYK
CMYK colors are the weakest of the major color spaces. Start with pure cyan (CMYK 100,0,0,0) and the equivalent in RGB is 0,174,239 which is a long way from the maximum cyan in RGB 0,255,255. The same is true for magenta. Only pure yellow (0,0,100,0) comes close to its RGB equivalent: it translates to RGB 255,242,0.
Even the black ink on its maximum value does not yield pure RGB black. CMYK 0,0,0,100 maps to RGB 34,30,31.
Surprisingly, zero inks do correspond to pure RGB white. This is unexpected. Isn't the white of a sheet of paper less intense, more grey, than the white emitted by a monitor? I would say it is, but Photoshop thinks differently.
Anyway, this is not the subject of the current study. We look at values of C, M, Y and K and try to map them on color names.
First and obvious observation is that we can ignore the K. The black has no color, and only contributes to darkness, not to color.
So we look at C, M and Y only. The categorization is simple, and similar to what we did for RGB. Note that combinations of two of the three CMY colors yield a primary RGB color. Without considering ink impurities, of course. But roughly said:
C and M make blue |
C and Y make green |
M and Y make red |
That having said, nothing is pure here. C and M in equal amounts give a slight purplish blue. C and Y give a bluish green, and M and Y give an orangish red. Theory says that the cyan ink is the weakest. That will be true, but the ink colors themselves are not pure either. Magenta is on the red side (more pink), cyan is on the blue side. Hence the deviations in the combinations.
Anyway, like in RGB, the important thing is to put the CMY values in order from highest to lowest.
Let's do that, and see what possibilities we have.
C > M > Y | A greenish blue Only when M comes very close to B, the color may tend towards purple |
C > Y > M | A bluish green When Y and M very low, it gets closer to blue than to green |
M > C > Y | Pink, magenta or purple |
M > Y > C | A color between pink and red When Y very close to M, slightly on the orange side of red |
Y > C > M | A color between yellow and bluish green |
Y > M > C | A color between yellow and red A brown hue when sufficient black is added |
Table 3
As far as my experience goes, color assessment is easier in RGB than in CMYK. The main reason is that RGB primaries are purer. But I admit that it depends on what you are used to work with. Press people may prefer CMYK.
Various websites state that correctness of skin color is best judged in CMYK. Do a Google search for "skin color cmyk" and you'll find them.
Fair enough. Let's move on to LAB.
Colors in LAB
LAB works differently. Given a triplet of LAB values, it makes no sense to put them in order, because the L means something different than the A and B. In fact, for color assessment, the L can be ignored.
Comparing A and B only makes sense if we consider absolute values. But it is more effective to first look at whether the A and B are positive, 0 or negative. Using that classification, we have 9 possible combinations.
A = 0, B = 0 | Grey |
A > 0, B = 0 | Pink |
A < 0, B = 0 | Bluish green |
A = 0, B > 0 | Warm "olive" green, yellow if L is high enough |
A > 0, B > 0 | Warm colors between yellow, orange, red and pink Closer to yellow if B > A, closer to pink if A > B |
A < 0, B > 0 | Green Closer to yellow if |B| > |A|, closer to cyan if |A| > |B| |
A = 0, B < 0 | Blue |
A > 0, B < 0 | Blue, purple, magenta Closer to magenta if |A| > |B|, closer to blue if |B| > |A| |
A < 0, B < 0 | Greenish blue or cyan Closer to cyan if |A| > |B|, closer to blue if |B| > |A| |
Table 4
As I stated in the LAB article, the more away from 0 the A and B are, the stronger the color.
Colors in HSB
Of all color spaces, colors are easiest to map on their numbers in HSB. One figure tells the hue, one the saturation. No need to compare figures with each other.
The H value determines the Hue. A table for it is as simple as can be:
H = 0 : Red
H = 60 : Yellow
H = 120 : Green
H = 180 : Cyan
H = 240 : Blue
H = 300 : Magenta
H = 360 : Red again
Intermediate values are obvious. Between 0 and 60 is between red and yellow and may be an orange hue. Also tan and brown hues lie here.
For convenience, I repeat the color wheel from the HSB article below, but also for convenience, I added the RGB relationships like we saw them above.
Figure 3
The S in HSB is saturation. The higher the S, the more saturated the color. S=0 is a neutral.
Finally, B is brightness. Here is a snag. Brightness is something else than lightness. As we saw in the HSB article, brightness is defined as the highest of R,G,B on a 0-100 scale. Lightness or Luminosity are different beasts. In HSB, 0,0,255 (blue) has the same brightness value as 255,255,255 (white).
Gerald Bakker, 11 April 2015
Related articles
Photoshop by the Numbers
