Colour management, part 1

If someone asked you to build a coffee table and they specified the legs as a height of 50, what do you think that would mean? 50 kilometres? 50 feet? 50 inches? 50 millimetres? Probably 50 centimetres. You can’t know for sure, but you can guess, based on the table’s intended use — 50 kilometres, 50 feet, and 50 inches are way too big for a coffee table, and 50 millimetres is way too small.

A diagram of a coffee table

It would be better if they specified the measurement system. “50” by itself is a meaningless value, but “50cm” provides the absolute physical characteristics of the table legs.

This article is intended to be an introduction to colour management for software designers and developers. If you understood the example above, then congratulations, you now understand the most important colour management concept — colour values alone are not enough to describe a colour. You need a colour value and a description of the space it exists in.

A colour that’s all red, no green, no blue and fully opaque can be written in many formats. On the web, it could be #ff0000 or rgb(255, 0, 0). On iOS, it could be UIColor(red:1, green:0, blue:0, alpha:1). And, on Android it could be Color.valueOf(0xffff0000). They’re all various forms of the same thing — full strength red, no green, and no blue.

However, the values are similar to our “50” above — they have no unit of measure. “Full strength red” is meaningless. All what red? Different displays have different maximum intensities for red. Some can produce more vibrant and deeper reds than others. If you want the red to look similar on different displays, we need to know the measurement of units. We need the equivalent of our “cm” above, attached to the colour to have a sense of what this red corresponds to in the visible spectrum of light.

Colour spaces #

Colour spaces allow us to map absolute colours in the physical world, to a measurement system specific to a device, such as a display. Have you heard of “sRGB”, “Adobe RGB”, “Display P3”, or “DCI-P3”? Those are colour spaces. They’re similar to our “cm” above. sRGB is the standard colour space for many devices. Adobe RGB, Display P3, and DCI-P3 are wider gamut colour spaces, that are now found on newer or more expensive devices.

cm is like sRGB

Colour spaces are more complex than measurement units. They don’t just define a scale, they set a white point, range and scale for red, green and blue in the visible spectrum, as well as other various properties. There’s many ways to visualise colour profiles, but using a 3D hull is a common and useful way to display them.

Here’s a comparison of sRGB and Display P3. sRGB displays less colours than Display P3, and when they’re compared this way, it’s possible to see how sRGB fits inside Display P3.

sRGB is shown in colour below. Display P3 is the larger, white ghosted shape.

sRGB vs Display P3 gamut

Any colour that is described as sRGB can also be described as Display P3. #ff0000 in sRGB is #ea3323 in Display P3 (that value might be slightly different, depending on the conversion method used, but the broader point stands).

However, there are some colours in the Display P3 space that are not in the sRGB space. Display P3 is wider gamut and it can represent more, especially deep reds and greens. #ff0000 in Display P3 can not be described as an sRGB HEX value, because it is out of the sRGB range.

I am doing my best to stick to the basics, but I hope the 3D plot above demonstrates an important point — when you assign a colour profile to a colour value, it becomes absolute, and it has more meaning. It gives the device displaying it everything needed to try to reproduce the colour as accurately as possible.

sRGB as the standard #

I said the values above had no measurement of units, or no colour space. That’s not strictly true. In many cases, there is a default colour space that is assumed if no colour space is provided.

On the web, sRGB is the standard colour space for CSS and SVG. This gets a little more complex when you take browser behaviour into consideration, but things are improving. Future specs will likely allow colours to use other colour spaces, too. Display P3 CSS colours might be defined as color(p3 1.0 0 0).

On iOS and Android, sRGB is also the default, but both support wider gamut colours and colour spaces. On macOS, sRGB is sort of the default (the situation is a bit more complex due to some legacy issues).

Images and video #

So far, we’ve been discussing single colour values, but the same concepts work for images and videos. In many situations, images and videos should have embedded colour profiles. If they don’t, sRGB is often assumed. User interface images often omit embedded colour profiles to save on disk space, and because the behaviour with no profile is known.

A wide gamut future #

In the past, designers and developers have been able to get by without much knowledge on how colour management works, but that will not be the case in the future. The proliferation of wide gamut displays means colour management errors are now more severe, and more common. If you own a new MacBook Pro or iMac and colours in certain apps look oversaturated, this is probably why.

If you’re working on web, iOS and Android apps, it is now essential to understand the colour space a project is in, and set up your design and development environment to suit. Chances are you’re working in sRGB, but it’s important that’s an active choice. It’s important you’re aware if and when conversion happens.

If colours are chosen in one colour space, then assigned a different colour space rather than being converted, they will look incorrect. This happens often when using a tool that isn’t colour managed on a wide gamut display, then copying the values across to the project, where they are assumed to be sRGB. If this happens, colours will look vivid in the design tool, and dull in the running app.

Pixar in a Box #

Khan Academy’s Pixar in a Box series features an Introduction to Gamuts video that does a great job explaining colour spaces, and includes some tests if you’d like to check your knowledge on the topic.

If you didn’t previously understand colour management, I hope this article has helped. If you’re still confused, feel free to ask me questions. Next up, we’ll go a little deeper and tackle gamma, rounding errors and how they relate to colour management.

Continue reading: Colour management, part 2

Published 30 October 2017.