← Back to guides
Guides · Color

What is a colorspace anyway?

A field guide to what a colorspace is.

~12 min read · 7 interactive widgets

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.

Visible spectrum strip
3.0 orders of magnitude
This stripe is everything you have ever seen. Zoom out.

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.

Wavelength to Cones
Sensitivity
λ = 550 nm
S0% M0% L0%
Drag the slider. The balls show how strongly each cone type fires for a single pure wavelength; the three percentages are the only thing your brain gets to work with. The curves are the CIE 1931 observer through the Hunt–Pointer–Estévez cone matrix, each scaled to its own peak.

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.

The Metamerism cheat visualized
Power (log) A · 580 nm B · 530 nm + 700 nm A · 580 nm B · 530 + 700 nm what you see
Light A · 580 nm
S0% M0% L0%
Light B · 530 nm + 700 nm
S0% M0% L0%

Light A is a single pure wavelength at about 580 nm, which stimulates the M and L cones in a specific ratio your brain reads as yellow. Light B is pure green at 530 nm and pure red at 700 nm arriving together: the green fires the M cones, the red fires the L cones, and the ratio comes out the same. The spectra are nothing alike. The response, and the colour, match to within a couple of percent on this model.

As you can see, two physically different lights can be the same color to you, but in actuality are completely different real world values.

Metamerism mixer
Target ·
400 nm 550 nm 700 nm
S0% M0% L0%
Your mix · 630 + 530 + 460 nm
400 nm 550 nm 700 nm
S0% M0% L0%
0
0
0

The target is not made of these three lights. Move the sliders until your S, M and L bars match its bars; the moment they do, the two swatches are the same colour. You have just built a metamer: a different light, an identical report to your brain.

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.

Luminance-step detection
step - · code - step - · code - step - · code -
256 steps

The ramp is linear in light: step 128 of 256 emits half the photons of step 255. Your eye does not see it that way. Slide through the darks and the brights and note where one step of difference stops being visible, then raise the step count and try again.

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.

Gamut explorer

The horseshoe is every chromaticity a typical human can see; the curved edge is the pure spectrum from 380 to 700 nm, and the straight edge is the line of purples. Each triangle is a gamut: the corners are that space's red, green and blue primaries, the dot is its white point. sRGB is a small triangle inside a much larger one. The region outside sRGB but inside P3 is real, visible colour your phone can show and an old monitor cannot. ACES AP0 reaches outside the horseshoe itself, to coordinates that are not colours at all. That is worth pausing on.

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.

Magenta mixer
line of purples
70
70

Red and blue at once, with no green between them. Every mix lands on the straight edge at the bottom of the horseshoe, which is the one edge that is not part of the spectrum. Your L and S cones are both firing and your M cones are quiet, a report no single wavelength can file, so your brain bends the spectrum into a loop and shows you 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.
← Back to guides