From color checker to color grading and management for a web business

Color consistency is important in many webs with images or videos at the center of their business strategy, like ecommerce stores. Here we bring a short guide of good practices for a clean color management. From the use of color checker cards, to color grading and correction in calibrated screens, or a proper use of color profiles across the media processing pipeline, there are a number of measures that can be put in place to assure color quality.

Perceived color and encoded color

Back in 1931, the first colorimetry standard enabled the conversion of physical magnitudes of light into a numeric representation of perceived colors. It provided the mean to represent any color -light reaching the eye- by a simple array of three numbers. This was possible because humans with healthy color vision have three types of color detectors in the retina. As a result, any color that we perceive can be represented as the combination of three chromatic primaries.

Similarly to our retina, digital cameras have three types of light detectors (R, G, and B). They capture a trichromatic representation of the scene and code the three chromatic signals in a digital file. Displays in turn have three types of light emitters (R, G and B). Based on the three chromatic signals stored in a digital file, they drive the generation of light and recreate the image of a previously captured scene.

With this simple concept, camera and display provide a mean to recreate any scene before any eye, anytime, anywhere.

However, there are a number of physics, encoding, and perception issues that complicate this ideal picture, challenging the correspondence between perception and representation. That is, between the perceived color and the encoded color.

Color checker and white balance card

If we seek true and precise color fidelity we need to calibrate using a known color reference in our scene.

The three detectors of a camera sensor are very different from those in our retina (we don't have RGB sensors in the eye). While color perception is clearly non-linear with the intensity of light, camera sensors are typically linear with it. As any photographer knows well, different cameras have quite different sensors that yield different colors in the same conditions. That's because their R, G, and B are different.

In the end, this means that to provide accurate color representations, cameras should be calibrated. Calibration is done by shooting an image including a pattern of colors -a ColorChecker or a white balance card-. A color profile is then created that transforms the sensor response into a standard representation of color.

But this calibration should be done for each scene with different lighting.

In theory, any slight change of lighting -even due to a change in perspective- means that the scene has changed as well. Fortunately, the requirements of calibration can be relaxed in most cases and digital editing provides means to correct significant deviations.

Color grading and correction

The use of a color reference can be a great solution to ensure color fidelity in constrained scenarios like in studio and product photography. However perception is still trickier, and makes necessary a photographer checking and adjusting the color in the general case.

Our eyes and brain are constantly adapting to the light level and the composition of each specific cene. They do it regardless true values of physical color. This assures for instance color constancy under different lighting conditions -we see a red car as red both in the morning and in the evening-. The digital RGB values of A and B in this classic illusion are exactly the same. However, we see A darker than B. Just because of the composition.

Such a tricky perception is a powerful reason for many photographers to correct colors by hand rather than using a calibrated scene reference.

Moreover, creative goals usually require color grading by an expert hand. While we may want to keep the color of clothes realistic, we may also want to change the scene to evoke a mood and a style.

After color correction and grading, we can be confident about the correspondence between the color encoded and the color we want to convey in our pictures.

Screen color calibration

Displays also need calibration. Innacuracies in the amount of light emitted will have an impact on the color displayed. Professionals mitigate this problem calibrating their screens from time to time. The light emitted for some primaries is checked and a display color profile is created. This profile is used to transform the stored pixel values to actual light with the intended color.

It's important to calibrate the displays used for color correction and grading and in general for any image processing operations. Otherwise, we may end with colors that only show well in our idiosyncratic display. If multiple people work with the same images using uncalibrated screens, things may get messed.

Color management

It should be clear at this point that we need to manage color throughout our image processing and delivery pipeline. Otherwise we risk consistency and all our hard work on color correction and grading.

To manage color we need a common color encoding in which RGB values have a standard meaning. That is, we need a color space. Since different use cases raise different gamut and dynamic range requirements, different color spaces have been developed. Three important examples of use cases are:

  • Consumer display technology
  • Printing of graphic designs and photos
  • 4K HDR video and cinema

Each case is addressed with different color spaces. They cover a gamut using specific chromatic primaries and gamma values. This in turn defines a color profile that can be used to interpret the stored RGB values in a file. Let's see the main color spaces created for the above cases.

Color spaces and profiles

sRGB

This is the color space universally supported throughout the web. Any image -or web element- without a color profile will be deemed by any web browser as coded in sRGB.

It was created in 1996 by HP and Microsoft, combining the chromatic primaries of BT.709 standard for video with a gamma value suited to CRT displays. Coincidentally, this gamma is also suited to average human perception, giving sRGB an efficiency advantage in the use of the dynamic range.

Since the big majority of displays are nearly sRGB capable, it's the safest color profile for the web. If we stick to sRGB throughout all our image processing pipeline we'll get the highest consistency in our colors. We'll minimise the chance of unexpected changes across the whole range of our users displays.

The inconvenience of sRGB is a more limited gamut compared to more and more wide gamut display models -in smartphones, tablets, and computers- available in the market. A big amount of real world colors lay outside the sRGB gamut. This means for instance that a fashion ecommerce shows clothes with untrue colors. But since it's still the most used color space across the internet, we can see it as a baked-in color shift already internalized by users as part of their online experience.

Adobe RGB

Released by Adobe in 1998, it's been the color space of choice in the graphics industry during the last two decades. Its wider gamut -compared to sRGB- covers much better the gamut relevant in the production of prints. We'll need a professional calibrated wide gamut display capable of Adobe RGB to be able to use it.

It's important to be aware that this color profile only makes sense for images intended to be printed, but not for web images.

Its use in a pure web workflow is risky and has no benefit. It may produce unexpected results, specially in the presence of highly saturated tones. Problems may get even worse in pictures processed using an Adobe ProPhoto profile, with an even larger gamut.

P3

The P3 (or DCI-P3) color space specification is aimed at high quality streaming for 4K HDR capable displays. It spans a wide gamut, including vivid colors that aren't available in sRGB, especially in the green and red ends. It makes a significant impact on user experience and color fidelity. There's also Rec. 2020 (UHDTV), an specification spanning a gamut wider than P3, but even for HDR TVs this standard remains futuristic in a web context.

The P3 color space -and a variant called Display P3- is supported by Apple in their wide gamut displays since 2016. Other brands recently embracing wide gamut (Samsung, OnePlus, Asus) have also adopted P3.

With the move towards wide gamut displays, it has a chance to replace sRGB in the medium term.

Comparison of gamuts

Provided that we have a wide gamut display and we enjoy healthy color vision, a visual check is the best way to understand the differences among color profiles. This wide gamut images -collected to compare color spaces- allow a quick initial assessment. We may also shoot some pictures of things with vivid greens and reds in RAW format and export them to jpg with different color profiles. We should easily see the differences.

Good practices for color consistency

Unless we are determined to pioneer the wide gamut trend in the web -taking the associated risks and extra work-, our color management policy should enforce the sRGB profile at every step of our image processing and delivery pipeline.

If we observe the sRGB rule also in the creation and optimization of image derivatives, the only threat to color quality will come from potential compression artifacts related to a low quality factor or to chroma subsampling.

Good practices with colors in the production of images and the optimization of videos for web include a proper color management and a number of color measurements like camera calibration using a color checker, or screen color calibration. Any color correction and color grading, any image retouching should be done without leaving the sRGB space in a color calibrated display.