Introduction

Hue, saturation, and brightness are aspects of color in the red, green, and blue (RGB ) scheme. All possible colors can be specified according to hue, saturation, and brightness, just as colors can be represented in terms of the R, G, and B components. Color consists of three main integral parts:

  • Hue
  • Saturation (also called Chroma)
  • Value (also called Lightness)

Hue

Hue is the wavelength within the visible-light spectrum at which the energy output from a source is greatest. This is shown as the peak of the curves in the accompanying graph of intensity versus wavelength. All three colors have the same hue, with a wavelength slightly longer than 500 nanometers. The three primary hues in light are red, green, and blue. All three of these wavelengths added together at full strength produces pure white light. Hue is another word for color.

CMY are produced as secondary colors when RGB light hues are mixed (left image), as follows:

  • Blue + Red light –> Magenta
  • Red + Green light –> Yellow
  • Green + Blue light –> Cyan

Colors on the outermost perimeter of the color circle (right image) are the Hues, which are colors in their purest form. This process can continue filling in colors around the wheel. The next level colors, the tertiary colors, are those colors between the secondary and primary colors. Primary hues are arranged around a circle at equal (120 degree) intervals with Red at 0 degree.

Saturation

Saturation refers to the dominance of hue in the color i.e. intensity of a hue. It is also sometimes referred to as chroma, richness, or purity. A hue in its most intense form is fully saturated. A hue that has been dulled or muted is less saturated. Saturation is declared as percentages and can therefore reach values between 0% and 100% (or 0 to 1). A saturation of 100% means a completely saturated and pure color. Smaller the saturation, the more the color turns to a neutral gray.

On the outer edge of the hue wheel are the Pure hues. When you reach the center of the wheel, no hue dominates. Colors directly on the central axis are considered desaturated. Monochrome (black and white) prints are totally de-saturated since they lack colour intensity.

Value

Lightness (also referred to as Value or Tone or Blackness Value) relates to the amplitude of the colour. A colour with low value is close to black, while one with high value is close to white. In terms of a spectral definition of color, Lightness describes the overall intensity or strength of the light. It is also given as a percentage, where 0% means no brightness (hence black) and 100% full brightness. In other words, Value is the darkness or lightness of a hue on a scale that runs from near black to near white.

Below figure shows HSV color model. Hue is a dimension going around a wheel, value is a linear axis running through the middle of the wheel. Saturation is zero percent at the centre of the wheel and increases when going away from the centre.

HSV Color Model
HSV Color Model

Color Pickers

It is used to select and adjust color values. In the below figure, Red is set to 255, and Blue and Green are set to zero. Also H (indicates Hue) is set to 0, indicating that Red is at its fullest level of saturation. Picker circle located at the top-right, indicate saturation level. This sample is equivalent to the purest red hue with full saturation. S and B describes the level of saturation and brightness in the selected color.

Reference

Color Models: RGB, HSV, HSL