Nepedia
Back to Discover
Advanced Reader
💻

HSL and HSV

technology Maturity 11-13 Next article →

Digital screens create colors by mixing red, green, and blue light. This is called the RGB additive model.

unintuitive-rgb
unintuitive-rgb

While machines use RGB, it is very difficult for humans to use. Adjusting one color often requires changing all three RGB values. For example, making an orange less colorful requires changing red, green, and blue levels simultaneously. Because of this, computer scientists developed HSL and HSV models. These systems rearrange RGB geometry into a more intuitive cylindrical shape.

Hsl-hsv models
Hsl-hsv models

They allow users to pick colors based on how humans actually perceive them.

Both HSL and HSV are cylindrical-coordinate representations of the RGB color model. They use three specific dimensions to define any color. The first dimension is hue, which is the actual color type. The second is saturation, which describes the purity or strength of the color. The third is either lightness (in HSL) or value (in HSV).

Hsl-and-hsv
Hsl-and-hsv

In these models, the central vertical axis represents neutral gray colors. This axis ranges from white at the top to black at the bottom. The hue is measured as an angle around this central axis. The distance from the axis represents the saturation level. The distance along the axis represents the lightness or value.

Though they share many features, HSL and HSV treat saturation differently. In the HSV model, pure colors sit at the outer edge with a value of 1. Mixing these colors with black creates shades without changing the saturation. However, in HSV, adding white to a color is called tinting, and it reduces the saturation. In the HSL model, pure colors have a lightness of 0.5. In HSL, saturation stays the same when you create a tint with white. Only when you mix a color with both black and white do you create a "tone" with less saturation.

hsv-hexagons-to-circles
hsv-hexagons-to-circles

This difference is why HSV is sometimes called a hexcone model and HSL a bi-hexcone model.

The development of these models was a major step for computer graphics. In the mid-1970s, pioneers at PARC and NYIT introduced the HSV model. Alvy Ray Smith formally described HSV in 1978. That same year, Joblove and Greenberg described the HSL model. They designed HSL to mimic traditional color mixing, such as using paints. HSL uses dimensions like hue, lightness, and chroma to match human vision. In 1979, the company Tektronix began using HSL in their graphics terminals. These models became popular because they were extremely fast to compute. They could run in real time on the hardware available in the 1970s.

To understand the math, we can look at how these models are derived. Scientists start with the RGB color cube. They tilt this cube onto its corner so black is at the bottom and white is at the top.

Hsl-and-hsv
Hsl-and-hsv

The hue is then measured by the angle around this new vertical axis. The hue starts at 0 degrees for red. It passes through green at 120 degrees and blue at 240 degrees. It finally returns to red at 360 degrees. The models then transform this tilted cube into a cylinder. This process turns the complex RGB coordinates into a simple, circular path for users.

Despite their usefulness, these models have some technical limitations. They are simple transformations of the device-dependent RGB model. This means the physical colors depend on the specific red, green, and blue lights of your screen. Each unique device has its own unique HSL and HSV spaces. Furthermore, these models are criticized for lacking perceptual uniformity. They do not perfectly separate color-making attributes in the way the human eye does. Because of this, more advanced models like CIELAB or CIECAM02 are used when perfect accuracy is needed.

hsv-polar-coord-hue-chroma
hsv-polar-coord-hue-chroma

These newer models are more computationally intensive but better at matching human sight.

Today, HSL and HSV remain essential tools in the digital world. You can find them in almost every color picker in image editing software. They are also used in computer vision and image analysis. While a third model called HSI (hue, saturation, and intensity) is common in computer vision, HSL and HSV are the most widespread. They bridge the gap between how machines process light and how humans experience color. By turning math into geometry, they make digital creativity much more accessible for everyone.

707 words

Where will your curiosity go next?

Keep exploring at your chosen reading level.

🖼️ Images & Media (14)
File:Hsl-hsv models.svg
Hsl-hsv models.svg
File:unintuitive-rgb.png
unintuitive-rgb.png
File:Hsl-and-hsv.svg
Hsl-and-hsv.svg
File:HSL-HSV hue and chroma.svg
HSL-HSV hue and chroma.svg
File:hsv-hexagons-to-circles.svg
hsv-hexagons-to-circles.svg
File:hsv-polar-coord-hue-chroma.svg
hsv-polar-coord-hue-chroma.svg
File:hsl-hsv chroma-lightness slices.svg
hsl-hsv chroma-lightness slices.svg
File:hsi saturation-intensity slices.svg
hsi saturation-intensity slices.svg
File:hsl-hsv-colorpickers.svg
hsl-hsv-colorpickers.svg
File:Xv hsv-modification.png
Xv hsv-modification.png
File:PS 2.5 hue-saturation tool.png
PS 2.5 hue-saturation tool.png
File:Avid-hsl.png
Avid-hsl.png

+ 2 more

More to explore

🔬 Go deeper

More advanced topics to explore

🪜 Step back

Simpler topics to build understanding

What is Nepedia?

A free, ad-free encyclopedia for children. Every article is written at five reading levels, so the same page works for a five-year-old and a fifteen-year-old — use the level switcher above to see this one change. No account needed to read.