HSB and HSL

Updated: 02/04/2024 by Computer Hope

HSB (hue, saturation, and brightness) and HSL (hue, saturation, and lightness) are color spaces to help define and pick colors in computer graphics. With HSB, H (hue) is placed on a RGB color wheel, where 0° is red, 60° is yellow, 120° is green, 240° is blue, and 300° is magenta. If you were to go around the wheel (360° the maximum value), it would be back to red.

After the hue value is set, the S (saturation) level percentage determines how much of the color (100% to 0%). The hues are most vibrant on the farthest edge, and as you get closer to the center, the colors get lighter until hitting 0% (white).

Note

This saturation description and the following brightness description describe HSB. The saturation and lightness in HSL is handled differently and explained later.

Finally, the B (brightness) or V (value) is the percentage (100% to 0%) of how dark the color appears; 100% is the lightest, and 0% is black.

Note

HSL may also sometimes be abbreviated as HLS (hue, lightness, saturation). HSB is also known as HSV (hue, saturation, and value). Also, there is another related model, HSI (hue, saturation, and intensity).

HSB color wheel

The following color wheel starts at the hue red and goes around, showing each hue of the color wheel. This picture also shows the saturation starting at 100% and going to 0% (white). Finally, the wheel is shown as a cylinder to illustrate the lightness or value, starting at 100% and going to 0% (black).

HSB or HSL color wheel and examples of hues, saturation, and lightness.

Examples of HSB values

Below are each HSB value mentioned above in numerical format for a better example.

HSB vs. HSL

You most likely work with HSB in an image editor like Adobe Photoshop. However, if you're dealing with colors in HTML (hypertext markup language) or CSS (cascading style sheets), you're more likely to use HSL values, similar to HSB but not the same.

With HSL, the H (hue) is the same as what was mentioned earlier. However, the saturation starts at gray at 0% with a lightness of 50%, which is no additional white or black. The gray is removed from the color as the saturation increases to 100%.

Starting the L (lightness) of 50% gives the color the most vivid color as it has no additional white or black added to the color. Decreasing it below 50% makes the color lighter by adding more white. Increasing it above 50% makes the color darker by adding black.

Below is an example of how an HSL value for the color red is written in HTML using a CSS style.

<p style="color:hsl(0deg 100.00% 50.00%);">Red text.</p>

In the code above, the HSL value starts at 0° in the hue color wheel, with a 100% saturation (no gray), for pure red, and a 50% lightness (no additional white or black).

What is HSLA?

The "A" in HSLA is short for "alpha" and describes a fourth parameter that stores the alpha (transparency) value. With this parameter, "0" is completely transparent, and "1" is completely opaque. Below is an example of red text with 20% transparency.

<p style="color:hsl(0deg 100.00% 50.00% / 20%);">Red text.</p>

Below is an example of the code output. If you're viewing our page in dark mode, this text appears darker, and in light mode, it appears lighter because of the background of the text.

Red text.

Brightness, Color terms, Computer acronyms, Hue, RGB, Saturation, TLA