The HSV−HSB colour space

RGB is used to store colour images in image file formats, and view images on a screen, but it’s honestly not very useful in day-to-day image processing. This is because in an RGB image the luminance and chrominance information is coupled together. Therefore when one of the R, G, or B components is modified, the colours within the image will change. For performing many operations we need another form of colour space – one where the characteristics of chrominance and luminance can be separated. One of the most common of these is HSV, or Hue−Saturation−Value.

HSV as an upside-down,
six-sided pyramid
HSV/HSB as a cylindrical space

HSV is derived from the RGB model, and is sometimes known as HSB (Hue, Saturation, Brightness) and characterizes colour in terms of hue and saturation. It was created by Alvy Ray Smith in 1978 [1]. Now the space is traditionally represented using an an upside-down hex-cone or six-sided pyramid – however mathematically the space is actually conceptualized as a cylinder. HSV/HSB is a perceptual colour space, i.e. it decomposes colour based on how it is perceived rather than how it is physically sensed, as is the case with RGB. This means HSV (and its associated colour spaces) is more aligned with a more intuitive understanding of colour.

The top of the HSB colour space cylinder showing hue and saturation (left), and a slice through the cylinder showing brightness versus saturation (right).

A point within the HSB space is defined by hue, saturation, and brightness.

  1. Hue represents the chromaticity or pure colour. It is specified by an angular measure from 0 to 360° – red corresponds to 0°, green to 120°, and blue to 240°.
  2. Saturation is the vibrancy, vividness/colourfulness, or purity of a colour. It is defined as a percentage measure from the central vertical axis (0%) to the exterior shell of the cylinder (100%). A colour with 100% saturation will be the purest color possible, while 0% saturation yields grayscale, i.e. completely desaturated.
  3. Value/Brightness is a measure of the lightness or darkness of a colour. It is specified by the central axis of the cylinder, and ranges from white at the top to black at the bottom. Here 0% indicates no intensity (pure blackness), and 100% indicates full intensity (white).

The values are very much interdependent, i.e. if the value of a colour is set to zero, then the amount of hue and saturation will not matter, as the colour will be black. Similarly, if the saturation is set to zero, then hue will not matter, as there will be no colour.

An example of a colour image, and two views of its respective HSB colour space.

Manipulating images in HSB is much more intuitive. In order to lighten a colour in HSB, it is as simple as increasing the brightness value, while a similar technique applied to an RGB image requires scaling each of the R, G, B components proportionally. The task of increasing saturation, i.e. making an image more vivid is easily achieved in this colour space.

Note that converting an image from RGB to HSB involves a nonlinear transformation.

  1. Smith, A.R., “Color gamut transform pairs”, Computer Graphics, 12(3), pp.12-19 (1978)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s