How we change what others think, feel, believe and do

Hue, Saturation, Chroma and Other Ways of Understanding Color

Explanations > Perception > Visual Perception > Colorfulness, Saturation, Chrominance and Other Ways of Understanding Color

Hue | Colorfulness | Saturation | Vibrance | Chrominance | Chromaticity | Colour Temperature | RGB | CMY | So what?

There are number of ways of describing tone (the black and white part of an image). There are also a number of terms used when talking about color.

Colorfulness

Colourfulness is 'the attribute of a visual sensation according to which the perceived color of an area appears to be more or less chromatic'. In other words, something that is more colorful has more color, and vice versa. Colorfulness is a general term used to indicate more or less color, in particular in what is perceived (rather than a physical attribute). An area which is not colorful is colorless.

A color with high luminance and low saturation has low colorfulness. A color with high saturation and low luminance also has a low colorfulness. A color with high colorfulness has high saturation and high luminance.

Colorfulness may be calculated as 2 x Saturation x Luminance. From Red, Green and Blue, it may be calculated thus:

• min = the minimum value of Red, Green and Blue (all between 0 and 1)
• max = the maximum value of Red, Green and Blue
• Colorfulness = ((max + min) x (max - min))/max

Hue

Hue is 'attribute of a visual sensation according to which an area appears to be similar to one of the perceived colors of red, yellow, green, and blue, or to a combination of two of them'. More simply, it is the color in the visible spectrum that is perceived.

Physically, hue corresponds to the wavelength (or frequency) of the electromagnetic beam light used. A complication is that there are often multiple electromagnetic light waves at multiple wavelengths present at the same time. These simply mix to form the final perceived hue.

In photo editing, Hue is important for Hue, Saturation and Luminosity (HSL) adjustment. Changing Hue in an image can be used for correcting or creating a color cast, tinting the image with a particular hue.

Saturation

Saturation is the extent to which an area lacks gray and is a pure color. Areas increase in gray as Red, Green and Blue all tend towards having the same level. Saturation hence increases as Red, Green and Blue become more separated. In particular as the gap between maximum and minimum values within these becomes greater. Desaturating an image turns it to monochrome, or black and white.

In photo editing, saturation is calculated as follows:

• First identify the normalized Red, Green and Blue values (0 to 1, typically R/255, G/255 and B/255)
• Identify the maximum (max) and minimum (min) of these.
• If max = 0 then the color is black (Red, Green and Blue are all zero) and Saturation is zero.
• Calculate the Luminosity as (max - min).
• the Luminosity of a pixel is the range between the minimum and maximum values of Red, Green and Blue.
• If Luminosity is less than 0.5 then Saturation = (max - min) / (max + min)
• If Luminosity is greater than 0.5 then Saturation = (max - min) / (2 - max - min)

Vibrance

Vibrance is a term that is used in photo editing, where there is often a 'vibrance' control. This acts on areas that are less saturated than other areas, raising their saturation such the image becomes more saturated overall. This can both help lift a dull picture and also lead to an unrealistic, over-saturated picture.

In other words, vibrance is a useful tool, but should be used in moderation rather than with wild enthusiasm. Saturated colors tend to grab the eye, and with many strongly saturated areas, the eye does not know where to look, leading to visual confusion and exhaustion.

Chrominance

Chrominance is the quality of light that causes the perception of color. It is often described as the 'color' partner of the black-and-white Luminance.

Chroma is a term used to describe chrominance when it is held as an electronic signal. Chroma may be broken into two orthogonal signals, which ma vary depending on the encoding scheme used.

In a video signal, the color information is send via the chrominance, or chroma signal. Chrominance is often signified by C, while Luminance is signified by Y. Chroma signals are typically highly compressed (Chroma Sampling), using far less of the full hue information than might have been first captured. This is because the human eye likewise compresses color and video follows the same principles.

Chromaticity

Chromaticity is a term used to describe the combination of hue and saturation as a single appearance of color. In the manner of the HSL model, This means Chromaticity can be paired with Luminance/Lightness (or however the model describes monochrome brightness) to provide a complete color signal.

Color Temperature

A light that is not white will make white things appear to be of the color of the light, and similarly change the appearance of other items. The idea of 'color temperature' comes from the theoretical temperature that a black body radiator (which absorbs all electromagnetic radiation) needs to be in order to glow with the given color. This is measured in degrees Kelvin (K).  This can be quite hot in order to light up. Zero degree Celsius, is 273K. Thereafter, one degree increase in Kelvin is the same as one degree increase in Celsius.

Color Temperature is a measure of the overall hue in ambient light. A tungsten bulb casts an orange light and is typically around 2500K. Daylight, which we commonly call 'white' is typically taken to be 5500K.  On a cloudy day, the color temperature may be around 6500K.

Cameras often can be set to compensate for the color temperature. Settings to compensate for include daylight, cloud, shade, tungsten, fluorescent and flash. Cameras may also compensate automatically, picking what seems to be white and changing the setting to account for this.

Image editors allow adjustments of color temperature, often within 'White Balance', either 'cooling' towards more blue or 'warming' towards more orange. A common technique to suggest a sunset is simply to warm up the picture.

White balance adjustment may also include a tint adjustment, shifting the overall color between more magenta and more green.

RGB

Colors in computer processing are usually held as a combination of values of Red, Green and Blue for each pixel. Typically, in an 8-bit data scheme, each of these can range from 0 to 255. For example, Red=0 means 'no red in color' and Red=255 means (in 8-bit color) 'maximum, full-saturated, red'. For calculations, these values are often normalized to a range between 0 and 1 (calculated as Red/255, Green/255 and Blue/255). You can also use any number of bits for each RGB color, for example 12, 14, 16, 20, 24 or 32 bits. To normalize these to 0 to 1, again we simply divide by the maximum value they can have.

When Red, Green and Blue values are equal to one another, then the resultant color is gray. When they are all zero, the result is black, and when they are all 1 then the result is white. Hence, in an 8-bit color scheme, you can have values of 0 to 255, giving 256 black/white shades, which are normalized to the range from 0 to 1. In a 16-bit scheme, each RGB color can have 65536 shades, which can be normalized to the range 0 to 1 (by dividing by 65535). This gives many more color possibilities than 8-bit color, but results in much bigger files and requires much more computer power to process.

CMY

When Red, Green and Blue are combined in pairs, they form the secondary colors, Cyan (Blue+Green), Magenta (Red+Blue) and Yellow (Red+Green). These are formed additively, which means they are combinations of light rather than paint (which gives a subtractive effect). Hence a Red light and Green light shone onto a black card will be seen as Yellow when they overlap.

Any hue can be created by a combination of Cyan, Magenta and Yellow. Importantly, CMY is used in printing, which is why printers often use Cyan, Magenta and Yellow ink cartridges. This is because a printed page is white and subtractive as it depends on reflected (rather than emitted) light. In other words, white light shines on the inked page and only the remains of this white light that is not absorbed by the ink is reflected. While a combination of Cyan, Magenta and Yellow should be seen as black, the result is often an imperfect dark, which is why an additional Black ink cartridge is often added to fix this problem.

So what?

Understand how color works and then use it to your advantage. Be careful with definitions of words and check with other people as needed to ensure you are both using the same definition.

See also

Color Schemes, Twelve Color Wheel, The Meaning of Colors