Choosing colors depends often on the designer’s taste. This can lead to tough discussions with stakeholders that do not share that taste. Everyone has gut reactions toward colors, but expressing why an element should have a certain color rarely goes beyond that.
Because I think discussions about personal taste should not be a big part of design critique, I decided to learn more about color matching rules. After all, when I can explain why certain colors are a good choice, others can react to those reasons. While analyzing color palettes, I quickly found out that I needed a better understanding of what color actually is and how we people perceive it. In this post I will share what I learned so far.
What is color?
Color is a person’s perception of an object’s reflected or emitted light. It depends on its wavelengths, brightness and its environment. Yes: color is in our own individual experiences of what we see. But let’s get into the easy stuff first - the physics - and then deal with that personal perception.
In order to have a precise discussion about color, it helps to have a formalized way of defining colors. The model I find most useful is describing a color’s brightness, hue and saturation. Brightness is the easiest to understand, it defines how much light an object sends to our eye balls. The other two are weirder and more interesting.
How is wavelength related to color?
Hue is the quality of a color that we can describe the easiest with our common labels like red, yellow and violet. Most pure colors have a spot somewhere on the visible spectrum of light:
Our eyes do not have some sort of nanometer sensors to measure the exact wavelength of a light source. Instead our eyes are sensitive only to three ranges of wavelengths that peak in the wavelengths for red, green and violet:
The normalized sensitivities of the cones on our retinas for violet, green and red:
I’m showing the normalized version of the chart above, meaning that the sensitivities for the three cone types are all set at a maximum of 1.0. In reality, our violet/blue-sensitive cones are much less sensitive. However, we have more cones of that type, which levels out the lack of sensitivity a bit. Moreover, our eyes and brain compensate for the differences in sensitivity. It actually does that compensation in an odd way, for instance making cyan look brighter than violet.
What happens if you mix colored light?
Although our retinal cones sensitivities peak at only three wavelengths, they pick up signals beside and between those peaks. Most wavelengths trigger two cone types and the ratio between how much they trigger the two defines where on the spectrum we identify it.
Imagine we point one beam of light that contains green light (meaning it has a wavelength of 500 nm) and one with red light (650 nm) at the same spot. That spot does not reflect light with a wavelength of 550 nm; the light itself is not affected by the mixing. We do however perceive the color that lies between green and red on the spectrum!
Can you create all colors with red, green and blue?
So computer displays show images with pixels and each pixel has a three tiny lights: a red one, green one and blue one. But can such an RGB array create all colors? In theory, yes, well, almost. As we discussed, the three cone types cannot discern between a mix of two narrow ranges of wavelengths and a spectral color. So if those narrow bands are aligned with the peak sensitivities of our retinal cones, the cones can be stimulated just like they are by spectral colors between the sensitivities.
The red and green subpixels create everything from red, orange, yellow to green. The green and blue subpixels are for the well, green, cyan and blue hues. Red and blue form purples and magentas.
Why don’t we have RGV displays?
Hey hold on, if our short wavelength cones have peak sensitivity in the violet area, why don’t we use red, green and violet light to display colors rather than red, green and blue?
As shown in the cones sensitivity diagram, our red-sensitive cones have a small peak in the violet area. We see saturated blues when:
- Short wavelength cones (violet/blue) are triggered
- The mid range cones (green) also quite a bit
- The cones for red barely
So you could mix a blue with violet and green light, but it would not look saturated, because our red-sensitive cones would pick up that color too. With red, green and blue we can accurately describe all hues in between.
Moreover: because of the small sensitivity peak of the long wavelength cones (red) in the short wavelength area (violet), we can mix purples looking just like violet by adding a bit of red to blue. In practice, that is the reason that displays cannot show violet as saturated as we can see it reflected from real objects.
Where are purple and magenta on the spectrum?
Purple and magenta are examples of non-spectral colors; you can only make them by mixing wavelengths. Red and blue, as you know. Now unlike with mixing red and green, we do not perceive a color between those two on the spectrum! By averaging the wavelength, you would imagine you’d get green:
Purple looks like violet instead! The reason is that violet light does not only activate our short wavelength cones, but also the long wavelength cones for the reds. Purple also triggers both these types, making our brains interpret them as similar. Magenta is like purple with more red.
Why do we make color circles out of a linear spectrum?
Color circles are used a lot in color theory and design software, but why do they exist at all if the spectrum is linear? Because purple and violet are so much alike to us, we can create a smooth gradient between the most opposite colors on the spectrum: violet and red:
In the center I have blended the extremes of the visible spectrum. You see purple and magenta there.
By drawing the spectrum as a circle so that both ends overlap, we get the same effect:
Again, this only makes sense because our long wavelength cones are also sensitive to short wavelengths. For creating colors for animals that have different cones sensitivities, this model would not work. In fact, most of our color images do not look anything like their reality.
The color circle contains all perceivable hues. Another neat feature of the color circle is that you can find contrasting colors: they lie on opposite sides of the circle.
Only a hue does not make a color: we need to define the saturation and brightness too, to describe a color completely.
With values for hue, saturation and brightness we can accurately define colors in a way that is close to how we describe colors verbally. Take for instance ‘vivid light blue’. The basic name of a color, ‘blue’, describes the hue. ‘Light’ means high brightness. Vivid means high saturation.
These are the three properties in the Hue/Saturation/Brightness model that is used in a lot of software. It has some issues (I should write about that), but the model is complete, precise and in many ways close to how we perceive color.
What is saturation exactly?
Saturation is the purity of a color. The purer a color, the narrower a light source’s band of of wavelengths it occupies on the spectrum. Spectral colors are the most saturated colors possible and have only a single wave length. The least saturated colors are white and black and all the greys in between. White light is a balanced mix of all the colors that we can perceive: light waves from across the visible spectrum. Or simply by mixing red, green and blue in a clever way. Either way, the mix has to imitate the ratio in which the sun’s light triggers our color sensitive retinal cones.
Knowing how to make the most saturated and least saturated colors, you can create colors with medium saturation by adding white light to a saturated color.
Saturated colors only trigger two retinal cone types - their sensitivities overlap, so it’s impossible to trigger only one type. That means we are actually quite bad at assessing color saturation. We cannot see the difference between a spectral yellow and an even blend of several greens and reds, for instance. The only way we can perceive that an object has an unsaturated color (and thus reflects light containing many wavelengths) is when all our three color receptors for red, green and blue are activated by that color. So as long as one of our three cone types is not activated, we process it as if it were a pure, spectral color. The more light the third cone type is picking up additionally, the less saturated we consider the color.
Just by trying to define color we already have to go beyond the physical properties of light. Our retinas process wavelengths in a non-mathematical way, requiring a lot of interpretation. And I did not even get started with what our brains do with the signals they receive from our eyeballs! That’s for the next post: How we all see colors differently.