Earlier we introduced RGB. This time we introduce two seemingly similar models—HSL and HSV. HSL stands for Hue, Saturation, Lightness/Luminance, that is, hue, saturation, and lightness; HSV stands for Hue, Saturation, Value, that is, hue, saturation, and value. The two are related yet somewhat different.
📖 Table of Contents
The Essential Difference Between HSL and HSV
The two differ by a single letter in name, but at their core they define lightness and darkness differently. The three components of HSL and HSV are defined as follows:
In HSL it represents the kind of color, expressed from 0° to 360°. It is the same as H in HSV.
It represents how vivid a color is. When the value is 0%, the color is pure gray; when the value is 100%, it is the most vivid color of the current hue.
In HSV, however, S represents the purity of a color: a value of 0% means pure black, and 100% means the purest color of the current hue.
In HSL it represents how light or dark a color is: 0% is pure black, 100% is pure white, and 50% is the pure tone of the hue.
V in HSV: 0% is pure black, and 100% is the brightest state of the hue.
Why Are There Two Models, HSV and HSL?
Because the RGB model is an encoding for digital devices, it does not match how humans perceive color. For the same red, for instance, people may think of a vivid red or a bright red. The three values of RGB cannot express the vividness and brightness of a color. So two scholars proposed HSV and HSL.
Artists first pick a pigment, then adjust its lightness and vividness by adding black or white. The core goal of HSV was to match this way of working.
Lightness should cover the full range from pure black to pure white. The goal of HSL was to match how humans perceive light and dark, letting the L component go directly from black to white.
How to choose? It depends on the scenario
If you need to control the layers of light and dark in a color, you can choose HSL.
If you need to pick a color first and then adjust it with black and white, you can choose HSV.
Converting Between HSL and HSV
HSL and HSV can be converted through the intermediate value RGB. That is, to convert HSL to HSV, you first convert HSL to RGB and then RGB to HSV, and vice versa.
If you need to convert between HSL and HSV, you can use the Color Unit Converter.