Nepedia
Back to Discover
Fluent Reader
💻

HSL and HSV

technology Maturity 11-13 Next article →

Computers create colors by mixing red, green, and blue light. This is known as the RGB model.

unintuitive-rgb
unintuitive-rgb

While this works well for machines, it is not easy for people to use. If you want to make an orange less colorful, you have to change all three colors at once. This is because the RGB values for red, green, and blue do not match how our eyes see. To make things easier, experts created new ways to organize color. These systems are called HSL and HSV. They help us pick colors in a way that feels much more natural.

Hsl-hsv models
Hsl-hsv models

These models use a cylinder shape to hold all the colors. Imagine a tall tube where every color has its own special spot. The first part is hue, which is the actual color like red or blue. Hue is measured as an angle around the center of the tube. The second part is saturation, which describes how strong or pure a color looks. The third part is lightness or value. This tells us how bright or dark a color is.

Hsl-and-hsv
Hsl-and-hsv

In these models, the very center of the tube is always gray. The very top or bottom is usually white or black. The outside edge of the tube holds the brightest, purest colors.

Scientists and computer pioneers developed these ideas in the 1970s. They wanted to make computer graphics better for artists. In 1978, Alvy Ray Smith described the HSV model. This model is also sometimes called HSB, where the B stands for brightness. In that same year, Joblove and Greenberg described the HSL model. They wanted a system that worked like mixing paint. In 1979, a company called Tektronix used HSL in their graphics machines. These models were very fast for the computers of that time to calculate.

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

There are a few important rules for how these colors move. In both models, the hue starts at red at 0 degrees. It moves to green at 120 degrees and blue at 240 degrees. Then it wraps back to red at 360 degrees. The two models treat saturation a bit differently. In HSL, you can add white to a color to make a tint. In HSV, adding white changes the saturation.

Some people even use a third model called HSI for computer vision. HSI stands for hue, saturation, and intensity.

You can see these models in action every day. Most color pickers in image editing software use them. They help designers choose the perfect shade for a digital painting. Even though they are simple, they are very helpful. Some newer models like CIELAB are even better at matching human vision. However, HSL and HSV remain very popular because they are so fast. They turn the hard math of RGB into a simple, circular path.

Hsl-and-hsv
Hsl-and-hsv
461 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.