A series of occasional articles on the intersection of art, math, and computers
Everything you know is wrong.
That's the title of an old Firesign Theater album, and I think of it often as I watch my kids progress through high school. Maybe it should read, "Many of the things you are taught have been dumbed down because teachers didn't think you could handle them." Whether it's glossing over quantum physics when teaching the nature of the atom, or stating that Socrates killed himself, because getting into the whole trial thing is too complicated, examples abound.
Anyway...most people, when asked to name the primary colors, would respond "red, yellow, and blue", and, when asked to define what a primary color is, would respond with something like, "they are the colors which can be used to make all other colors". That's what many of us were taught in school at a young age, but it's only partially true. People involved in printing know that the truest primary colors are cyan, magenta, and yellow, with black added to get a full range of darks (that's the familiar CMYK color model, with K representing black).
Are We Adding or Subtracting?
But even that is only half the answer to the question of primary colors. We see colors on a piece of paper or canvas because they absorb certain wavelengths of light and reflect others. Red appears red because it absorbs most light and reflects only the "red" wavelengths. This is called reflective
If you mix two colors together on a piece of paper, they absorb a greater range of wavelengths, and together, reflect less. The mixed color is darker. Mixing reflective colors together is a subtractive
On the other hand, the color you see on a computer monitor is transmitted
(by thousands of tiny LED lights). If you add transmitted colors together, the result is a brighter color, so it's called an additive
process. The primary colors in a transmitted color system are not cyan, magenta, and yellow, but rather red, green, and blue, which is the RGB we are all familiar with when describing colors in a program like Photoshop or GIMP. Combine all three transmitted colors at their full intensity, and you get white.
On a computer monitor, a single unit of transmitted color -- a pixel -- is the product of 3 LEDs (red, green, and blue), each shining at varying levels of intensity.
Your Digital Palette
The range of colors available on a computer screen depends on the range of intensities that can be defined for each of the color channels (red, green, and blue). In a typical system, the values for each channel are defined by eight bits of information. Each bit is binary, having two states, defined as 0 and 1, so two bits together can represent four different values (00, 01, 11, 10); eight bits together can represent 256 different values (28
). The intensity of a single channel, for example the red LED, is defined by eight bits, and so can have 256 levels of intensity.
Thus we have the familiar RGB notation of 3 numbers, each with a value between 0 and 255. Each number represents the intensity of one of the color channels. This is commonly called 24-bit color, and can represent 16,777,216 different values (2563
HTML Notation, or the Beauty of Math
We (humans) have chosen to represent numbers, which are empirical things, with ten different characters, namely the digits 0 through 9. We can represent any number (including numbers greater than ten) using these ten characters, if we combine them. It's a base ten, or decimal system. Just like eight binary characters can represent 256 numbers (28
), 8 decimal characters can represent 100,000,000 numbers (108
In a decimal system, twelve is 12. In a binary system, where we only use two characters (0 and 1), twelve is 1100.
RGB notation represents each of the 256 available levels of intensity using a decimal (base ten) system. But what about HTML notation, where RGB values of 226, 243, and 229 become e2f3e5? This is actually three numbers (e2, f3, and e5) that are used to represent the 256 different values for each of the three channels in base 16 notation, or using 16 characters for each number instead of ten. The 16 characters are 0-9 and a-f. In this system, 01 is one, 0f is fifteen, and 10 is sixteen. Why use base 16? Because it only takes two base 16 characters to represent 256 values (162
So What? or 16 Shades of Gray
Do you need to understand all this to produce a nicely colored picture on your computer? No. If you do understand it, will it guaranty that you use colors well? No (I'm a prime example of this). I just like the elegantly logical structure of the system. And it opens a door to a greater understanding of color. For instance, if the LEDs for all three channels are shining at the same intensity, you get gray. In HTML notation, 999999, aaaaaa, and bbbbbb are all shades of gray. Only when you vary the intensities among the individual channels, do you get different hues.
Or better yet, think about this: The RGB system is based on how human eyes work. We generally have three types of color receptors, roughly correllating to red, green, and blue. We are known as trichromats. There are some animals that are tetrachromats; they have four types of color receptors. So when we see green grass rendered on a computer screen, and it looks realistic to us, it's because the monitor is replicating our own limited way of seeing color. A tetrachromat, seeing the same image, would probably think that it doesn't represent the true coloring of grass.
I think this is all fascinating and...ummm..enlightening, but admittedly, I'm a geek. If you've made it this far, thanks for reading.