fmcg.fyi

countering the confusion of consumer packaged goods

HSL

A way of specifying colours for the screen. The three values are “hue”, “saturation”, and “lightness”.

  • Hue defines the general colour

  • Saturation defines how vivid that colour is

  • Lightness defines how light or dark that colour is

Although it takes some getting used to, HSL colour can be more intuitive in certain circumstances than RGB colour.

For example, it’s easy to get different shades of the same colour:

14, 86%, 80%
14, 86%, 70%
14, 86%, 60%
14, 86%, 50%
14, 86%, 40%
14, 86%, 30%
These colours all have the same hue and saturation, but different lightness values.

Or to “knock back” a colour by reducing its saturation to make it more muted:

14, 86%, 70%
14, 30%, 70%
These two colours have the same hue and lightness, but different saturation values.
Category: Design
Also known as: hue, saturation, lightness, HSB, hue, saturation, brightness
See also: