hsl()

Defining complementary colors with hsl() can be done with a single formula, as they are positioned on the same diameter of the color wheel. If θ is the hue angle of a color, its complementary one will have 180deg - θ as its hue angle.

hsl(120deg 75% 25%)
hsl(120deg 75% 25% / 0.6)

The function also accepts a legacy syntax in which all values are separated with commas.

Functional notation: hsl(H S L[ / A])

H

A <number>, an <angle>, or the keyword none, which represents the hue angle. More details on this type can be found on the <hue> reference.

S

A <percentage> or the keyword none, which represents saturation. Here 100% is completely saturated, while 0% is completely unsaturated (gray).

L

A <percentage> or the keyword none, which represents lightness. Here 100% is white, 0% is black, and 50% is "normal".

A Optional

An <alpha-value> or the keyword none, where the number 1 corresponds to 100% (full opacity).

<hsl()> = 
  <legacy-hsl-syntax>  |
  <modern-hsl-syntax>  

<legacy-hsl-syntax> = 
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )  

<modern-hsl-syntax> = 
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<hue> = 
  <number>  |
  <angle>   

<alpha-value> = 
  <number>      |
  <percentage>  

The hsl() function works well with conic-gradient() as both deal with angles.

<div></div>

CSS

div {
  width: 100px;
  height: 100px;
  background: conic-gradient(
    hsl(360 100% 50%),
    hsl(315 100% 50%),
    hsl(270 100% 50%),
    hsl(225 100% 50%),
    hsl(180 100% 50%),
    hsl(135 100% 50%),
    hsl(90 100% 50%),
    hsl(45 100% 50%),
    hsl(0 100% 50%)
  );
  clip-path: circle(closest-side);
}

Result

For legacy reasons, the hsl() function accepts a form in which all values are separated using commas.

HTML

<div class="space-separated"></div>
<div class="comma-separated"></div>

CSS

div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.space-separated {
  background-color: hsl(0 100% 50% / 50%);
}

div.comma-separated {
  background-color: hsl(0, 100%, 50%, 50%);
}

Result

The legacy hsla() syntax is an alias for hsl().

HTML

<div class="hsl"></div>
<div class="hsla"></div>

CSS

div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.hsl {
  background-color: hsl(0 100% 50% / 50%);
}

div.hsla {
  background-color: hsla(0, 100%, 50%, 50%);
}

Result

• List of all color notations
• <hue> data type
• Color picker tool on MDN
• Color picker by Lea Verou