HSL and HSV

Computers use colors to make pictures.

They use two special ways to pick colors. These ways are called HSL and HSV.

One way helps us pick a color like red. We can then pick how bright it is. We can also pick how strong the color looks.

These tools are easy for people to use. They help us pick colors in art programs. They also work in color pickers.

People made these tools in the 1970s. They help us work with colors much faster. Do you have a favorite color?

Computers make colors by mixing red, green, and blue light. This is called the RGB model.

But RGB can be hard for people to use. Changing one color might change the whole look. To fix this, experts made HSL and HSV in the 1970s.

These models use a cylinder shape to organize colors. They use three main parts. The first part is hue. Hue is the color itself, like red or blue. It is measured as an angle around the center. The second part is saturation. Saturation is how strong or pure a color looks. The third part is lightness or value. This tells us how bright a color is.

HSL and HSV are used in many tools today. You can find them in color pickers and art software. They help us pick colors in a way that feels natural. HSL stands for hue, saturation, and lightness. HSV stands for hue, saturation, and value. These models are very fast for computers to use. This makes them great for making digital art.

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

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.

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.

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.

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.

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

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.

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).

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.

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.

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.

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.