HSL Color HUe

What is Hue, Saturation and Luminosity (HSL)

HSL is a more intuitive and human way of understanding color as compared with RGB, which is more technical in the way colors are produced. We share it here

There are a number of ways of representing color. A common one on computers and cameras is RGB, or Red, Green, Blue, where combinations of these can be used to create any visible color. HSL is another way, and anything that can be shown in RGB can also be represented in HSL. HSL is a more intuitive and human way of understanding color as compared with RGB, which is more technical in the way colors are produced.

Hue

Hue is the color of a point, as found along the spectrum or around a color wheel.

http://changingminds.org/images/colorwheel.jpg

In physics, light is described in terms of being an electromagnetic wave. In these terms, hue is measured as frequency (the number of cycles per second, or Hertz) or wavelength (the distance between two successive peaks or troughs. The frequency of visible light is in the region of 10^15 Hz (that’s a one and fifteen zeroes) or between about 400 and 700 nm (nanometers). Nanometers are more often used to reduce the number of zeroes needed!

In computer work, hue is often measured in degrees, bring the angle around a color wheel. In this, red is zero (or 360) degrees, green is 120 degrees and blue is 240 degrees, with other colors spread between these. Artists just used names, such as burnt umber and vermillion, which are often based on the pigment materials used to make the paint.

To calculate Hue from Red, Green and Blue, in degrees:

  • First identify the 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 and Hue is zero.
  • If Red = max, then Hue = 60 * ((Green – Blue) Mod 6) / (max – min))
  • If Green = max, then Hue = 60 * (2.0 + (Blue – Red) / (max – min))
  • If Blue = max, then Hue = 60 * (4.0 + (Red – Green) / (max – min))
  • If the result is zero, add 360 degrees.

Psychologically, the meaning of colors varies with culture but has common patterns of interpretation, such as red is arousing as it indicates danger, blood, fire and sex, while blue is calming, indicating sky, water and sadness.

Saturation

Saturation is an indicator of the intensity of a hue. Higher saturation hues appear ‘stronger’, for example being ‘more red’ or ‘more blue’.

Saturation is often measured as a percentage, ranging from zero (gray) to 100% (full color), as in the picture below. Turning it up adds color only until it is fully saturated (so turning luminance up on a fully saturated color has no effect). Turning down saturation on a photograph will make it become ‘black and white’ or monochrome. In a color photograph, many hues are not fully saturated. Turning up saturation will push unsaturated hues up to become increasingly saturated, creating a garish look.

http://changingminds.org/images/color_tone.png

In a subtractive system such as paints, saturation can be decreased by adding white, gray, black and even the complementary (opposite) color (when adjacent, complementary colors are highly contrastive).

To calculate saturation from Red, Green and Blue:

  • 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 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)

In a photo editor, you can change the saturation of any pixel by seeking out RGB sliders for it, then bringing the three sliders closer together. When they are at extremes, you will see full saturation. When they get closer, saturation decreases. When they are all at the same level, you will see a shade of gray (indicating zero saturation). This is simply using the (max – min) effect.

Psychologically, more saturated hues are more arousing. Bright days get us going while dull, overcast days show only less saturated colors and are more depressing.

Luminosity

Luminosity is a measure of how bright or dark a hue is. Physically, this is found in the amplitude and consequent energy of the electromagnetic waves of light.

Luminosity is often measured as a percentage, ranging from zero (black) to 100% (full color), as in the image below. (hue horizontally and luminance decreasing downwards). In a photo editor, turning luminance down shifts the color down to black.

http://changingminds.org/images/color_shade.png

Luminosity may also be extended beyond full color as white is added. This is how the saturation control on photo editors often work, going from the normal color to black as it is turned down and from the normal color to white as it is turned up. In this way, a luminance control can vary color from black through to white.

http://changingminds.org/images/color_tint.png

Psychologically, as things become darker they slow us down. Dark indicates night, danger and evil. In the dark, we strain to see and find it difficult to make out shapes and recognize shapes, objects and people. Light indicates day and is more positively arousing, though in bright conditions, in which there is much white light, we can be dazzled as our eyes are unable to cope with the increased amplitude and energy of the inbound electromagnetic radiation.

In computer editing, luminosity is calculated from Red, Green and Blue values as:

  • 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.
  • Calculate Luminosity = (max – min). An alternative for a central figure in the (hexacone model), is the average of max and min.
  • If max = 0 then the Color is black and Luminosity is zero.

Note: The ‘L’ in HSL can vary, depending on the software used. HSL can hence also mean ‘Hue, Saturation and Luminance’ or ‘Hue, Saturation and Lightness’. The exact definition of these may vary with the software.

Variants

While HSL is a commonly used system in photo editors and other computer-based work, there are other variants that may be found.

HSV (or HSB)

A variant on HSL is HSV (also called HSB), where Luminance is replaced by either ‘Brightness’ or ‘Value’. In this system, ‘Value’ is another way of showing light and dark. Notable also is that the Saturation in HSV is not the same as Saturation in HSV. In particular, HSL is based on an additive model, such as is used with computers, while HSV is subtractive, as with paint.

In the hexacone model, V is calculated as the maximum value of Red, Green and Blue.

Turning up Luminosity on an HSL photo editor will make the image appear hazy and white. With HSV, the effect is to make the colors appear more pastel. Turning Luminosity down has the same effect on both, progressing the colors towards black. Turning Saturation up in HSL makes the colors appear more vibrant and ‘pop’, while with HSV there is a darkening and component colors may emerge. Turning Saturation down in HSV more rapidly desaturates the image and at zero saturation the overall image appears lighter than with HSL desaturation.

HSI

Another variant is where the third element is Intensity. Intensity is a measure of general brightness, which is very simply calculated as an average of Red, Green and Blue values. Black hence has an intensity of zero and White an intensity of one.

HSLA

Another variant is HSLA, where A is ‘Alpha’, or transparency. Photo editors often work in virtual layers, where two or more images are conceptually stacked above one another. Pixels from a layer below can been seen through an upper layer if this upper layer has pixels that are transparent or translucent. This is held in the alpha value, which may range from zero (transparent) to 100% (opaque).

Hue, Saturation and Luminosity, Luminance or Lightness

The ‘L’ in HSL can vary, depending on the software used. HSL can hence also mean ‘Hue, Saturation and Luminance’ or ‘Hue, Saturation and Lightness’. The exact definition of these may vary with the software.