Thinking of Colors in RGB

Digital painting software ‘thinks’ in RGB color space: it identifies and adjusts colors in terms of their red, green, and blue component stimuli. Knowing how the software is thinking can help us understand and use its color tools.

Given how our visual apparatus works, we are stimulated to perceive a color when we observe tiny arrays of certain lights; our eyes and brain interpret them together as a single color. It happens that the widest range of color sensations can be produced by lights that cause us to see certain red, green, and blue colors. That’s why digital displays (on televisions, computers, phones, and so on) rely on tiny arrays of phosphors that stimulate those exact colors, within some limits of practicality and affordability.

Monitor red, green, and blue (as the three colors above are called) aren’t “primary” in the archaic and misleading sense of  being 'unmixable from other colors'; indeed, they could be stimulated in us by various combinations of  lights. But they remain functionally basic to the displays used by digital artists; each pixel we ‘paint,” or manipulate, is a tiny pattern of phosphors that stimulate those three colors.

For this reason, digital painting software must ‘think’ of a color as caused by a combination of lights that produce monitor red, green, and blue. To create, modify, and blend colors on a screen, the software adjusts those component lights in patterned ways.

Identifying Colors 

Imagine, then, stimulating the perception of other colors just by shining three lights (that produce monitor red, green, and blue) more-or-less brightly. Let 0 stand for a light being completely off and 255 for it being fully illuminated. That’s how a digital display works. When all three lights are off, there is blackness. When all three lights are fully illuminated, there is whiteness. When the lights are differently illuminated, they stimulate the perception of the other colors that are possible (that is, 256 x 256 x 256 = 16,777,216 colors) within their range, or gamut. That’s a lot of colors! It’s not as many colors as humans can distinguish, but it’s enough to project on a digital screen a colorful emulation of the world we see.

In an RGB color model, each color is identified by three numbers for its monitor red, green, and blue component stimuli. This can be done in the decimal, or base 10, system of numbers we use every day. Thus, black is named (0, 0, 0), meaning the three lights (that stimulate monitor red, green, blue) are off. White is (255, 255, 255) because the three lights are fully illuminated. Monitor green is (0, 255, 0) because the lights that stimulate red and blue are off, but the one that stimulates green is fully illuminated. Magenta, which is the additive complement of monitor green, is (255, 0, 255) because the lights for red and blue are fully illuminated, while the one for green is off; and so on.

Often, however, the RGB components of a color are identified with hexadecimal, or base 16, symbols. (Base 16 is widely used in computer programming. The odd decimal range of 0 to 255 that we’ve been using happens to be the range of numbers you can indicate with just two symbols in base 16.) The sixteen symbols commonly used in hexadecimal are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F. A few conversions from decimal to hexadecimal can help us learn the system:

So, monitor red often is identified as (FF, 00, 00) or #FF0000 in hexadecimal, monitor green is #00FF00, magenta is #FF00FF, and white is #FFFFFF. In what follows, I’ll do the calculations in decimal, but will identify colors by both their decimal and hexadecimal names.

Luminance

The way digital painting software ‘thinks’ of luminance (that is, “brightness” for lights, or “lightness” for reflective surfaces) is very intuitive. Dark colors are stimulated when the three component lights are collectively dim, and light colors are stimulated when the lights are collectively bright.

For now, let’s stick to stimulating achromatic colors, the string of colors from black to white in the grayscale. For black, we just turn the lights off: (0, 0, 0) or #000000. For the brightest white, we turn them fully on: (255, 255, 255) or #FFFFFF. For a dark grey, the lights will be equally illuminated, but not too much, such as (50, 50, 50) or #323232. For a medium or neutral grey, the three lights are half illuminated: (128, 128, 128) or #808080.

Achromatic Colors #000000, #323232, #808080, and #FFFFFF

Notice that for achromatic colors—that is, black, all the greys, and white—the three monitor lights are equally illuminated. The ratio of their brightness is 1:1:1. As we produce the greyscale gamut, the total illumination from the lights will range from 0 (for black) to 765 (for white). As the total increases, the resulting color appears lighter. But it remains achromatic because the ratio of the lights is 1:1:1.

Hue

To stimulate a color that is off the greyscale and going in the direction of some hue, the three lights must be unequally illuminated. For the hue to be saturated, one or two of the lights must be turned completely off ! (I’ll say more about saturation and explain the second requirement in the next section.)

Think of a hue, then, as a ratio of brightness of the lights that are illuminated. For example, the ratio for the monitor green hue is 0:1:0. In other words, the lights that stimulate red and blue are turned off, and only the middle light that stimulates green is illuminated. The brightest instance of this green would be (0, 255, 0) or #00FF00. There could be darker versions, such as (0, 200, 0) or #00C800, and (0, 32, 0) or #002000; these are the same green hue because the ratio is still 0:1:0, but they are darker because the total illumination is less.

Colors #00FF00, #00C800, and #002000

To take another example, the brightest magenta is (255, 0, 255) or #FF00FF. Some darker magenta colors are (128, 0, 128) or #800080, and (50, 0, 50) or #320032, and so on. These colors are magenta because the ratio is 1:0:1, which meCans the light that stimulates green is off and the other two are equally illuminated.

Let’s make up a pattern, such as 0:5:4. That would be a bluish cyan hue with increasingly lighter instances such as (0, 50, 40) or #003228, (0, 100, 80) or #006450, and (0, 145, 116) or #009174. The lightest this saturated hue could be is (0, 255, 204) or #00FFCC, because beyond that the middle light would explode! (Not really. It just couldn’t get any brighter and maintain the 0:5:4 ratio.)

Colors #003228, #006450, #009174, and #00FFCC

As we move clockwise around the RGB hue circle, we can see how the lights determine the arrangement of hues. Let’s start with monitor red (255, 0, 0), for which only the first light is illuminated. As we move clockwise (through a range of red-orange, orange, and orange-yellow hues), the second light gradually comes into play until it too is fully illuminated at the pattern we perceive as yellow (255, 255, 0). Then the red light gradually dims until monitor green (0, 255, 0) is achieved. Finally, the third light, the one that stimulates blue, comes into play; when it becomes fully lit, we are at cyan (0, 255, 255). It is then time for the second light to dim, until we reach monitor blue (0, 0, 255). The next major point comes as the first light is fully lit at magenta (255, 0, 255). All that remains is for the third light to gradually dim to 0, so that we are back to monitor red (255, 0, 0). 

The RGB spectrum, therefore, naturally divides into six equally-spaced major hues—red, yellow, green, cyan, blue, and magenta—and the intervening hues.

Saturation

We’ve learned to ‘think’ in RGB about achromatic colors (produced when the three component lights are equally illuminated) and about saturated hues (that we see when the lights are unequally illuminated, and one or two of them are off). All the remaining combinations in which all the lights are illuminated, but unequally, will be unsaturated instances of a hue.

A color is saturated when it exhibits a hue without any mixture of black or white. A saturated color, then, is chromatic and pure. But in an unsaturated color there is some achromatic color (black or white) mixed in.

When all three component lights are illuminated, the resulting color will be (somewhat) unsaturated. Why is that? We can think of a color like (25, 120, 25) or #197819 as having two parts, a dark grey part (25, 25, 25) and a chromatic component (0, 95, 0). The chromatic component has the ration 0:1:0 of monitor green; thus, (25, 120, 25) is a desaturated version of that green hue. We could obtain less saturated tones of the same green hue in various ways. For example, we might double the achromatic part of the mixture, as in (50, 120, 50) or #327832; halve the chromatic part, as in (25, 60, 25) or #193C19; or do both, as in (50, 60, 50) or #323C32. The last color we might prefer to call “grey with just a hint of green.”

Colors #197819, #327832, #193C19, and #323C32

Adjusting RGB Hue, Saturation, and Luminance

After a bit of practice, we can use the guidelines above to adjust the RGB sliders in painting software to tweak the color in play. But it’s easier to use a graphical color picker that identifies colors in the RGB by their hue, saturation, and luminance values. For instance, the greyscale colors defined above (as caused by the three component lights being equally illuminated) are found up and down the left edge of the square in the HSV color picker below. The saturated tones of the hue are up and down the right edge of the square, and all the unsaturated tones are elsewhere in the square. And to change the hue, just move the cursor around the hue circle. 

HSV Color Picker

The color picker makes light work of adjusting an RGB color. Now that we can ‘think’ in RGB, we will understand the work it’s doing.

***

Thanks for reading!

I hope that you enjoyed this post and that it inspires you to enjoy digital painting. If you find this post helpful, please share it with your friends. And please send me your insights on digital painting and suggestions for Digital Paint Spot.

Bob Kruschwitz