HSB colour model

The HSB colour model provides an alternative representation of the RGB colour model and provides a more intuitive way to select and adjust colours in software applications used for graphic design, web development and photography.

Both RGB and HSB are additive colour models. But whilst RGB relies on adjusting the amount of red, green and blue needed to produce other colours the HSB colour model relies on adjusting hue, saturation and brightness.

  • Hue refers to the perceived difference between one colour and another and is usually described by using names such as red, yellow, green or blue.
  • Hue can be measured as a location on an HSB colour wheel and expressed as a degree between 00 and 3600.
  • 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 appears dull and washed out until all colour disappears leaving only a monochromatic grey tone (0%).
  • On many HSB 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 and achromatic.

In the implementation of the HSB colour model used in Adobe Illustrator CC:

  • The option to use the HSB colour model is available in the Colour Panel. If the colour panel is not visible then look for Colour in the Windows menu.
  • Use the hamburger menu in the top right to change from the default RGB setting to HSB.
  • Hue, saturation and brightness can all be adjusted using the sliders or by clicking anywhere on the HSB Spectrum.
  • To enter an HSB colour using Hexadecimal notation use the hamburger menu to go back to the RGB colour model and enter a code in the window provided.
  • HSB notation typically appears as follows:
    • 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.

Summary

About sections (temp)