What are Color Spaces, Color Profiles and Gamma Correction?

From Color Models to Color Spaces and Profiles - Part 2

What are color models? How important is it to work in the right color space? And color profiles? Or gamma correction? What exactly do these terms mean and how can you use them to your advantage as a professional to deliver the best results with your work? In part one I explained to you what color models are. In this second and last part of this two-part blog, it's time to come to the core: color spaces, color profiles and gamma correction.

This part continues where we left off part one, but is somewhat more technical. So if you haven't read the first part yet, I advise you to read it first. You can find it here. Concepts such as color spaces, color profiles and gamma correction can be rather confusing, complex and intimidating at first. I therefore try to explain it as well as possible and have made some interactives for you to support the text and give you more insight. This article contains a lot of information, so please put it away and come back later if it gets too much for you or just read it a few times. A good understanding of color spaces and profiles is just too important for professionals to skip the theory!

Even though there are different color spaces and color profiles working with other color models, such as CMYK, in this blog I only write about color spaces and color profiles that work with the RGB color model, because this is the model that is used on the internet, in games and videos.

Okay, let's go to the deep!

Color models are relative

In the previous part I explained to you what color models are, in particular the RGB Color Model which is defined with the three colors red, green and blue.

In computer graphics, the RGB Color Model is used to describe colors on the screen. For each color channel (red, green or blue) a value is given to how much of that primary color has to add to the mix of a specific mixing color. Let's say these values run at 8 bit colors, so from 0 to 255. The red part of the mixing color can thus be expressed in 256 steps where 0 stands for no mixing and 255 for the full color. The value 255 is the reddest red on a red channel, the greenest green in green and the bluest blue in the blue channel.

But a Color Model does not describe how red that reddest red, greenest green and bluest blue is. It is not at all known how these primary colors look like in their purest form. We humans tend to think that we know what a pure color, like red, looks like, and that we know what white is, but there are a lot of different gradations of red that we all can describe as pure red and there are also a lot of different variations of white.

Even though a digital color value on the internet, such as #FF0000 for the reddest red, seems to be absolutely absolute, it is not. It is simply not known how red that reddest red looks like.

We therefore call a Color Model relative, because there is no absolute description of the colors. An image of which only a Color Model is known was previously shown differently on different monitors, because not every monitor and display device uses the same colors for pure red, pure green and pure blue.

Color spaces to the rescue!

Especially with the arrival of the internet there was an increasing need to make agreements about how colors should look exactly, independent of which device an image is displayed on. So that images can be exchanged via the internet and look the same on different computers as much as possible.

Such a 'color definition' is called a Color Space. An RGB Color Space mainly defines:

• That the RGB color model is used
• What we call pure red, pure green, pure blue and white
• What the gamma transfer function is

The first bullet we have gone through in the first blog and I will come back to the last one later in this blog. At bullet number two you see that all color values of the RGB Color Model in a Color Space get an exact description that describes exactly how a device like a monitor should display a color. That's why we call color spaces absolute.

Define colors

But how can we absolutely describe these colors? We need a reference framework for this. And that frame of reference is our own view; the human visual spectrum.

In the 1920s, W. David Wright and John Guild independently performed a number of experiments to find out what colors people can distinguish and how large this range is. In short, these results ultimately yield a result that indicates the average color perception of us humans. I write perception, because as humans we do not actually perceive all colors, our brain also complements some of colors itself.

What has come out of the test is an average visual spectrum, so there are people who can perceive more colors. Like the tetra chromates I described in part one. And there are also people seeing fewer colors, such as people who are bothered by color blindness.

This average human color perception has laid the foundation for the CIEXYZ Color Space that we still use today as a reference for defining the primary colors of all our RGB color spaces. We call this a Color Space, because it really is a 3D space. X, Y and Z therefore represent the three axes with which each color can be defined.

This definition was established in 1931 by CIE (Commission Internationale de l'Éclairage, or in English IEC for International Electrotechnical Commision) and has the name CIE1931.

There are also other and improved definitions, such as CIELUV and CIELAB, but I leave this out here for simplicity and because CIE1931 is still probably the most used.

CIE1931

CIE1931 is the reference we use to define the colors in all our RGB color spaces. So to describe how pure red, pure green and pure blue should look like and how white looks for the color space in question. We describe these colors by their X, Y and Z coordinates. And they directly correspond with a wavelength.

In the following interactive some known color spaces are displayed inside the CIEXYZ color space. Remember that X, Y and Z do not represent R, G and B. X, Y and Z are mathematically derived values that prevent negative values. I will come back later on the color spaces themselves. Clicking on the arrows you can navigate to the next and previous color spaces and by clicking and dragging on the 3D space you can view the color spaces from all sides.

The CIExy Chromaticity Diagram

Absolute color values can thus be described as 3D coordinates within the CIEXYZ space. But for us people reading a Color Space in 3D is not that easy. For that reason, CIE has come up with a way to show the pure colors in a 2D diagram. We call that diagram the CIExy Chromaticity Diagram. Here only the pure color values are displayed, so the brightness is omitted. For describing colors in a color space that brightness is fortunately not relevant. Below you can see what this Chromaticity Diagram looks like:

In the diagram you can see that again there is an x and y axis, but beware, because these are now written with lowercase x and y and are not the same as the uppercase X, Y and Z axes that we saw earlier in CIEXYZ.

Real and imaginary colors

In the diagram you see a figure in the form of a horseshoe with different colors inside. This shape determines the range of human color perception that serves as a reference for all possible colors. Everything that lies within this horseshoe can therefore, by us people, be perceived (on average). We call these colors 'real' colors. What is beyond this area we can't perceive and so we call these 'imaginary' or 'impossible' colors.

The values mentioned around the horseshoe shape are the wavelengths of the light. I leave that aside for simplicity in this blog.

We now have our reference to define colors exactly and are even able to do this comfortably in 2D space where negative values can't even occur!

Mixing colors in the CIExy Diagram

Within this horseshoe we therefore find all possible colors that we as humans can observe. Now it is great that we can draw lines within this area where the center of a line is always the mixing color of the colors at both endpoints of the line!

In the next interactive you can see this clearly. You are able to draw lines within the horseshoe and you can always see the mixing color in the center circle of a line. But please note that you remain within the triangle that I have drawn inside the hoof. If you come outside of that triangle when drawing a line, you end up in an area of ​​colors that your browser can not display and many monitors can't either. That triangle indicates the border of the sRGB color space. You can see colors outside that triangle, but these are not the real colors on those locations, because it simply can't be displayed by your browser. More on that later, now is the time to mix some colors!

Draw lines by clicking inside the hoof and dragging a line to the end point while your pointer is resting on the screen. You can also move the points to a new location or shift the center to make the mixing color more going towards color A or B. And don't go outside the horse shoe!

Color Gamut

Now that we have a reference for the color range we can distinguish as people, we are now also able to place the primary colors of a Color Space within this area. There are no monitors yet to display all colors that we humans can see. And such a monitor would also be unaffordable.

If we then connect the locations for the primaries red, green and blue to each other, we get a triangle in the diagram that indicates the range of colors for that Color Space. The larger the triangle, the larger the Color Gamut. So Color gamut is the size of the range of colors in a Color Space. A larger color gamut is therefore a larger range of colors in a Color Space.

White reference

In order to be an absolute Color Space, apart from exact locations of the primary colors, we also need a definition of what we call white.

There are a number of standardized white points (standard illuminants) that are used in well-known color spaces. These start with a letter, often followed by a number. The letter indicates the category where this white belongs to. The 'D' for example stands for 'Daylight', or how white in natural daylight looks like. White in daylight is determined in a number of places in the world and at different times a day. And so there are a number of different 'D'-numbers for white that are all white, but slightly different. For example, the white D65 stands for afternoon daylight.

Within the D category, D65, D50 and D60 are important players that we use in many RGB color spaces. In the diagram you can see where the white points D50 and D65 are located in the visual spectrum.

Our perception of light

Contrary to what you might expect, people do not perceive luminance levels one on one with their eyes as it is actually emitted.

The actual luminance of light is not observed by us linearly, but with a curve. You can see that clearly in this graph. At a light intensity of 12%, so still fairly dark, we do not observe 12%, but about 38% light! That is about three times as bright as the actual luminance!

The greater the light intensity, the smaller the difference between perception and actual luminance. This means that we perceive more contrast in the dark and less in light regions. That will probably have to do with us being able to survive in the dark.

Cameras and monitors

But what about the relationship between actual luminance and the voltage that the camera sensors emit from the light? And what is the relationship between the input voltage of a monitor and the light output at different voltages?

A camera generally converts luminance linearly into voltage, so if more light falls on the sensor, it is also converted linearly into a higher output voltage.

Also with modern flat screen monitors, the conversion between input voltage and output luminance is linear. If you offer more voltage, more light is emitted linearly.

But that wasn't the case with old CRT screens. CRT screens had an electron gun and such a gun is technically unable to linearly convert voltages to luminance. The ratio between incoming voltage and light output was non-linear, in the form of a curve. The shape of that curve can be caught by a single number: gamma. In old CRT computer monitors, the gamma value of the display tube was often 2.5.

The remarkable thing is that the shape of this curve is almost the opposite of the curve of the human perception of light as we saw earlier. That is really pure coincidence. But we prefer a linear relation between input voltage and light output at a monitor. So we will have to correct this curve to a straight line; we call that gamma correction.

Among others, in order to remain compatible with old CRT screens, modern monitors such as flat screens now emulate the gamma curve of old CRT monitors using electronics. So that gamma-correction is also required for flat screens.

Gamma-correction

Now that we know the gamma value of a screen (in the case of old CRT display often 2.5) we can make the curve linear by simply said adding an inverse curve to it. We call this the gamma transfer function.

It is not necessary for designers to know exactly how this happens underwater, but it is important to realize when this is necessary and when it isn't and how much gamma should then be corrected when needed. Otherwise your graphic elements and photos look different than they are meant to be.

In the following illustration, the middle graph shows the display gamma, i.e. the variation between input voltage and output luminance of a display. We would like to compensate for this display-gamma curve so that, as you can see in the graph on the right, it is linear again, so a straight line. We do this by (simply said) not presenting images directly linear to the monitor, but by first running all pixels through a gamma transfer function that usually stores the corrected value in a graphic file, such as jpeg. You can see this gamma correction curve in the graph on the left. The transfer function is (simplify said) the reverse of the display gamma, i.e. 1 divided by the gamma value.

Subjective correction

But we are not there yet. Because when images and animations are shown on monitors this way, we do not find them as pleasant to watch as people. This has to do with, among other things, flair (glow) of monitors that also influences the brightness of the image. If we are doing gamma correction, we might as well correct this too. We call this subjective correction.

Now you might expect that the electronics of a monitor would arrange this for us, but because we already have to apply a gamma correction ourselves at file level, it has been decided that this correction can easily be taken directly into it. Yes, light and color are ultimately quite complex subjects!

Nevertheless, they have fortunately made this easy for us, so that we do not have to count with this. This correction has already been calculated in the gamma value monitor manufacturers supply. In the case of the old CRT screen, therefore, the physical gamma value (2.5) wasn't communicated to us, but the corrected value 2.2 instead. If we now apply a gamma correction of (simply put) 1 divided by 2.2, that is 0.45, the subjective correction is also taken into account. Hurray, another thing solved!

What if something is out of balance with gamma?

It is important to understand what you are doing when it comes to color spaces and gamma correction. If you have an error in the gamma chain, your images look too light or too dark and there are visible errors in the image. Therefore, now an interactive to better understand gamma correction. And to see what wrong settings do with your graphics.

In the next interactive on the right you see a photo that is divided into two halves. In the upper/left half you see the original photo. On the right/bottom it shows how it is displayed with the gamma settings you have applied. With the arrows above and below the charts you can influence the system. In the middle large graph you can switch the monitor from linear (gamma = 1) to non-linear (gamma is greater than 1, in this example 2.2). Use the arrows above and below the first large graph to determine whether or not you apply gamma correction.

Try some different settings and see how they affect the output graph on the right and what it does to your photo. It is intended that the last graph is always linear and thus represents the photograph as it should be. If all graphs turn green, the system is in balance and the picture is displayed correctly. If the graphs turn red something is wrong. Which settings make your photo display too dark? And which too light? And at which two variants of settings the photo is displayed correctly? Good luck!

Gamma Encoding

Hopefully now you understand why it is so important to understand when (and when not) you have to apply gamma correction. And what it does with your graphics if something is set wrong in the chain.

But there is another big advantage to applying gamma correction to your graphic files. As you may have already noticed, the display-gamma curve for a gamma of 2.2 seems very similar to the inverted graph of the human perception of light, the one we saw earlier. It turns out to be, completely by coincidence, almost exactly the opposite curve! We can therefore state that if you apply gamma correction to your graphic files, they almost get the same curve as how we perceive light, so like our perceptions more different gradations can be distinguished in dark areas than in light areas. Just as we humans perceive contrast. By storing an image already gamma corrected, the image is already optimally adapted to our view curve, so that details that we can distinguish well can also be better stored and we have a qualitatively better image with less number of bits. With this we could even save a file with only needing 8 bits per color channel, instead of 10 bits, to have the same quality. Just by applying gamma correction! We therefore sometimes use the terms encoding for applying gamma correction.

In addition, if digital compression is used, just like in jpeg, this compression is applied after the gamma correction. And with gamma correction applied first the digital compression also works better and is adjusted to the way our perception of lights works and so fully optimized for our view as well. Gamma-correction is therefore not so crazy and not only to compensate of old crt-technique anymore!

Gamma and color spaces

Not every color space uses the same gamma values. And there are also linear color spaces, which therefore have a gamma of 1. In the latter case gamma correction is therefore not relevant. In order to keep this blog somewhat concise, I will not compare color spaces in this article or explain in details which ones to use. Below I will show you some color spaces with their gamma values though, so you can see that there are not only differences in primary color values between color spaces, but that this may also be the case in the field of gamma correction.

Linear workflow

Especially in 3D modeling software, more and more designers are swearing for a linear workflow. This means that images for textures that already have a gamma correction applied, such as jpegs, must first be converted to linear and then the entire internal 3D environment passes all signals linearly. So all virtual lights, shaders, colors and post-processing are then treated linearly in the software. And only at the rendering stage gamma correction will be applied if desired. The advantage of this is that all virtual lights work much more like their effects in real nature.

RGB color spaces

If you made it so far: congratulations! This is reasonably technical and fairly comprehensive and therefore a short explanation isn't always possible. We are not there yet, but almost! So far we have covered the parts that together make a Color Space definition; primary colors, white reference and gamma transfer function.

There are hundreds of color spaces. Only for the RGB color model alone. You could also create your own color space. Fortunately, a number of standard color spaces have been laid down that are widely used around the world. Color spaces with their own characteristics, advantages and disadvantages and applications. It goes too far to describe this in detail in this blog. But in the following interactive you can compare a number of common color spaces in the CIExy Chromaticity Diagram. This way you can clearly see the difference between different color gamuts of color spaces. And you also see clearly that some color spaces even have colors that fall outside the visual spectrum for people and are therefore imaginary.

Color profiles

Fortunately, we now know what color spaces are and also what gamma correction is. But how do we work with this in practice?

The concepts of color spaces and color profiles are often used interchangeably. Often that's not a problem and no problem if you understand what you're talking about. Yet they do not mean the same thing.

A Color Profile is a numerical model of a Color Space. Actually you could say that a Color Profile among others is the actual digital application of a Color Space. And offers a way to link the chosen Color Space to a file. A Color Profile tells us exactly how the relative digital color values ​​of the RGB Color Model can be converted to absolute color via the chosen Color Space. But a Color Profile also knows how it can translate its color space to other color spaces.

It is therefore important for every professional that files always contain the right embedded color profile! Otherwise, your colors 'float' relatively without definition, and no software or hardware knows how the colors in your file were intended to look like. In the absence of a color profile, an image could get the wrong color space by choice and so will probably be displayed incorrectly on the screen.

Assign Color Profile

When you take photos with a camera, an image (like jpeg) often gets an embedded color profile. So a color profile is stored in the file as meta-data. Graphic software programs such as Photoshop or Affinity Photo, for example, use this color profile to know exactly how the color values in the file can be translated into the right colors. And which gamma transfer is applied or not. And in that color profile with that color space and the associated color model, you can now also further edit or design because the software knows the definitions.

But a color profile isn't always present in a file. If there's no color profile available, you can still embed one. This is usually called something like 'Assign color profile' in software programs. Assign profile does nothing else than tell in which Color Space the image was created and stores it in the file when saving. With 'assign profile' it is therefore very important that you choose the right color space, so the color space in which the image was actually created. Otherwise, software programs do not 'understand' your image properly and you probably will not see the colors the image should have.

Assign profile does not change the color values in your file, but only gives a meaning to these color values by linking them with to a color space using a color profile.

Converting color profiles

If you want to convert an image with a specific color space to another color space in a program such as Photoshop or Affinity Photo, the program uses the color profile already present in the file. If that is available. The Color Profile shows exactly how the current Color Space can be converted to another Color Space.

To convert color spaces to each other, a color profile uses a third color space: the Profile Connection Space (PCS). This is a Color Space that is large enough that all other color spaces fit into it and so all color spaces can be converted to each other with as little or no loss as possible. The Profile Connection Space is often CIEXYZ, as we saw earlier in 3D, or CIELAB. I don't go into details about CIELAB in this blog. For now it is important mainly that you understand both color spaces can contain all the colors that we can perceive as humans. Because a Color Profile thus always knows how its Color Space can be converted from or to that Profile Connection Space, all possible color spaces can now be converted to each other.

Often this conversion happens with a formula. This keeps the color profile in your file small so that your file does not become unnecessarily large. Which is very important when using images on internet to keep download speeds low. But there are also color profiles that do this conversion with a lookup table. The latter occurs mainly with Device color spaces / profiles, because this way it is possible to configure much more accurately how values should be converted to each other. But it also yields a considerably larger file unfortunately.

In contrast to 'assign profile', 'convert profile' in a graphic program does indeed change the color values ​​in your file.

A color profile can also convert a color space in the RGB model via the same Profile Connection Space to a CMYK color profile, so to a different color model. That is what a printer that works in CMYK makes good use of!

Embedded color profiles

But what does such an embedded color profile actually look like? Fortunately, there is a handy command line tool that can read meta-data from a file and display that on the screen. This tool is called exiftool and can be downloaded here for free.

To give you an impression of some color profile meta-data inside a jpeg, this is the result I got:

As you can see after 'ColorSpaceData' the color space is in the RGB model, the absolute values of Red, Green and Blue are defined in this color space as 'channels', you see the illuminant, so the white-reference and you can also find that the CIEXYZ color space is used when converting from or to another color space as Profile Connection Space.

Three types of color spaces / profiles

There are three types of color profiles. The details of it fall out of scope for this blog, but I think it's very useful to know them still in order get a better understanding of the applications of color spaces.

• Working color space / profile
  This is the color space in which you create and edit your designs. A working color space is not dependent on the devices you use (device independent). You often want to have this color space as large as possible, so that you have a wide range of colors available and conversion to the final output color space as good as possible.
• Device color space / profile
  This is a color space designed specifically for a specific device, such as a computer screen, printer or beamer to compensate for the color characteristics of the device. This type of color space is therefore 'device-dependent' and is used by the system. It is normally not the intention that you use this type of color space / profile in your designs and save it as an embedded profile in a file.
• Output color space / profile
  The output color space is the color space your final result has. If your goal is internet, this will (as yet) normally be the color space sRGB because it is supported everywhere on internet browsers and has even been specially designed for the internet. But at the moment they are working hard on support for more color spaces on the internet.

Copy and paste images

But now let's say you are faced with the situation that you have two images, where one file is designed in color space A and the other file in color space B... And you want to paste one picture inside the other within a program like for example Photoshop... Is that going well?

Before a professional package like Photoshop pastes an image into another file, the software looks for a color space in which the image was created. If the image has an embedded color profile, then the image can easily be converted to the color space of the target file and then pasted after that. This all happens in a blink without you even knowing it.

If the file doesn't have a color profile onboard, many software programs, such as browsers, usually assume the image is in the sRGB color space so apply that space. But of course it's better to just ensure that your files contain the right embedded color profiles.

In the end, the pasted image is assigned the same color space as the target file, so everything is in balance again.

Color depth (= bit depth) and Banding

Finally, a small trip to color depth, because that not only directly affects the quality of your designs, I also want to get an important misunderstanding that consists of color spaces with a wide color gamut out of the way.

We have seen that an RGB color space defines the exact values ​​of pure red, pure green and pure blue. But the color space does not state in how many steps these values go from 0 to the maximum value. This number of these steps is determined by the color depth, also known as bit depth. And is often displayed in bpp (bits per pixel).

It is often a multiple of 8 bits:

• 8 bits: pseudo color
• 16 bits: hi color
• 24 bits: true color

The more bits per pixel, the more color gradations can be displayed and the smoother a color gradient will be displayed. This is particularly important with gradients. If a color gradient is stored with a low number of bpp, you could be able to see the transitions between the various shade color values as blocks that jump from one value to the next. We call that side effect Banding.

In the following interactive you can see the difference between an original image with a sun made with a gradient (on the left of the slider) and on the right of the slider what the same image would look like if it would have visible banding. Just move the slider back and forth and see what banding does to the image. When you see banding on an image there's simply too little color gradations with the number of bits possible to let the color change smoothly from one to the next. As a designer you want to limit banding to a minimum.

Now there is this misunderstanding among some that a color space with a wider color gamut, so a 'larger color space' is directly linked to having a higher quality. However, that doesn't necessarily have to be true at all. For example, if a larger color space holds the same color depth as a smaller color space, that means that the larger range of colors of the wider color space has to be distributed over the same number of gradations, so that visible banding will be much more visible, because color values are further apart from each other. Although it is not necessary when using a larger color space, it is advisable, especially when using gradients, to also choose a larger color depth when going to a wider color space.

Conclusion

Pfew. This has eventually become a rather extensive blog and that is not without reason. Color spaces and color profiles are fairly complex and technical and the discussed concepts all influence each other, which makes them all important to discuss the concept and to be able to explain them well. There is still a lot more to tell about this, but these are basically the most important things to understand color spaces and color profiles and to be able to work with them.

It remains a technical story, of course, but I hope that, through interactives and illustrations, I have been able to give you more insight into what color models, color spaces and color profiles are and why an understanding of them is important as a professional to archieve the best result with your work.

For graphical work on the internet it is advisable to finally deliver everything in sRGB still. But at the moment a number of important changes in web techniques are under way that will ensure that internet browsers will support more and wider color spaces. This is an important step that will give designers more room to upload work in larger color spaces, which greatly improves the quality of graphics online for people having monitors capable of displaying wider color spaces. At the moment, however, this is not yet advisable, because most consumer monitors only support the sRGB color space. And if you view an image on an sRGB monitor, while it is actually made in a larger color space, the colors are often greyed out, because some browsers do not convert the color space internally.