Skip to content

Color Space Series - HSL HSV

HSL

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl

Hue

Hue is the angle that represents the type of color, and hue indicates the basic colors such as red, yellow, green, blue, navy, and purple. It can have values from 0 degrees to 360 degrees. For example, red is 0 degrees, yellow is 60 degrees, green is 120 degrees, blue is 240 degrees, etc.

Saturation

Saturation is the purity of the color. Saturation values range from 0% to 100%. When the color is 100%, it has the maximum purity, and when the color is 0%, it is expressed as gray.

Lightness

Lightness is the brightness of the color. Lightness values range from 0% to 100%. When the color is 0%, it is expressed as pure black, and when the color is 100%, it is expressed as pure white.

HSV

Hue

The angle value that represents the type of color. It is based on a 360-degree color wheel, and it can have values from 0 degrees to 360 degrees. For example, red is 0 degrees, yellow is 60 degrees, green is 120 degrees, blue is 240 degrees, etc.

Saturation

The value that represents the purity of the color. 0% is gray, 100% is maximum purity. The higher the purity, the darker the color.

Value

The value that represents the brightness of the color. 0% is pure black, 100% is pure white. Value values are used to adjust the brightness of a specific color or create a blurry color.

HSL vs HSV Color Model

HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) are color models used in computer graphics and digital image processing.

The difference between the two models is the way they express the relationship between hue, saturation, and the third component (lightness or value).

In HSL, hue is the angle on the color wheel, saturation is the distance from the center, and lightness is the brightness of the color (0 = black, 1 = white).

In HSV, hue is the angle on the color wheel, saturation is the purity of the color, and value is the brightness of the color (0 = black, 1 = maximum brightness).

Ultimately, the difference between HSL and HSV is the way they express the relationship between the hue, saturation, and brightness of the color. However, both are used for similar purposes.