Color theory
Let’s start by covering the basic concepts from physics and biology.
The color spectrum
Wondering where rainbows come from? They appear when visible light is broken apart by water droplets that bend sunlight and split it into different wavelengths.
The same thing happens in a glass prism, as shown in Figure 1. When visible white light passes through a prism, it bends and breaks into a haze of light that splits into all sorts of wavelengths, which our eyes perceive as all colors in the visible light spectrum.
Figure 1. Visible light breaks into different wavelengths as it bends in a glass prism
The visible light spectrum that we see is part of a continuum of electromagnetic energy. Figure 2 puts this into perspective by showing you the part that humans can see from 400-700 nanometers, which is what we call visible light. Infrared is just beyond red, and ultraviolet is just below purple.
How humans perceive light
How does light gets converted to colors? When visible light hits something, some of the light gets absorbed, but some of it reflects off. When we look at something, what we see is the light that bounces off of it, and into our eyes.
When light enters our eyes, photosensitive cells called cones and rods interpret the light and send signals to our brain. The rod cells interpret light and darkness (black and white), while the cone cells interpret three different wavelengths which our brain interprets as color.
There are three types of cones. They are short-wavelength (blue cells), middle-wavelength (green cells), and long-wavelength (red cells).
For simplicity, I’ll refer to the different cones by their color name, rather than wavelength sensitivity. But don’t get confused by this, as the irony is the red cones have nothing to do with the color red. They respond to wavelengths that our brain interprets as red. There’s nothing red about the red cones. It’s all in the brain.
Figure 2 shows where the red, green and blue sensitive cones interpret different wavelengths as color. As different wavelengths stimulate our color-sensitive cones in different proportions, our brain interprets those signals as color.
Figure 2. Red, green and blue cones and the perception of visible light
Cultural color categories
I don’t want to be the one to break it to you. But… technically your parents lied to you about the colors of the rainbow. And technically, the rainbow song is a bit of a scam too.
The issue here is that red is not “red” per se, as absolute universal truths. Rather, the word “red” is just a vocal utterance that your culture uses to describe an arbitrary cut-off point on the color spectrum.
Figure 3 shows the color words that people typically use in English, when referring to different wavelengths. In my culture, we use the word “red” to describe 635-700 nanometers on the visible light spectrum. However, researchers show that people from other cultures, who speak different languages, can refer to different ranges wavelengths when referring to a similar color word.
Figure 3. Cultural words for color based on arbitrary wavelength ranges
Rods, cones, and color perception
Now let’s look at how the cones in our eyes send signals to our brain, that interprets those inputs as color. When you look at an object, the combination of color sensitive cones that are stimulated creates the message that our brain interprets as color.
I created a simple shorthand to exemplify the concept, with cone color referenced as (B, R, G) and -/+ to signify if the cone gets stimulated or not.
Imagine that you’re looking at a computer screen. Light at different wavelengths reflects into your eyes and your cones respond to the different wavelengths.
Stimulate the blue and green cones only, and you experience cyan.
[B+, G+, R-] = Cyan
Stimulate all the cones at once, and you experience white.
[B+, G+, R+] = White
Turn off the light so no cones get stimulated, and you experience black.
[B-, G-, R-] = Black
Where color wheels come from
What’s a color wheel? It’s the light spectrum, spun in a circle, closing back in on itself. It’s what you get when you connect one end of the color spectrum to the other. It’s also what you get when you build up a color system from its primary colors. However, you won’t find pink, brown and a few other colors in it.
The color wheel in Figure 4 shows the color spectrum in our system, starting with Violet and moving to Red at the top of the spectrum. You’ll find the cool colors on the right, and warm colors on the left.
There’s one odd color you’ll see in the color wheel, which we called Red-violet, otherwise knowns as magenta, made famous for its role as “M” in CMYK. Red-violet doesn’t exactly exist on the spectrum per se, as it’s a combination of wavelengths at opposite ends of the visible light spectrum.
Red-violet is a non-spectral color, because you can’t directly see it on the spectrum. Other non-spectral colors include black, white, grey and colors that are made by blending spectral colors with non-spectral colors such as pink and brown, plus metallic effects are non-spectral.
Since red-violet combines light in the upper and lower ends of the spectrum, it’s not possible to place it on a linear map of color wavelengths, since it’s both low and high at the same time. Since red-violet is a bit like red in some studies of color and emotion, I’ve placed it on the top of the color spectrum in some of our visualizations.
Figure 4. Color wheel
Color models and primary colors
Another way to build up a color model is with primary colors, those colors that can be combined to build all other colors in the color spectrum.
What’s a common source of confusion, is that there are different primary colors, for different color models, and depending on whether you use pigments or light, the colors will combine in different ways.
In Figure 5, you’ll find the three most common color models: RGB (red, green, blue), CMYK (cyan, magenta, yellow, black) and RYB (red, yellow, blue). For practical purposes, I’ll ignore the K in CMYK, because it’s used in print to ensure that black is black. We can just call it CMY.
Figure 5. Primary colors from three color models
Additive and subtractive
There are two ways to combine colors. First, by merging colored light, and second, by merging colored pigments. Among the color models in Figure 5, the one additive model builds colors by adding light, while the two subtractive models build colors by subtracting light.
Building color by combining light is called additive because you’re adding colored lights together. As you add more and more colored lights, the overall color gets whiter and whiter. Add red and blue, and what you get is violet, but it’s a washed-out lighter violet. Add green to the mix, and now you’ve hit white because you’ve now covered all visible light waves.
Subtractive color combinations work the opposite way, by removing light. However, this concept is a bit complex and philosophical, so I’ll take you through some examples before explaining it.
When we see a green leaf, what we’re seeing is the green light that reflected off the leaf. Or you could say we’re seeing the green light that was not absorbed by the leaf. In other words, the leaf is absorbing red and blue light, so only green light bounces off of it.
Or put another way, the green leaf is subtracting red and blue from the visible light, which means there’s only green light left to reflect off of it.
So when we look at the tree and see all those leaves, what’s happening is those leaves are subtracting all visible light, except green.
Technically, our entire concept of color is completely wrong, epistemologically speaking. A green leaf appears green because it rejects green light. So technically, the green leaf isn’t even green. As I see it, if we call something green, but it doesn’t even absorb green light, how can we justifiably call it green? So every color you ascribe to everything is technically not that color, but rather, rejecting it.
Let’s get back to our discussion on subtractive colors, with an example of mixing paints using the RYB color model. As you add more colored pigments, you suck up more and more light. The more colors you add, the darker your colors get. This is because each color absorbs more and more light, leaving less light to bounce off the paint.
Add the primary color red, and now you’re sucking up all the light except for red (because technically red paint is NOT red, it’s just absorbing all other wavelengths except red). Next, add blue paint, and now you’re sucking up every wavelength except red and blue. But now, it’s time to add yellow, and now we’re sucking up every color except red, blue and yellow, which means we’re now absorbing all the visible light, so our paint is now black.
Building other colors from primary colors
To illustrate how primary colors are used to derive all other colors, I’ll use RYB as an example. In Figure 6, on the left, you’ll see the three RYB primary colors red, yellow, blue.
In the middle, you’ll see the secondary colors that are derived by combining the primary colors red and blue to get magenta; blue and yellow to get green; and so on. On the right you’ll see the tertiary colors that we derived by combining primary with secondary colors.
Figure 6. RYB primary, secondary, and tertiary colors
Some key color terms
The three most important technical terms that help us understand the link between color and emotion are hue, brightness, and saturation. In this section, I’ll describe them, and then show you how they are all related.
Hue
Hue is the term most people use to describe different colors, such as red, orange, purple and so on. Hue is synonymous with wavelength most of the time, except for the non-spectral colors like pink and brown.
Brightness
One of the key factors in color psychology is the level of brightness in a color. You will also see brightness referred to as ‘value’. It represents the quality of a color from dark to light, or when it comes to pigments, how much black or white exists is in a color.
The three main terms used to describe brightness are shade, saturation, and tint, which are defined as follows:
Shade
The shade describes how dark a color appears, as it moves from its vivid color towards black. As a color becomes more shaded, it’s synonymous to having the lights slowly dimmed, till you can only see black.
Saturation
Saturation describes how a color transitions from its most vivid appearance towards a grey appearance. A highly saturated color is a vivid, pure hue. As we desaturate the color, it becomes less saturated and starts to appear gray and washed out.
Tint
As the vivid color moves towards white, we have tint. It’s the opposite of shade.
