Color Spaces, or: I Just Want My Toast Done Right

You like toast. You like your toast golden brown and crispy on the outside. To do that, you set your toaster to 4. You do this every day. The results come out perfect and the same day after day. One day, you go to your friend’s house and you have a craving for toast. As usual, you set your toaster to 4. Ding! Oh no! Your toast got burnt to a crisp. Disappointed, you throw away your burnt toast and wonder why the toast didn’t come out the same way. You try again with a different number, hoping to get your perfect toast.

The CIE 1931 color space represents a slice of all the colors the eye can see. (Image: Wikipedia)

The CIE 1931 color space represents a slice of all the colors the eye can see. (Image: Wikipedia)

This problem sounds very familiar to some photographers. You send to your friend your image. Your friend says, it’s too purple, too dark, too whatever. But to you, the image looks perfect on your monitor. What can be done about this problem? The good news it is possible to ensure that the images appear the same with color management. It is important because when you share your work with others, you want them to be looking at the same thing you are. Otherwise, post processing is a waste.

In a properly managed workflow, an image will look the same from one device to the next. It will also be displayed using the correct colors. Once you do this, you can then deal with making the images look good. To have a color managed workflow, you will need to understand the basics of color spaces, tag your images, and make sure your monitors are calibrated and profiled. If the workflow is not color managed, there is no way of guaranteeing that the colors you’re seeing on your monitor are the colors you’re working with and sharing with others. You might as well be sharing junk images.

To begin to understand color management, you need to understand color spaces. A color space is an organized set of colors. For example, you may have seen this horseshoe shaped color space. The International Commission on Illumination (CIE) got together in 1931, did some science, produced that graph, and named it the CIE 1931 color space. It basically represents all the colors the human eye can see.

These are examples of device independent color spaces (and a device dependent color space for a printer). Note the relative sizes of the color spaces. A value of 255 green in ProPhoto RGB (the upper corner of the ProPhoto triangle) is a much more intense color than 255 green in Adobe RGB and sRGB. This means images that use the ProPhoto color space can represent more intense colors. Whether or not a monitor can display those colors is a different story. (Image: Wikipedia) 

These are examples of device independent color spaces (and a device dependent color space for a printer). Note the relative sizes of the color spaces. A value of 255 green in ProPhoto RGB (the upper corner of the ProPhoto triangle) is a much more intense color than 255 green in Adobe RGB and sRGB. This means images that use the ProPhoto color space can represent more intense colors. Whether or not a monitor can display those colors is a different story. (Image: Wikipedia) 

From this large color space, smaller color spaces are cut out for use in digital photography. You may have heard of some of them: sRGB, Adobe RGB, and ProPhoto RGB. Before we get into what the differences between those are, we need to understand that colors are represented by color coordinates, or RGB values. Usually, they are three numbers that represent the strength of the red, green, and blue colors. They range from 0 to 255, with 255 being the maximum value for that channel. One example might be (137, 207, 240). In sRGB, this color is baby blue. The color coordinates represent a particular color if it is associated with a color space. The same coordinates in Adobe RGB will not represent the same color. This is because Adobe RGB is a larger color space than sRGB. Likewise, the same coordinate in ProPhoto RGB will be a completely different color, also because it is a larger color space than sRGB. A color value with no color space is meaningless.

As a whole, these color spaces are known as device independent color spaces. These are color spaces that everyone agrees to use and computers also use them internally to store color data. Photoshop can be set to work with many different kinds of color spaces. A separate tutorial could be written on this subject.  Lightroom, by default, uses ProPhoto RGB as it is one of the largest color spaces available. (And no, you can't change it.) A good practice if your workflow uses both Lightroom and Photoshop is to set Photoshop to use ProPhoto as well for editing purposes. Once your editing software agrees to recognize and use color spaces, we need to ensure that we’re displaying them correctly.

This is where things get a little bit complicated. There are lots of different kinds of monitors. Some are built better than others and display more colors. This poses a problem for us photographers. Each monitor has its own set of colors that it can display. It would be naïve to assume that if we tell the monitor to display RGB coordinates in the image we’re working on, then we will get that color. If we display the values (137, 207, 240) on a few different monitors straight up, we would expect to get different colors. It’s very similar to the situation above with the device independent color spaces. To display the correct color, the RGB value in the image file needs to be converted from the internal working color space into the monitor color space, a device dependent color space. This color space is unique to each monitor.

The conversion between color spaces is handled by the Color Management Module (CMM). It handles the conversion of colors from one color space to another. If it knows what color a monitor produces given an input value, it can accurately map any color to that monitor. This monitor is said to be calibrated and profiled. On a day to day basis, the CMM does a wonderful job and you don’t need to worry about it. If all your monitors are calibrated and profiled, the same image looks the same on all the monitors. There are some important assumptions in this statement that we’ll get to in another article, but for now we’ll assume that you have good monitors that can display a good amount of colors. In a future article, we'll cover the steps required to calibrate and profile a monitor.

Check this box in Photoshop when exporting to embed a color profile to an image.

One common concern is why should we bother with calibrating our setup if other people are going to be viewing it on uncalibrated monitors? As the leaders of our craft, it is our responsibility to set the standards high. This minimizes the variation from artist to artist. That way we do not make the problem worse.

What this all means is that you need to tag your photos with the correct color profile. In order for the computer to know how to display an image, the image needs to have a color profile associated with it. When exporting, you need to check the option that embeds one of the common color profiles. If an image is untagged, the image may be displayed with the wrong colors. It’s like giving someone a cooking recipe without any units. 5 lemon juice, 4 water, and 2 sugar means nothing. If a photograph has data in the large ProPhoto RGB space, but is untagged, a browser may assume it is sRGB and the resulting image will appear very unsaturated.  

Lightroom has a color space option, as well. Look for this option regardless of what method you use to export.

Just think of a color space like units on numbers. Some units are bigger than others, others are smaller. The units can be converted from one unit to another. Numbers without units are meaningless and computers will have to guess what the units are (likely to be incorrect). With a good understanding of color spaces, you can start to understand what’s going on behind the scenes when you tag your photos. If in doubt, tag sRGB because the internet defaults to sRGB. In the next article, we’ll talk about calibration and profiling. This step ensures that what you are looking at is indeed what the data actually represents. 

TL:DR: TAG sRGB FOR WEB.

Tools

How to check if your browser is color managed:

Interactive webpage on the differences between tagged and untagged images

(Note that some of the pages lists Chrome as not color managed. As of the time of writing, Chrome is now color managed.)

Text and original site content copyright © 2016 Escaype. View our Terms of Service and Privacy Policy