The Theory of Colors – hue, saturation, brightness
Each color can be described by three parameters:
- hue: the index of a color’s light frequency (from 0 to 255) and some additional colors (from 256 to 360);
- saturation: the ratio of the hue color over all the colors (white);
- brightness: the amount of light (black vs. color).
The hue up to 255 follows the spectrum of visible light. The colors are pure spectral colors (produced by a narrow band of wavelengths) with increasing frequency, from 405 to 790 THz.
Visible light spectrum over its frequency range (credit: Study.com) compared to the hue scale (credit: Wikipedia.org).
After the 255, the hue scale starts to deviate from the visible light spectrum to include some common non-monochromatic colors such as the violet, the purple and the red (to allow for a circle representation to converge on the edges, i.e., lim 0+ = lim 360-).
The sequence of colors is more important that their absolute values:
- red
- orange
- yellow
- green
- turquoise
- blue
- violet
- purplet
How to construct a color
Since saturation and brightness are nothing more than the quantity of white and black in a particular tonality, they can be constructed by merging layers of white and black over the pure hue color. For example, take lavender (hue 275, saturation 17%, brightness 79%):
This same color can be obtained by a base violet color (hue 275, saturation 100%, brightness 100% – note that the hue is the same):
then adding on top of it a while layer with opacity/fill 85% to lower the saturation, i.e., to increase the other colors and lower proportionally the violet, bringing the tonality toward the white (hue 275, saturation 15%, brightness 100%):
and then adding a black layer with opacity/fill 22% to decrease the absolute amount of light (final result, hue 275, saturation 17%, brightness 79% like the original color):
In Photoshop this is achieved by using solid color fill layers:
The color brown (hue 38, saturation 83%, brightness 61%) can be achieved also with a solid color fill layer with hue 38 (orange) and brightness and saturation at 100%, to which are blended a white layer at 17% fill and a black layer at 39% fill to obtain the same exact color:
Needless to say, the same can be obtained also with a Hue/Saturation layer (saturation -30, brightness -29) on top of the hue 38 orange layer:
If you do not change the hue, the hue/saturation layer only adds in background a black and a white layer.