HSB colour model

The HSB colour model provides an intuitive way to select and adjust colours in software applications used for graphic design, web development and photography.

Hue, saturation and brightness

HSB describes the fundamental characteristics of how colours appear when reflected by or transmitted through an object towards an observer:

  • Hue refers to the perceived difference between one colour and another by using names such as red, yellow, green or blue. Hue can be measured as a location on the standard colour wheel and expressed as a degree between 0 and 360.
  • Saturation refers to the perceived difference between one colour and another in terms of vividness. Saturation is measured between a fully saturated colour (100%) and an unsaturated colour that appear dull and washed out until all colour disappears leaving only a monochromatic grey tone (0%). On many colour wheels, saturation increases from the centre to the edge.
  • Brightness refers to the perceived difference between a colour observed in ideal sunlit conditions compared with conditions where the vitality of the hue is lost because the lighting is poor. Brightness can be measured as a percentage from 100% to 0%. As the brightness of a fully saturated hue decreases it appears progressively darker.
  • In the implementation of the HSB colour model used in Adobe Illustrator CC:
Hue

Hue is derived from the RGB colour wheel.

  • The main purpose of an RGB colour wheel is to understand the representation and display of colour used with RGB display devices such as televisions, computers, mobile phones, cameras and the software applications used with them.
  • The number of intermediate colours can be adjusted to suit the situation in which they are being used.
  • In Adobe Illustrator CC each colour forms a spoke on a colour wheel and is identified by its position and angle between 00 and 2590.
Saturation

Saturation can also be derived from an RGB colour wheel.

  • The most saturated colours appear around the outside circumference of the wheel and become less saturated towards the centre.
  • Saturation is represented as a percentage.
Brightness

Brightness can be added to an RGB colour wheel by adding a third dimension shown as a series of stacked discs.

  • The brightest version of a hue appears on the top disc and the darkest appears on the bottom.
  • Brightness is represented as a percentage.
  • The benefit of this 3D arrangement is that the effect on any particular hue can be seen when changing both saturation and brightness.
HSB notation
  • H=00, S=100%, B= 100% produces a fully saturated primary red hue with maximum brightness.
  • H=00, S=100%, B= 50% produces a fully saturated primary red hue that has lost some of its brightness so appears much darker in colour.
  • H=00, S=50%, B= 100% produces a bright but less saturated primary red hue.
References
  • https://en.wikipedia.org/wiki/HSL_and_HSV