Colors HSL

What are HSL colors?

The HSL (Hue, Saturation, Lightness) color model is a way of describing colors that is based on three characteristics:

• Hue: This is the primary color. Determines the type of color, its position on the color wheel (from red to purple). It is measured in degrees (from 0 to 360).
• Saturation: Characterizes the intensity of a color, its purity. It is measured as a percentage (from 0% to 100%). The higher the saturation, the brighter the color. If saturation = 0%, then the color turns gray. If saturation = 100%, the color will be as bright (saturated) as possible.
• Lightness: Determines how light or dark the color is. It is measured as a percentage (from 0% to 100%). 0% is black, 100% is white, and 50% color will be as pure and saturated as possible.

Where is HSL used?

• Webdesign and Graphics: HSL is handy for creating color schemes, adjusting brightness and color saturation.
• Image Editing: HSL is used to correct color, change hue, saturation, and brightness of images.
• Video editing: HSL helps you create color effects, change the colors of individual objects in the video.

HSL gives a more natural sense of color than other models such as RGB.

Advantages of HSL

• Intuitive: HSL is easier to understand and use than other color models such as RGB or HEX.
• Easy to adjust: Easy to change individual color parameters (hue, saturation, lightness) without affecting others.
• Wide range of colors: HSL allows you to create many different shades and color combinations.

Disadvantages of HSL

• Not always consistent with perception: HSL does not always accurately reflect how a person perceives color.
• May differ on different devices: HSL color may look slightly different on different screens and devices.
• Not always supported in all applications: Although HSL is popular in web design, not all software tools support it.

HSL Use Cases

• Web design: In CSS, you can use HSL to style individual elements:

  Example

  Using HSL colors when styling a web page:

  p {
    color: hsl(120, 100%, 50%);
  }

  It will be green (120°), with maximum saturation (100%) and medium lightness (50%).
• Gradient Creation: HSL allows you to create smooth transitions between different colors.
• Graphics: In graphic editors like Photoshop, you can adjust colors using HSL to create the shades you want.
• Creating color filters: HSL is used to create various color filters for photos and videos.

How do you get HSL color?

To get an HSL color, you can use an HSL calculator.

HSL Colors

HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+.

HSL stands for hue, saturation, and lightness.

HSL color values are specified with: hsl(hue, saturation, lightness).

Hue

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue.

Saturation

Saturation is a percentage value; 0% means a shade of gray, and 100% is the full color.

Lightness

Lightness is also a percentage; 0% is black, 100% is white.

Try it Yourself

HSL color values are supported in all major browsers.