Hue, saturation and brightness


All colors can be described as a function of hue, saturation and brightness, which I have attempted to visualize with these pictures.

H = hue, which is the color itself (0-360).

S = saturation, or how much white is mixed in (0-100).

B = brightness, or how much black is mixed in (0-100).

Some examples, shown for blue (H = 240):

I) S = 100 and B = 100: pure blue.

II) S = 0 and B = 100: pure white.

III) S = 100 and B = 0: pure black.

IV) S = 0 and B = 0: pure black.


Color models


Color models are used for mathematically describing colors. There are several color models, but for photography the most important ones are the RGB model (Red, Green Blue) and the CMYK model (Cyan, Magenta, Yellow, black, the K used for black comes from Key). The difference is that RGB is an additive model while CMYK is a subtractive model. This means that in the RGB model a mixture of pure red, pure green and pure blue will give white, while in the CMYK model a mixture of pure cyan, pure magenta and pure yellow will give black.

RGB is used in output devices (TV, computer monitor) and input devices (camera, videocamera), and an example of the RGB principle in use can be seen below on the right, which is a close-up of my LCD computer screen. Three types of light sources are used (red, green and blue) and by selectively activating those three, various colors are obtained.

The RGB model.

white - red - green - blue - yellow - cyan - magenta

The CMYK model is mostly used for printing images. In theory CMY would suffice, but in reality the used inks are not 100 % pure and it is impossible to obtain pure black by mixing the three colors. Therefore black is added as a fourth "color" to compensate for this. The CMYK model has a smaller gamut then RGB, which is something to keep in mind when sending a picture away for printing. This will require converting the image from RGB to CMYK and as a result the print will probably not match the image on your screen.

Below on the right is an example of the CMYK model in action. This is a close-up of a book cover, and the dots of cyan, magenta, yellow and black can be seen clearly. If you look closely, you can also see how a combination of the three colors does not give black, but dark brown. That's why black is added in this color model.

The CMYK model.


Color spaces


When the components in a color model are defined so that it is exactly known how the colors look, then this is called a color space. On the right is a graph showing the colors visible to humans (the horseshoe shape) and the gamuts (a gamut is the collection of possible colors) of three common color spaces. sRGB is the smallest of the three and is commonly used for publications on the internet, while Adobe RGB is a larger color space, and ProPhoto RGB an even larger one (it even exceeds what is visible for humans).


Note that, although Adobe RGB has a larger gamut than sRGB, a picture in Adobe RGB does not contain a larger number of colors than the same picture in sRGB, since the number of colors is dictated by bit depth only. The only thing changing with a larger color space is that the colors are spread out over a bigger range, but the number of colors is identical. The fact that colors are more widespread in larger color spaces can make them more prone to posterization, therefore it can be better to use 16 bit (giving no less than 281.474.976.710.656 colors in stead of 16.777.216 for 8 bit) when working in larger color spaces. This is especially true for for example ProPhoto RGB since it is such a large color space.



(130, 210, 130)

(130, 210, 130)

Adobe RGB:

(156, 208, 133)

(130, 210, 130)

ProPhoto RGB:

(145, 190, 124)

(130, 210, 130)


In the table to the left some examples can be seen of how the same colors get different numerical values in different color spaces (second column), and, secondly, how the same numerical values result in different colors (third column).

Another thing to keep in mind is how converting to a smaller color space can result in discarded information, a process called clipping. For example, pure red (255, 0, 0) in Adobe RGB is more saturated then pure red (255, 0, 0) in sRGB (sRGB pure red corresponds to (219, 0, 0) in Adobe RGB). This is not a problem when converting from sRGB to Adobe RGB since Adobe RGB is the larger color space of the two, but converting from Adobe RGB to sRGB means that all the levels in the red channel from 255 to 220 are lost since they are outside the sRGB gamut.


ICC profiles


Besides the defined color models and color spaces, there is still a lot of uncertainty in color management, since different devices differ slightly in their representation of colors. For example, if you go into a TV store and compare all the TVs you will notice differences between them. The only solution to be fully in control of the results is to calibrate the devices you're working with. That means calibrating the camera, the monitor, the printer, etc.

When a device is calibrated, it will get a so called ICC profile (where ICC stands for International Color Consortium) and this profile will tell the software (if it supports color management!) how to adjust the colors so that they are displayed correctly. The same principles goes for the printer and all other input or output devices.


Don't confuse color space profiles and calibration profiles because they are two different things. Color space profiles tell the software how to interpret the numerical values from the picture and the calibration profile is then needed to display the rendered file correctly on the display device. In short: a calibration profile is never assigned to a picture and a picture is never converted to a calibration profile!


ICC profiles - assigning and converting profiles


There are some things that need be kept in mind when dealing with profiles as there is a big difference between assigning a profile and converting to a profile, and mixing that up can give ugly pictures. I'll try to explain it here.


Assigning a profile to a picture means that you are telling software to interpret the numerical values of the picture according to that profile. Obviously, assigning the wrong profile gives a totally different picture, so assigning should only be used if you are absolutely sure about which profile it should be. For instance, some photo editing software programs discard profiles and therefore the rendered picture no longer has a profile attached to it. In that case it is safe to attach the original profile to the picture since you know which one it used to have.

Converting is like translating and is used when, for example, you want to change the color space (e.g. from Adobe RGB to sRGB). With the new profile you tell the software to make the picture look the same in the new color space as it did in the old color space. This transforms the numerical values so that it is interpreted in the right way.


What the difference between converting and assigning looks like can be seen in the pictures below. Converting the original sRGB picture to Adobe RGB or ProPhoto RGB means that the numerical values of the colors are altered so that in the end the pictures look the same in the new color space. However, if we assign Adobe RGB or ProPhoto RGB to the picture, the numerical values of the colors remain the same, but we are telling the software to interpret those values for the new color space while they are in fact the numerical values for sRGB. For both Adobe RGB and ProPhoto RGB, the converted pictures look the same as the original, whereas the assigned pictures have strange colors.

Finally, when converting to a profile, there are four options on how to do this:

• Perceptual: Takes the gamut of the larger space and compresses it so that it fits in the new gamut, which preserves the visual relationship between the colors. This has as an advantage that smooth transitions will still be smooth transitions after conversion. But it can also result in a slightly desaturated picture.

• Relative colorimetric: The colors from the larger gamut which are inside the new gamut are unaffected, but the out of gamut colors are transformed to the nearest value in the new gamut. This means that all the out of gamut information is lost upon conversion to the smaller gamut, which means that two different colors from the old gamut might end up having the same color in the new gamut. This is called clipping. Furthermore, the white point from the old gamut is mapped with the white point from the new gamut and all other colors are adjusted accordingly. When choosing relative colorimetric, it is possible to choose for black point compensation which maps the blacks in both gamuts. It is best to use this option.

• Absolute colorimetric: This does exactly the same as absolute colorimetric, but this time without the white point mapping, which can result in white areas getting slightly colored.

• Saturation: This method preserves the relative saturations of the colors which can result in hue shifts. Mostly useful when there is a limited amount of colors such as in graphics, but not very useful in photography.


On the right are two hypothetical two dimensional color spaces from green to red: a large one (top) and a small one (bottom). Besides the fact that the second one is a bit smaller, it also has a white point which is slightly shifted. Shown is the difference between perceptual, relative colorimetric and absolute colorimetric.


The two most useful methods are perceptual and relative colorimetric, but it's not possible to tell which method is the best as it depends on the situation. If a lot of colors are out of gamut, then perceptual is probably the best, while otherwise relative colorimetric might be better.


Does your browser support color management?


Most modern browsers are color managed, but if you are not certain, then this is a simple test to see if your browser is. The picture in the middle is divided in three parts with each part converted to a different color space (from left to right, sRGB, Adobe RGB and ProPhoto RGB). This means that if the picture looks like the one on the right, then your browser is color managed, but if it looks like three parts with different colors (like the one on the left), then your browser does not support color management. In that case your browser assumes all parts are in sRGB (which only the first column is) and therefore wrongly assigns sRGB to two of the three parts which will give the wrong colors.


Without color management


With color management