# Photopea - Color Spaces

Learn Photopea Blog | Learn | Tutorials | Templates | API | |

# Color Spaces

Have you ever walked into a TV store, with many TVs showing the same video? And the video looked a bit different (brighter, more yellow-ish, various contrast) on each TV?

Capturing devices (digital cameras, scanners) and displaying devices (monitors, printers) have various technical properties. Color Spaces provide the ability to make colors look always the same, no matter what capturing or displaying device has been used.

## Absolute colors

To compare, which object is heavier in a real world, we need to give each object a number: weight (measure it). Two objects have the same weight, if that number is the same for both of them. There are many units of weight (grams, pounds, ounces), which can be converted, one unit to another.

To compare colors in a real world, each color should be given a number, too. Two colors are the same, if that number is the same for both of them. There are two popular units (color spaces), that are used in practice: CIELAB and CIEXYZ.

While Grams (unit of weight) consist of one number (e.g. 150 grams), CIELAB (unit of color) consists of three numbers (e.g. CIELAB 0.5, 0.7, 0.1). These numbers are called channels or components.

Let's say we have a square hole in a wall, and there is an apple on the other side, with a blue cloth behind it. We take a picture of it, print it, and put that printed picture behind a second hole in a wall (illuminated by a proper light). We also display the same picture on an LCD monitor, which we put behind a third hole.

If the digital camera can store real colors into correct CIELAB values, and both the printer and the monitor can correctly reproduce any CIELAB values, we should not be able to distinguish (with our eyes), which hole contains a real apple, which one is the monitor, and which one is the ink on a paper.

## Device-specific colors

First monitors created colors by combining three lights, usually referred to as Red, Green and Blue (RGB) (note, that "Red" in terms of color is ambiguous, just like "Heavy" in terms of weight; one would need to specify a CIELAB value to be precise). It was natural to store a color digitally as three numbers: intensities of Red, Green and Blue for that specific monitor. Such color always looked the same on all monitors of that specific brand. But these values had no relation to CIELAB.

More monitor manufacturers appeared, each of them using materials with different physical properties. The RGB color value for one monitor looked different on another brand of monitor. Finally, a proper system with three components was created, called Standard RGB, or sRGB. There is an exact formula, how to convert between sRGB and CIELAB, so each sRGB color actually corresponds to a real-world (unambiguous) CIELAB color.

All images were stored in sRGB color space. Each monitor offered many settings, which allowed people to "calibrate" the monitor, until it displayed sRGB values correctly.

There was the same problem with printers. They usually create colors by mixing four inks, referred to as Cyan, Magenta, Yellow and Black (CMYK). A specific ratio of these inks, that was printed by one printer, could look different on another printer having inks with different chemical properties. Some printers could even use five or more inks. Some printers could produce colors, that other printers could not produce.

## Color Profiles

Let's say, that an absolute CIELAB color [0.3, 0.8, 0.1] can be displayed with RGB signals [224,107,158] on a monitor A, and with RGB signals [231,99,161] on a monitor B. We can say, that each monitor has its own color space, and it can convert any value from CIELAB into its own space. Instead of storing a color digitally as CIELAB, we can store it as any set of numbers, as long as we provide a mechanism, how to convert these numbers into CIELAB.

All problems with device-specific colors have been solved by ICC profiles. An ICC profile (for a specific color space X) is a set of instructions, how to convert values from the color space X into CIELAB, and back. These instructions are stored in a special file: ICC file (e.g. "Canon_printer_123.icc"). Since the ICC profile describes the conversion between the space X and CIELAB, it fully describes the color space X.

*** Analogy: We could create a "weight space" of "bukalas". A "weight profile" would say, that "one bukala is 1200 grams". It lets us convert between "bukalas" and grams, so it fully describes what a "bukala" is.

This means, that each digital image (JPG, PNG, PDF) has to be equippeed with an ICC profile (so that we are able to convert its color values into CIELAB), and each printer has to be equipped with an ICC profile (so it can convert absolute CIELAB colors into its own four values of ink).

Without ICC profiles, each camera would probably store colors in its own color space. Each printer and monitor would have to be equipped with special configurations for images of each model of the camera, and update these configurations, as new cameras appear on the market. I.e. each image-displaying device would have to be aware of all existing image-capturing devices, and make special configurations for their images.

With ICC profiles, we only specify, how to convert between "our own" device-specific colors, and "common" CIELAB colors. When each party can supply such ICC profile, the result is the same, as if we used the CIELAB space everywhere.

Usually, the printing software can detect the ICC profile of digital images, and convert them into the printers profile automatically. Also, an image viewer converts colors of the image into CIELAB (using the ICC profile), and CIELAB to sRGB, while a graphics driver takes sRGB colors and converts them into a color space of the monitor (using the ICC profile supplied by the manufacturer of the monitor). We don't deal with any ICC files in practice, the computer (software) takes care of them automatically.

When we have an image without an ICC profile, "guessing" its color space is very dangerous. It is like having some numbers specifying weights, and guessing, if they are grams or ounces.

Also, just saying, that an image (file) is in RGB, or in CMYK, makes no sense. The value (255,0,0) could be Red, as well as Green. Unless the color space is specified (with an ICC file), we can not be sure, what color is meant by the values inside a file.

The sRGB space is very popular for storing digital images. Authors (of images) usually only specify, that the image is in sRGB, without attaching a specific ICC file to it. Converting sRGB to CIELAB is very simple, and the formula is usually built into a graphic software.

sRGB is also used on the Web: when we specify `#ff00ff;` or `rgb(255,0,255)` in CSS, browsers expect these values to be in sRGB space.

## Comments

Do you need help? Ask us at our Reddit!