I worked on a project where I dived deep into understanding how modern color management works, including things like color spaces, ICC profiles and more. As I learnt here and there, I decided to write this post, both for my future self, and others who may struggle with some of the concepts as well.

What is color management?

Color management deals with translating between representations of colors across a variety of devices. Throughout this post, we’ll use natural language as an analogy to describe various terms and concepts.

Why is color management needed?

Just as with language, one’s notion of the color “orange” can be different to someone else’s. One person could be referring to the color of a highlighter, while another can think of the skin of the orange fruit. Extending this analogy further, not everyone speaks the same language. Therefore, being able to translate is essential for a shared understanding.

Why is it important to have a shared understanding of colors?

So that for example, we can capture a scene on our camera and show it to someone else on a computer screen, such that they see, as accurately as possible, the same colors and shades as if they had seen the real scene with their own eyes. Or in general, to make it possible to reproduce colors as it pertains to the human eye, accurately and consistently.

Why doesn’t everyone speak the same language?

This may sound like a silly question, but quite valid nonetheless. Much like how human languages are varied due to historical reasons, ways to represent color in computers and other devices are also varied both due to limitations of each medium as well as how each has evolved over time. For example, people of a certain population who’ve never seen fluorescent colors, would have not had any need to denote words to refer to them. Similarly, people living in an area where plants and fruits have very similar colors, would naturally introduce words that can differentiate between the subtleties of those colors, more so than other groups. There is a related and very thought provoking TED talk about how language shapes the way we think.

Basics

To start, let’s talk about color spaces. A color space is akin to a language like English. Within a language, you have an alphabet you can use to form words to describe things (in our case, colors). You may have heard of RGB, HSL and CMYK. These are color spaces. RGB lets you describe colors with a tulpe of 3 values, while CMYK does it with 4 and so on.

In English, you can describe the color red with the word “red” or with the phrase “color of watermelon” among countless others. Someone can have a very good idea of what “color of watermelon” is, while someone else may know that exact color by the word “blush”. In our analogy, each person is akin to a device in our computer world.

Just as a group of people can speak the same language, a group of devices can represent colors in the same color space. A camera and a computer screen often both represent colors in an RGB color space. However, as per our examples, each person could describe the same color using different words. Similarly, each device could describe the same color using different values in that color space. For example, the computer monitor can represent a specific shade of red as it appears to the human eye, using R=25, G=2, B=5 while the camera may represent that exact color with R=32, G=0, B=8.

Now that we know colors can be described differently, not only by people speaking different languages, and devices in different color spaces, but also by people speaking the same language, and devices in the same color space, how can we know what colors we are talking about? Put another way, how can a person describe a color exactly to someone else as if the other person saw it for themselves?

Color Profiles

Given that colors are just combinations of rays of light in specific frequencies of the electromagnetic spectrum, if we have a tool that can measure the intensity of light at each frequency, we can describe colors in a non-ambiguous form.

Such a measurement tool does exist but its representation of a color is not something you’d be happy to use to describe the color of your next clothing item. It’s verbose and precise. It needs to be, because it needs to describe every shade of color that can be perceived by a human. And thus, we have another reason for needing color management: pragmatism.

Now that we have a language to describe any color precisely, let’s call it a device independent color space. CIELAB is such a color space.

The question from the last section should be easier to answer now. In order to know exactly what a device means when it refers to a color, we can create a mapping between tuples of values of a device, to their equivalent in the device independent color space. And from there to any other device. Unfortunately, a device independent color space doesn’t really have a counterpart in our natural language analogy as there isn’t a universal language that can represent the precise meaning of every word in every language.

In the diagram below, colored circles denote the real representation of a color in a device independent color space:

Each set of arrows above is a color profile. In other words, a color profile is the set of mapping from tuples of one color space to another.

Color profiles can define mapping in a simple one to one fashion, but most often, they contain formulas to derive the mappings for the most part. Otherwise, a color profile for an RGB color space would have to contain 16 million entries for RGB to CIELAB direction and 280 trillion entries for CIELAB to RGB direction, assuming a fixed 16 bit per component precision for CIELAB components.

Digital Photos

You may remember that monitors came with CDs with some software to install. Turns out that most simply added the monitor’s color profile to the operating system. By having the right color profile, the screen could display the most accurate colors of say, a photo taken with a camera. But how?

Here, I outline a simplified journey of a single pixel as it makes its way from a camera’s sensor to your computer display.

1. Camera sensors are made up of millions of tiny elements, each of which can collect photons and turn them into an intensity value. A combination of them with different color filters results in a single digital pixel that can represent the entirety of the color gamut supported by the camera.
2. Let’s assume a digital pixel output by a camera is a tuple of 3 values that specify the intensity of colors Red, Green and Blue.
3. The camera manufacturers measure how their sensors capture light and create color profiles for each.
4. When a photo is taken, the color profile accompanies the pixel data. Most image formats such as PNG and JPEG allow embedding of color profiles.
5. When opening the image file on your computer, the image viewer application loads the embedded color profile and translates each pixel color to a device independent color space.
6. It then uses your monitor’s color profile to translate it back to the color space of the monitor (which is also RGB). The final RGB tuples are most likely different to the RGB tuples that came out of the camera sensor.
7. The final pixels are sent to the GPU to then be sent to the monitor.

There are variations to this. For instance, instead of embedding color profiles in every image, a camera manufacturer may decide that their sensor can only produce colors in a gamut already provided by an existing standard color profile that’s available on most operating systems by default. sRGB is such a color profile. To save space in each image, the camera uses its own color profile to map colors to a device independent color space and back to sRGB. It then only mentions a reference to sRGB in the image file.

The Web

There are occasions when color profiles are not explicitly defined. The web is such an example, where the default color profile is assumed to be sRGB. Therefore, despite not specifying a color profile, given correctly calibrated displays, your users should see the same color and shades as you intended when designing the website. Remember, without a color profile to map RGB tuples to a device independent color space, the colors would be ambiguous and their appearance will depend on the device that happens to be displaying it. You almost never want this outcome.

As of today, there isn’t a well supported standard for specifying a custom color space for CSS which limits the range of colors available to the rather limited gamut of sRGB (Safari does allow some flexibility in this regard). There are however hacks to work around this limitation.

Gamut

As alluded to above, not all color profiles are created equal in how wide a range of colors they can map back and forth and with what granularity. For instance, a color profile can be created for a bright studio light bulb in its on and off state. The color space will be a single bit representing the states. Despite the fact that your computer monitor has a color space that can represent millions of different colors, it will not be able to accurately display the on state of the bulb because it simply can’t output that much light out of a single pixel.

So what happens when a device cannot display the full range of colors of an image? Color profiles take care of this by compressing the entirety of the device independent color space (i.e. everything a human eye can see) into their own color space, thus losing accuracy for colors falling outside of their gamut.

Recap

• Color Space: Set of numerical representation of colors where each shade of color is given a tuple of values. Examples include RGB and CMYK color spaces. In RGB color space, a color is represented by a tuple of 3 values, one for Red, one for Green and one for Blue components.
• Color Profile: A mapping between two color spaces. One of the color spaces is usually a device independent color space such as CIELAB.
• Device: Such as a camera, a printer or a computer screen. Each device represents colors in a particular color space. For instance, printers often use CMYK color space that represents each color with Cyan, Magenta, Yellow and Black components. In contrast, most cameras represent colors in RGB color space.
• Device Independent Color Space: A color space where a specific tuple of values always means the same exact color as perceived by a human. This is in contrast to a device dependent color space such as RGB, where depending on the device, a specific tuple of values can be perceived as different colors by a human.

And more …

Much like typography, color management is an often underappreciated element of what makes a publication vibrant, interesting and fun to consume. Hopefully you now have a better sense of what color management entails and whether you care to spend more time learning about the ins and outs of it.