About HSL Color

HSL color is a color model that represents colors with hue, saturation, and lightness. Unlike RGB, which directly specifies the strength of red, green, and blue light, HSL separates color tone, vividness, and brightness, making it useful for color adjustment and CSS design work.

For example, major colors such as red can be represented as follows.

To include transparency, add an alpha value. For example, semi-transparent red can be represented as hsl(0deg 100% 50% / 0.5).

As input, you can use the space-separated notation hsl(0deg 100% 50%) as well as the legacy comma-separated notation hsl(0deg, 100%, 50%).

Handling of hue, saturation, and lightness

Hue is handled as an angle, and values greater than 360deg or negative values are normalized to the range from 0deg to 360deg. For example, hsl(360deg 100% 50%) is handled as the same color as hsl(0deg 100% 50%), and hsl(-120deg 100% 50%) as the same color as hsl(240deg 100% 50%).

Saturation and lightness are handled in the range from 0% to 100%. When saturation is 0%, the color becomes an achromatic gray regardless of hue. When lightness is 0%, the color is black; when it is 100%, the color is white.

Difference between HSL and RGB

RGB directly specifies the red, green, and blue components, so it is close to screen display and image data. HSL separates hue, saturation, and lightness, making operations such as “make it brighter while keeping the same hue” or “lower only the saturation” easier.

However, HSL is not a perceptually uniform color space. When you want to handle visual brightness or color differences more easily, color spaces such as Lab, LCH, Oklab, and Oklch may be used.