hsl() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The hsl() CSS function is used to define colors based on the Hue, Saturation, and Lightness color model. It allows designers to specify colors in a more intuitive way than traditional RGB values, focusing on the visual attributes of the color rather than its numeric red, green, and blue components. The function takes three main components: the hue, which is an angle on the color wheel (0–360 degrees) representing the color type; saturation, which controls the intensity or vividness of the color; and lightness, which adjusts how light or dark the color appears.

One of the advantages of hsl() is its ease of adjusting a color scheme programmatically. For instance, increasing the lightness value can create tints of a color, while decreasing it can create shades. It works seamlessly with CSS properties that accept color values, such as color, background-color, border-color, and even in gradients like linear-gradient().

For example, a bright red can be written as:

color: hsl(0, 100%, 50%);

Here, 0 represents the hue for red, 100% makes it fully saturated, and 50% sets it to medium lightness. A softer pink tint can be achieved by increasing the lightness:

color: hsl(0, 100%, 75%);

The hsl() function also has a sibling function called hsla(), which adds an alpha channel for transparency, allowing for semi-transparent color effects. This makes it especially useful in modern design systems that require layering and overlays without resorting to hexadecimal RGBA values.

Overall, hsl() provides a more perceptually intuitive way to manipulate colors in CSS, making it ideal for dynamic themes, color adjustments, and visually consistent designs.

Syntax

hsl() = hsl( <hue>, <saturation>, <lightness> )

Values

huerepresents an angle of the color circle. You can specify the value as an angle in degrees (e.g. 180deg) or simply as a number (e.g. 180). For example, blue is at 240 degrees, so it could be written as either 240deg or 240. By definition, red=0°=360°, with the other colors spread around the circle, so green=120°, blue=240°, etc.
saturationsaturation is expressed as a percentage. It represents the amount of saturation in the color. For example, 100% is fully saturated (more colorful and intense), while 0 is a fully-unsaturated gray.
lightnesslightness is also expressed as a percentage. It represents the amount of light in the color. For lightness, 50% is the "normal" setting, while 100% is white and 0% is black.

Example

HTML

<body>



    <h2>CSS hsl() Swatches</h2>



    <div class="card base-color">Base Color (Blue)</div>

    <div class="card lighter-color">Lighter Version</div>

    <div class="card desaturated-color">Desaturated (Grayscale)</div>

    <div class="card complementary-color">Complementary (Orange)</div>



</body>

CSS

/* General styling for the swatches */

.card {

    width: 300px;

    height: 60px;

    margin: 10px 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-weight: bold;

    font-family: sans-serif;

    border-radius: 8px;

}



/* Syntax: hsl(hue, saturation, lightness)

  - Hue: 0 to 360 (0 is red, 120 is green, 240 is blue)

  - Saturation: 0% to 100% (0% is gray, 100% is full color)

  - Lightness: 0% to 100% (0% is black, 100% is white)

*/



.base-color {

    background-color: hsl(210, 100%, 50%); /* A vibrant blue */

}



.lighter-color {

    /* We just increased Lightness from 50% to 80% */

    background-color: hsl(210, 100%, 80%); 

}



.desaturated-color {

    /* We dropped Saturation from 100% to 20% */

    background-color: hsl(210, 20%, 50%);

}



.complementary-color {

    /* We shifted Hue by 180 degrees (210 - 180 = 30) to get Orange */

    background-color: hsl(30, 100%, 50%);

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS hsl() function. Hover over a browser icon to see the version that first introduced support for this CSS function.