HSL AND HSV COLOR MODE

 

HSL AND HSV COLOR MODE

HSL and HSV

HSL and HSV are two common color models used in computer graphics, image processing, and various applications to describe and manipulate colors. They both provide a way to represent colors in a more intuitive and perceptually meaningful manner compared to the RGB color model, which is based on additive combinations of red, green, and blue light.

1. HSL (Hue, Saturation, Lightness):
• Hue (H): Represents the actual color or its wavelength in degrees on the color wheel (0° to 360°). It defines where the color falls on the color spectrum.
• Saturation (S): Indicates the intensity or vividness of a color. A value of 0% corresponds to grayscale, while 100% is the most intense color.
• Lightness (L): Represents the brightness of a color. A lightness of 0% is completely black, 100% is completely white, and 50% is the "normal" color.

HSL is often represented as a cylindrical coordinate system, where the hue corresponds to the angle around the central vertical axis, saturation is the distance from the central axis, and lightness is the height above or below the central axis.

2. HSV (Hue, Saturation, Value):
• Hue (H): Similar to HSL, represents the color itself in degrees on the color wheel (0° to 360°).
• Saturation (S): Also similar to HSL, indicates the intensity or vividness of a color.
• Value (V), sometimes called Brightness: Represents the brightness of a color, similar to lightness in HSL. However, the way value is calculated in HSV is often different from how lightness is calculated in HSL.

HSV is often visualized as a cone, with the tip representing black (S = 0, V = 0), the center representing fully saturated colors, and the base representing white (S = 0, V = 100).

Both HSL and HSV offer advantages in different contexts. HSL is often preferred when you need to adjust the perceived lightness of colors while maintaining their saturation, whereas HSV is commonly used when you want to modify the brightness of colors while keeping their saturation constant. These color models are particularly useful for tasks like image manipulation, color selection tools, and graphic design.

Top of Form

GENERATED

HSL (a–d) and HSV (e–h). Above (a, e): cut-away 3D models of each. Below: two-dimensional plots showing two of a model's three parameters at once, holding the other constant: cylindrical shells (b, f) of constant saturation, in this case, the outside surface of each cylinder; horizontal cross-sections (c, g) of constant HSL lightness or HSV value, in this case, the slices halfway down each cylinder; and rectangular vertical cross-sections (d, h) of constant hue, in this case of hues 0° red and its complement 180° cyan.

HSL (for hue, saturation, lightness) and HSV (for hue, saturation, value; also known as HSB, for hue, saturation, brightness) are alternative representations of the RGB color model, designed in the 1970s by computer graphics researchers. In these models, the colors of each hue are arranged in a radial slice, around a central axis of neutral colors which ranges from black at the bottom to white at the top.

The HSL representation models the way different paints mix together to create color in the real world, with the lightness dimension resembling the varying amounts of black or white paint in the mixture (e.g. to create "light red", a red pigment can be mixed with white paint; this white paint corresponds to a high "lightness" value in the HSL representation). Fully saturated colors are placed around a circle at a lightness value of ¹⁄₂, with a lightness value of 0 or 1 corresponding to fully black or white, respectively.

Meanwhile, the HSV representation models how colors appear under light. The difference between HSL and HSV is that a color with maximum lightness in HSL is pure white, but a color with maximum value/brightness in HSV is analogous to shining a white light on a colored object (e.g. shining a bright white light on a red object causes the object to still appear red, just brighter and more intense, while shining a dim light on a red object causes the object to appear darker and less bright).

The issue with both HSV and HSL is that these approaches do not effectively separate color into their three value components according to human perception of color. This can be seen when the saturation settings are altered – it is quite easy to notice the difference in perceptual lightness despite the "V" or "L" setting being fixed.

Basic principle

HSL cylinder.

HSV cylinder.

HSL and HSV are both cylindrical geometries (fig. 2), with hue, their angular dimension, starting at the red primary at 0°, passing through the green primary at 120° and the blue primary at 240°, and then wrapping back to red at 360°. In each geometry, the central vertical axis comprises the neutral, achromatic, or gray colors ranging, from top to bottom, white at lightness 1 (value 1) to black at lightness 0 (value 0).

In both geometries, the additive primary and secondary colors – red, yellow, green, cyan, blue, and magenta – and linear mixtures between adjacent pairs of them, sometimes called pure colors, are arranged around the outside edge of the cylinder with saturation 1. These saturated colors have a lightness of 0.5 in HSL, while in HSV they have a value of 1. Mixing these pure colors with black – producing so-called shades – leaves saturation unchanged. In HSL, saturation is also unchanged by tinting with white, and only mixtures with both black and white – called tones – have a saturation of less than 1. In HSV, tinting alone reduces saturation.

If we plot hue and (a) HSL lightness or (b) HSV value against chroma (range of RGB values) rather than saturation (chroma over maximum chroma for that slice), the resulting solid is a bicone or cone, respectively, not a cylinder. Such diagrams often claim to represent HSL or HSV directly, with the chroma dimension confusingly labeled "saturation".

Because these definitions of saturation – in which very dark (in both models) or very light (in HSL) near-neutral colors are considered fully saturated (for instance,   from the bottom right in the sliced HSL cylinder or   from the top right) – conflict with the intuitive notion of color purity, often a conic or biconic solid is drawn instead, with what this article calls chroma as its radial dimension (equal to the range of the RGB values), instead of saturation (where the saturation is equal to the chroma over the maximum chroma in that slice of the (bi)cone). Confusingly, such diagrams usually label this radial dimension "saturation", blurring or erasing the distinction between saturation and chroma. As described below, computing chroma is a helpful step in the derivation of each model. Because such an intermediate model – with dimensions hue, chroma, and HSV value or HSL lightness – takes the shape of a cone or bicone, HSV is often called the "hexcone model" while HSL is often called the "bi-hexcone model".

Formal derivation

The geometric derivation of the cylindrical HSL and HSV representations of an RGB "colorcube".5Visualised geometric derivation of the cylindrical HSV representation of an RGB "colorcube".0Visualised geometric derivation of the cylindrical HSL representation of an RGB "colorcube".

Since version 4.0, Adobe Photoshop's "Luminosity", "Hue", "Saturation", and "Color" blend modes composite layers using a luma/chroma/hue color geometry. These have been copied widely, but several imitators use the HSL (e.g. PhotoImpact, Paint Shop Pro) or HSV geometries instead.

Other cylindrical-coordinate color models

The creators of HSL and HSV were far from the first to imagine colors fitting into conic or spherical shapes, with neutrals running from black to white in a central axis, and hues corresponding to angles around that axis. Similar arrangements date back to the 18th century, and continue to be developed in the most modern and scientific models.