Colour Spaces

Colour spaces are often used as a way of describing the range of colours that a screen is able to display. Knowing which colour space you are working with is important for a number of reasons, and is an important part of ensuring that your prints more accurately reflect what you are looking at on a screen.

We are able to see a large range of colours as part of the visible spectrum of light. Our digital devices are also able to display a wide range (gamut) of colour, but not as much as we are able to see. Screens can have a different colour gamut, with the higher end monitors displaying a larger range than others.

Charting a colour space

A colour space can be simplified and represented as a 2D image with white light at it’s centre and varying amounts of Red, Green and Blue radiating away from it.

In the section of Light vs Ink, we explained how the pixels that make up the images we see on our screens are made from a series of Red, Green and Blue light sources. The amount of each colour, for each pixel is described as between 0 and 255, where 0 is no light of that colour and 255 would be the most.

If an image pixel was made up of just the ‘Greenest’ Green that the screen could display, then we could describe this as being 0,255,0. Green is set to the maximum, with Red and Blue being off for that image pixel. For this particular screen, 255 is the highest value Green can be set to, but what if a different screen could display a larger range of Greens ?

Adobe RGB and sRGB colour spaces

Importance of knowing the colour space

In the sRGB colour space, 255 corresponds to the largest value for Green, but in a wider space such as Adobe RGB, the same Green hue would need to be represented by a lower value than 255 as it can display Greens that are not visible in the sRGB space.

If we did not know the working colour space, then the RGB values could correspond to different colours. Viewing a file that was saved in the Adobe RGB colour space, could result in very different colours if we mistakenly viewed it in a different colour space.

Correct colour space

In the examples above, one image is displayed as being in the correct colour space. In the second image, the file was edited using the AdobeRGB colour space but was incorrectly assigned as being in the sRGB space when viewed in a web browser expecting the sRGB space. The colour values in the larger AdobeRGB colour space look flat and dull when incorrectly assigned to the smaller sRGB colour space. The green colour seen in the first picture is more saturated and is present in the sRGB colour space as well as the AdobeRGB space, but the value to represent it is a lower number in AdobeRGB than sRGB as it is a larger space overall. The lower value needed to be converted to the correct higher value for the sRGB colour space before exporting the image for the web. Working in the AdobeRGB space preserves more colours and is a perfectly good thing to do, you just need to ensure when other people use the file it is either set to the space their software is expecting or has the colour space used embedded in the file and their software is able to see this.

It is important then to know which space is being used, as well as setting some basic standards as a lowest common denominator, so that devices can all display the colours in a similar fashion.

For web-based applications, the sRGB colour space was chosen as the standard. This is the default colour space to work in and ensures that the colours described by different RGB values all correspond to the same colours between different devices. You can edit in a larger space, but then ensure you save to sRGB when you export the file to the web.

Beyond the sRGB colour space 

Whereas the majority of computer monitors and laptop screens are able to display nearly 100% of the sRGB colour space or large portion of it, we are starting to see more screens emerge being able to display a wider space such as P3 or even the Adobe RGB colour space. So when would it be helpful to work in these larger spaces when most people will only be able to work within the sRGB colour space?

Our camera sensors are able to capture a very wide colour space, so having a monitor that can display these additional colours can be an advantage. Colours that are out of gamut for the sRGB colour space, have to be worked back into the smaller space. The way devices achieve this differs, so the only true way of accurately representing the colour as it was captured, is to use a wider colour space, and a display that can also utilize this space would be an advantage. This can be especially important when working with higher end printers that are able to achieve a wide range of colours in print as well.

Applications such as Adobe Photoshop allow you to define which colour space you wish to work in, as well as output your work to. It is important to know what colour space to choose to output to so as to ensure accurate colour representation and consistency across devices. Unless asked to output to another space, sRGB would be the best choice for our JPEG image files, especially of course for the web that is based upon the sRGB space.

You can plot the range of colours that a printer can reproduce on the same chart as the light colour spaces. Doing so gives us insight into whether the colours we can see on our screens can be reproduced by our printers. With Light and Ink being very different ways of representing colours, screens can display colours that a printer is unable to reproduce with ink and conversely, some printers can generate colours on paper that you cannot display in some light colour spaces.

Summary

We can define the range of colours that different devices are able to work in by using colour spaces. Knowing which colour space an image is using, is important to ensure accurate colour accuracy between devices.

sRGB is the default colour space for web applications, as well as being the space that most monitors operate within. A wider colour space allows us to access a broader range of colours. This may be beneficial with higher end printers.

Ensuring that our images are displayed using the correct colour space is an important step towards getting our prints to more accurately reflect the colours we see on our screens.