Colour management, part 2

Previously, we discussed how colour spaces are similar to units of measurement. While “50” has no absolute physical characteristic, “50cm” does. Combining a value and a unit of measurement gives it more meaning, and removes ambiguity. Colour spaces are a bit more complex than units of length, but the analogy can be used to understand many aspects of colour management.

However, rather than comparing colour spaces to units of measurement, let’s imagine them as a ruler. A ruler with a length, and a number of notches running along it.

A ruler that shows values from 0 to 1

Gamut #

A colour space’s gamut defines the range of colours that can be represented by that colour space. It defines the extremities of how strong and pure colours can be.

In our analogy, gamut is like the ruler’s length. Say we have two rulers that represent two different colour spaces — one that’s 1 foot long in imperial units, and another that’s 1 metre long in SI units.

A 1 metre long ruler next to a 1 foot long ruler

As you can see in the image above, both rulers have a different length. Also, both rulers have the same number of notches from 0 to 1, yet the physical spacing of the notches is very different. A value of 1 on the metric ruler is a very different point in space when compared to a value of 1 on the imperial ruler.

Wider gamuts are like larger rulers.

While their relative scales aren’t correct, you could consider the 1 foot ruler to be sRGB (a standard gamut colour space) and the 1 metre ruler to be Display P3 (a wide gamut colour space). The largest value possible on the 1 foot ruler is only part way along the 1 metre ruler. This is true when converting the purest and strongest sRGB colours to Display P3 as well — #ff0000 in sRGB is only #ea3323 in Display P3. Full strength red in sRGB is only part way along the “strong red” ruler in Display P3.

Given the same number of notches, a longer ruler has less physical precision. The same is true for colour spaces — wider gamut colour spaces stretch colour values over a larger space, so they are more prone to things like gradient banding. Wider gamut colour spaces and colour space conversion can be helped a lot by increased colour precision.

Colour precision #

When a colour value is stored by a computer, it has an inherent precision based on the method used to store the number. Using our ruler analogy this translates to the amount of notches, if you assume a value must fall on a notch. More notches means more precision.

Two rulers, one showing more precision

If you’re familiar with HEX CSS colours, you’ll know #ff0000 is the brightest pure red possible, and #fe0000 is the second brightest pure red. There is nothing in between #ff0000 and #fe0000. The red component in a HEX CSS colour goes from 00 to ff in hexadecimal, or 0 to 255 when represented as decimal numbers. There are only 256 possible steps. If you need a value to be 254.5, you’re out of luck — it must be 254 or 255. The value has to be rounded up or down.

That may seem like a lot of steps, but when it comes to drawing smooth gradients, colour space conversion, and other processing, it doesn’t take much to cause rounding errors that can easily be seen by the naked eye. This is especially true when multiple processing steps are required, leading to cumulative errors, where the error might be far larger than a half precision step.

Rounding errors usually end up as banding, posterisation, or pronounced noise. Wide gamut displays exacerbate the need for higher precision — if our ruler becomes longer, the number of notches you need to create smooth gradients increases.

With this in mind, it seems likely we won’t use HEX values for colours as commonly in the future — they are inherently low precision, only allowing 8 bits per channel (256 steps for each colour channel). Higher precision floating point values make more sense. As an added bonus, floating point numbers can extend beyond the edge of a colour space’s gamut. The brightest red in sRGB may be written as “1.0 0 0”, and a red outside sRGB’s gamut might be written as “1.2 0 0”, if the colour space allows it.

Colour precision isn’t defined as part of a colour space. It is an implementation detail that’s left up to the rendering engine or design tool. This means different tools take a different amount of care, and the likelihood of problems is dictated by what you’re using as well as how you’re using it.

Gamma #

A colour space’s gamma (different to gamut) could be considered the spacing of the notches along the ruler. Evenly spaced notches are called linear gamma.

Unlike most rulers, the notches aren’t always evenly spaced. It is actually more common for them to be unevenly spaced. sRGB uses a non-linear gamma curve that’s like the image below. Other common colour spaces also use non-linear gamma curves. Display P3’s gamma curve is identical to sRGB’s gamma curve.

A ruler showing the notches spaced non-linearly

Note how there’s more notches on the left side of the ruler. This increases the precision in darker colours, where human perception is more sensitive.

Gamma is usually described as an exponential curve, where a value of 1.0 is linear (evenly spaced notches), and higher values mean there’s more precision for darker colours and less precision for lighter colours. The sRGB gamma curve is a little more complex than that — there’s short linear section, then an exponential curve. sRGB is commonly known as having a gamma of 2.2, but the exponential section is actually 2.4 (the average gamma is 2.2).

You don’t need to understand the sRGB gamma curve to understand colour management though. It’s just an interesting aside, and something to consider if you go digging through colour profiles with Apple’s ColorSync Utility. The important thing to remember is that gamma is the spacing of the notches in the ruler, and that it’s common for the spacing to be non-linear.

Colour space conversion #

We’ve now covered enough of the basics to move on to colour space conversion, using our ruler analogy. Given a source colour with a colour space, and a destination colour space, what should our destination colour value be? Put another way, with two rulers side by side and a value on one of the rulers, what’s the value on the other ruler?

Converting a value from one ruler to another, with rounding

The value on the source ruler maps to the closest notch on the destination ruler, as shown above. If the value on the source ruler is outside what fits into the destination, clipping will occur, as shown below.

Converting a value from one ruler to another, with clipping

And that’s it! That’s fundamentally how colour space conversion works, using a simplified analogy. In part 3, we’ll provide the colour management settings required for screen design, for some popular design tools.

Continue reading: Colour management, part 3

Published 19 December 2017.