The Science of Color
For most of my design career I had a pretty fuzzy understanding of additive and subtractive color systems. I knew enough to select RGB in my design programs for anything online, and CMYK for anything that was going to be printed. But why those two different color systems behaved so differently was a mystery.
I blame my second-grade art teacher.
Most of us remember mixing paints together in primary school. We were taught that primary colors were red, yellow and blue, and that if you mixed red with blue you got a shade of purple, and if you mixed blue with yellow you got a shade of green.
We also learned that mixing all our paints together in a great big puddle in the middle of the art room made a muddy shade of brown, and our teacher a bright shade of orange.
Everything we learned that day was wrong.
Subtractive color system (CMYK)
What we learned in second grade is what is called a subtractive color system. In print designer language — CMYK — which stands for Cyan, Magenta, Yellow and blacK. (Not Red, Yellow, Blue.) CMYK are the primary colors of ink, plus black, the color you get if you mix them all together.
CMYK is called a subtractive color system because each ink you add reduces the light that would otherwise be reflected from that paint. The more paint you add, the darker the mix gets, until you’ve got nothing but muddy black and a PO’d teacher.
Additive color system (RGB)
RGB stands for Red, Green and Blue, the primary colors in then additivecolor system. RGB is based on lightwaves not ink or finger paint. The additive color system is about how light functions when it mixes together and bounces off objects.
Mix red and green light together and you get yellow. Mix green and blue light and get cyan. Mix all light together and you get white. This is like looking at the reverse effect of sunlight through a prism.
Since televisions and computer monitors display images using light instead of ink, so when we’re designing for monitors we’re working in a color system that follows the rules of lightwaves.
Wavelengths and Eyeballs
Light is made up of waves from short to some long. Photo receptors in the human eye are sensitive to short, medium and long wavelengths, which we perceive as color. Violet waves are short, blue waves are a bit longer, green & yellow are longer yet, and red is the longest wavelength that humans can see. Plus all the colors in between.
Great, that (kinda) makes sense. But in that case, why don’t we see colors in the light all around us? Unless I’ve got a prism, it’s physical objects where I see colors.
How does an object get its color?
Turns out, that’s light too. This is where the “additive” part of color systems comes in.
Why is my shirt red and my jeans blue?
Objects appear different colors because they absorb some wavelengths and reflect others back to us. When we see a red shirt, what we’re really seeing is what’s left after all the other lightwaves — blue, green, purple, yellow — have been absorbed by that shirt. Only the red wavelength isn’t absorbed, so our eyes see red.
Same thing with those blue jeans. All the red, green, yellow and magenta wavelengths are absorbed, and only the cyan bounces back for us to see.
But wait — you’re asking — magenta and cyan, aren’t those part of CMYK? How did they get into our RGB colors?
Turns out, cyan, magenta and yellow are the secondary colors of RGB. Does your head hurt yet?
Check out the color wheel above. Red, green and blue are the primary colors, while cyan, yellow and magenta are the colors you get when you mix two of those lightwaves together in equal parts. There are some fun Youtube videos where physicists with red, green and blue flashlights show this in action. Go look at them!
Hue, saturation and brightness (HSB)
There are a couple of other ways you can mix light to make colors. If you’ve ever played around with the HSB settings on your Sketch color palette, you’ve seen how to make colors blacker, more pastel, and more vivid using combinations of Hue, Saturation and Brightness.
Give it a try. In the sample below, I made three primary color swatches using Red, Green and Blue and played with the saturation and brightness for each hue.
You can see the effects of HSB. Notice what happens to our primary colors when the saturation is reduced, or when the brightness is reduced:
- With full brightness but 50% saturation, Red becomes a pastel pink.
- With full saturation but 50% of brightness, Red becomes a brick red.
Hue
Remember the lightwaves of colors where some are really long, some are really short, some in between? Those are hues — commonly known as color.
Saturation
The best way to understand how saturation works is to play around with a flashlight on a piece of paper.
Shine the light on a piece of paper. Notice how the spotlight on the paper gets stronger and more focused as you move the flashlight toward the paper, and weaker and more diffused as you move it away from the paper? That’s what saturation does.
- Saturated colors are a focused beam of light — like a flashlight close to the paper.
- Less saturated colors are a diffused light — like a flashlight shining from across the room.
Brightness
Now turn off all the lights so you’re in a dark room with only a flashlight. As the batteries on your flashlight fade, so does the beam of light, getting slowly darker and darker. (And the zombies getting closer and closer.)
That is the effect of the brightness levels; how much light or absence of light — and number of zombies.
Translate that into HTML, please
When it comes to using colors in online applications, things begin to get complicated.
Since I’m a designer, I am going to avoid math wherever possible to explain how your browser knows what color to display to the user when it reads the CSS and HTML.
To denote colors in a website, we have to turn a perceptual lightwave HSB into a value that can be displayed online consistently for every viewer, on every kind of hardware. This is hard to do!
It used to be even harder.
Decimals and hexadecimals
A pixel on a screen is made by combining saturation and brightness of various hues, usually with 8 bits (256 values) for each. In HTML, these values are given a number on a scale of 0–255, where 255 represents full intensity for that hue and 0 represents no intensity (so, no color).
You can see this in action on your color pickers in any design application, and in the graph below, where red is given the decimal number of 255. In the corresponding color picker, you can see how that decimal is translated into the hexadecimal value that goes into the CSS and HTML. (Designers refer to this as the “hex number,” because it makes us sound mathy.)
When the world was only 256 colors
Back in the early days of color monitors, designers were restricted to “web-safe” colors to ensure that the colors they selected were the colors every user saw on all those crappy monitors that only showed 216 colors. So everything was designed using these colors:
Millions of colors
Today, displays can show millions of colors — which is still less than the billions of colors the human eye sees in the real world. We’ve still got a long way to go.
