CSS Function - hsl()

The hsl() function in CSS is used to define a color using the red, green, and blue color channels, as per the hue, saturation and lightness components of these color channels. It allows you to specify a color by specifying the intensity of each of these three primary colors.

To add the color transparency, an optional alpha component can be passed to the hsl() function.

Using a single formula, complementary colors can be defined with hsl(). If the hue angle of a color is 0, then its complementary color will have the hue angle as 180deg - 0.

The legacy function hsla() is an alias to function hsl() and they both accept the same parameters and behave in the same manner.

Possible values

The functional notation for hsl() function is hsl(H S L[ / A]).

  • H: can contain either of the format(s), that represents the hue angle :

    • a <number>: any number between 0 and 255.

    • an <angle>: any value between 0deg and 360deg.

    • keyword none

  • S: can contain either of the format(s), that represents the saturation:

    • a <percentage>: any value between 0% (completely saturated) and 100% (completely unsaturated).

    • keyword none

  • L: can contain either of the format(s), that represents the lightness:

    • a <percentage>: any value between 0% (completely black), 100% (completely white) and 50% (normal).

    • keyword none

  • A: represents the transparency of the color. It is an optional value.

    • <alpha-value>: any number between 0 and 1, where 1 corresponds to full opacity and 0 corresponds to full transparency.

    • keyword none

The values of the red, green and blue components are rounded in serialization, as the functional notation serializes it as sRGB.

Syntax

hsl(60deg 25% 50%) | hsl(60deg, 25%, 50%) | hsl(60deg 25% 50% / 0.5)

CSS hsl() - With or Without alpha value

Following is an example showing the usage of hsl() function where all the three values are passed with and without the alpha value (number values):

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   .color-hsl-nocomma{
      background-color: hsl(70deg 60% 80%);
   }
   .color-hsl-comma{
      background-color: hsl(20deg, 90%, 20%);
      color: white;
   }
   .color-hsl-alpha-number{
      background-color: hsla(20deg 80% 60% /1);
   }
   .color-hsl-alpha-percent{
      background-color: hsla(90deg 80% 60% /0.6);
   }
   </style>
</head>
<body>
   <div class="color-hsl-nocomma">hsl(70deg 60% 80%)</div>
   <div class="color-hsl-comma">hsl(20deg, 90%, 20%)</div>
   <div class="color-hsl-alpha-number">hsla(20deg 80% 60% /1)</div>
   <div class="color-hsl-alpha-percent">hsla(90deg 80% 60% /0.6)</div>
</body>
</html>

CSS hsl() - Using 'none' as one of the value

Following is an example showing the usage of hsl() function where one of the values is none (hue, saturation, lightness and alpha value):

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   .hsl-hue-none{
      background-color: hsl(none 60% 80%);
   }
   .hsl-sat-none{
      background-color: hsl(20deg, none, 20%);
   
   }
   .hsl-light-none{
      background-color: hsla(20deg 80% none /1);
      color: white;
   }
   .hsl-alpha-none{
      background-color: hsla(90deg 80% 60% /none);
   }
   </style>
</head>
<body>
   <div class="hsl-hue-none">hsl(none 60% 80%)</div>
   <div class="hsl-sat-none">hsl(20deg, none, 20%)</div>
   <div class="hsl-light-none">hsla(20deg 80% none /1)</div>
   <div class="hsl-alpha-none">hsla(90deg 80% 60% /none)</div>
</body>
</html>

CSS hsl() - Using conic-gradient()

Following is an example showing the usage of hsl() function in a conic-gradient() function:

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   .hsl-conic{
      background: conic-gradient(hsl(270 100% 50%),
      hsl(180 100% 50%),
      hsl(0 100% 50%),
      hsl(90 100% 50%));
   }
   </style>
</head>
<body>
   <p>hsl() with conic-gradient()</p>
   <div class="hsl-conic"></div>
</body>
</html>
Advertisements