What is a colorspace anyway?
A field guide to what a colorspace is.
Color isn’t a property of the world. It is something our brains and eyes create, doing their best guess what wavelength of light you are seeing.
What you are seeing is a thin slice of the electromagnetic spectrum that our eyes are sensitive to. It is a continuous spectrum of ‘temperatures’ of light, and our brains are using janky equipment to make rash assumptions in a horribly distorted and biased way, as quickly as it can. The summation of all of the concessions, hacks and cheats are what you and I experience as color vision!
The three cones
The typical human has 3 color receptors, each sensitive to a different range on that spectrum, and what we see as color is the proportion of signal those receptors triangulate on. That triangulated value is what we call a color.
The three sensitivity peaks are called L, M, S (which stand for long/medium/short) that roughly map on to red, green, and blue wavelengths, with a considerable amount of overlap. The proportion of light each of these photoreceptors detects is what matters, because they can only tell you intensity, within their band of colors. Your brain takes those three numbers and interprets them for each point in your visual field. This is determined by the relationship between each of the cones’ responses, where they disagree as much as where they agree.
The visible light spectrum goes from about 400 nm to 700 nm with each of the LMS being peak sensitive at different wavelengths.
- Long: ~565
- Medium: ~535
- Short: ~430
The fact that our L and M cones are closer together means we have more fidelity discerning those colors from each other. Which is why we are able to tell the difference between yellows, oranges and reds so much more. When looking at the widget below, you’ll probably notice that even though the gradient is evenly spaced, you can see more distinct values between green and red, than between green and blue. Interestingly enough, the L cone doesn’t even peak in red, it peaks lower in the spectrum, which goes to show how much the L cone can out-vote the M cone when it comes to seeing red.
By selecting a frequency on the electromagnetic spectrum you can now see how each of the cones responds, and tells our brain what color we are seeing. This is great, we can exactly triangulate any color now right… Right?
Metamerism
There are multiple ways to trigger the same cone response with light, that look identical to our brains. This is called metamerism, and is the cheat that makes digital displays work.
A digital display of a sunset does not emit the same colors as a sunset. In reality there is a complex and diverse array of wavelengths of light that are reaching our eyes. A digital display is not even remotely close. A display shows 3 specific colors in proportion that produce the same answer to our brain when shown to our eyes. If we had more color receptors in our eyes, you would be insulted by how inaccurate the display you are looking at right now is.
This is a result of our giant human brains being able to calculate in real time the ‘correct’ color from minimal inputs. So what if we had more receptors? There is some interesting information on this, the Mantis Shrimp has 12 different color receptors, so it can see color much more accurately right? Well, no actually. Because the Mantis shrimp has a small brain, it does not do the calculation our brains do to solve for different balances and gradients of colors. It only has 12 crayons in its crayon box so to speak, poor little things. Meanwhile our brains are able to blend and fabricate wholly new colors that don’t even correspond to proper colors on the electromagnetic spectrum, like the color magenta, more on that later.
Our brains’ ability to process multi-dimensional math real time is just what allows us to see colors as well as we do, and is also the whole trick: our eyes are easy to fool, and every digitally processed image from start to end is exploiting metamerism.
As you can see, two physically different lights can be the same color to you, but in actuality are completely different real world values.
How your eye handles brightness
Because you are seeing colors as a report of ratios, not values, brightness gets a lot more complicated, and your perception is skewed to be more sensitive in darks than in brights due to the hardware running in your eyes.
Each of the cones in your eyes (L, M, and S) responds to light logarithmically, not linearly. Which practically means if twice as much light hits a receptor, it does not report double the value to your brain. You need to multiply things many times before you can reach twice the perceived brightness. Even more significantly, because each of the three cone types share this compressed response, the total combined intensity is the combined signal from three already biased receptors, multiplying the skew from reality to perception further. This biases the sensitivity to being able to discern the difference of dark values.
There is another component to your eyes as well, there are receptors called rods, which are significantly more sensitive to light than cones, but do not detect what wavelength. They do more work when the light values are low. You may have noticed at night, the vividness of color goes away, and colors feel more muted, or even completely gone. This is because the signal reaching your brain is coming from the rods.
Why is it like this even? Think of what is more useful to you in your day-to-day life. Being able to navigate your room in the middle of the night with lights off, or staring directly into the sun and knowing exactly how intensely your eyes are being burned out of your skull. A fully linear, evenly spaced, gradient of perception would either be blind in the dark or in the light. We have neither problem because our perception is non-linear.
We sure are talking a lot about eyes and not pixels right? What does all this even have to do with colorspaces? Well before we can represent a color to someone’s eyes, we need to understand what the eye is even seeing.
Move the slider and see where you are able to tell the difference between luminance values easier. You can also give yourself more steps to help illustrate just how much more sensitive to darks your eyes are than to brights. Now that we understand the range of what we can see, we can now make a proper definition.
So what is a colorspace anyway, and why do we have so many?
A colorspace is a definition about which rod/cone signals count as which color. It has three components: the color primaries, the white point, the gamut. The reason there are many of them is that they were built for different jobs (and hardware).
What a colorspace definition solves is it can take 3 numbers and turn them into a color, but in order to do that, we need to know how to use those numbers, and without our shared definition, they are useless, or worse, used incorrectly. Let’s break down what we need to know.
- Color primaries
- This specifies the red, green, and blue chromaticities. Basically what wavelength is actually red, green and blue.
- Transfer function
- This maps how the stored numbers map onto actual brightness, and how that budget is distributed between darks and lights. Much more on this in the next guide.
- White point
- This tells you what is actually considered neutral white in your colorspace. Our eyes balance to different neutrals constantly, so white is not a given constant, and is not always the same value between colorspaces. Remember your eye constantly rebalances what it calls white; a colorspace has to pin that down to a fixed value, and different spaces pin it differently.
These combined together can be visualized or defined as the gamut. The gamut is the full set of colors you can make by combining your primaries together in every possible combination in any given colorspace.
The reason different colorspaces exist are many and varied. Over time screens have gained the ability to display a wider range of colors, from film projectors in the 60s, to the latest smartphone, and everything in between. Combine this with the fact that each of these delivery platforms want to be optimized for performance, different image formats may contain widely different amounts of data, and there are colorspaces tailored for that as well. Here are some examples to help visualize.
- Broadcast - Wide compatibility, that the most possible devices can display.
- Cinema - Preserve highlights better for theatrical viewing conditions.
- Archival - Designed to carry all possible colors worked with, for maximum quality.
For colorspaces sRGB, Rec.709, Rec.2020, ACES, etc. each one is a different assembly for a different job. Not better/worse, different definitions for different jobs. The gamut explorer widget makes the scale of those differences visible.
To visualize these, let’s map them over all the colors that a typical human can see. Let’s first visualize all the colors using the CIE chromaticity diagram. Then we draw the different gamuts drawn over as triangles, each consisting of the defined Red, Green and Blue color primaries, and in the center as their White Point. Combining it all together we can visualize what we are dealing with.
Now we are getting our hands dirty. By toggling these on and off, you should be able to easily understand what each colorspace can display, and see the differences between them clearly.
The takeaways and flukes
So now you know that a color as perceived by you is a collection of biased values in both color and brightness, and a colorspace is a definition on how to describe those values in a way optimized for different jobs.
The keen eyed of you may also notice that some gamuts in the widget above actually include colors or values outside what humans can see, or are physically impossible. This is deliberate, but also a sharp knife you can cut yourself with if used improperly. These exist to be able to draw a triangle, the gamut around all possible colors a human can see, and in order to create that broad of a gamut, one of the color primaries has to go lower than pure black to get there. This can make situations where you can easily get into trouble, and is typically not a working colorspace.
Another detail I said I would mention earlier, illustrates how interpreted and biased this all is can be seen by looking at the CIE diagram. The curved horseshoe edge goes from blue to red, corresponding with the electromagnetic spectrum that we started with. But what about that straight line between red and blue? In between those points colors wrap around through magenta. Colors that do not correspond with any direct value on the electromagnetic spectrum. But we know that our brain is balancing the 3 cones signals, so how can we get here? By displaying pure Blue and pure Red, two colors on the opposite end of the spectrum at the same time, and specifically not displaying any Green at all. Given our understanding of Metamerism, we know that there can be multiple answers for a signal from our cones. The red and blue colors ‘should’ look green to us, except our green receptors are not firing at all, so our brain bends what should be a 1 dimensional spectrum into a circle that loops around, and shows us magenta.
So now you know a color is a perceptual report your eye files, biased in both hue and brightness, and you know what a colorspace is: a definition about how to describe those reports, purpose-built for different jobs. What you don’t yet know is what happens when we try to store those agreements as numbers and move them through software. That’s coming in the next guide.
Glossary
Every term used in this guide, defined once. In the prose, underlined-dotted terms show their short definition on hover or focus, and jump here on click.
- Electromagnetic spectrum
- The full range of electromagnetic radiation, from radio waves to gamma rays. Visible light is the thin band between roughly 400 and 700 nanometres that human photoreceptors happen to respond to.
- Cone
- One of the three photoreceptor types in the retina, each tuned to long, medium or short wavelengths. A cone reports intensity only, within its own band; colour is the brain comparing the three reports.
- Rod
- The retina's other photoreceptor. Far more sensitive to light than the cones but blind to wavelength, so at night the signal reaching your brain is mostly rods and colour drains out.
- Metamerism
- Two physically different spectra that produce the same cone response, and so look identical. Every digital display relies on it: three primaries in proportion stand in for a spectrum they do not contain.
- Color
- What your brain files after comparing the three cone signals at a point in your visual field. Biased in hue by the overlap of the cones and in brightness by their non-linear response.
- Colorspace
- A shared definition for turning three numbers into a colour. It fixes which chromaticities the red, green and blue primaries are, what counts as white, and how stored values map to brightness. Different spaces exist because they were built for different jobs and hardware.
- Color primaries
- The three reference chromaticities a colorspace mixes to make every colour it can represent. They are the corners of the gamut triangle on the chromaticity diagram.
- Chromaticity
- A colour with its brightness divided out, usually written as an xy coordinate on the CIE diagram. Two lights with the same chromaticity differ only in how bright they are.
- Transfer function
- The curve that maps code values to actual light, and so decides how the bit budget is split between darks and brights. Covered properly in the next guide.
- White point
- The chromaticity a colorspace treats as white. Your eye rebalances its own neutral constantly; a colorspace has to pin it to one fixed value, and different spaces pin it differently (D65 for sRGB and Rec.709, D60 for ACES).
- Gamut
- The full set of colours reachable by mixing a colorspace's primaries in every proportion. Drawn on the chromaticity diagram it is the triangle between the three primaries.
- CIE chromaticity diagram
- The 1931 CIE xy diagram: a map of every chromaticity a typical human can see. The curved edge is the pure spectrum from violet to red; the straight edge, the line of purples, is where the brain fabricates magenta.