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 theta is the angle of a color, its complementary one will have 180deg-theta as its hue coordinate.

hue

An <angle> of the color wheel given in one of the following units: deg, rad, grad, or turn. When written as a unitless <number>, it is interpreted as degrees. By definition, red is 0deg, with the other colors spread around the circle, so green is 120deg, blue is 240deg, etc. As an <angle> is periodic, it implicitly wraps around such that -120deg = 240deg, 480deg = 120deg, -1turn = 1turn, and so on. This color wheel helps finding the angle associated with a color:

saturation

A <percentage> where 100% is completely saturated, while 0% is completely unsaturated (gray).

lightness

A <percentage> where 100% is white, 0% is black, and 50% is "normal".

alpha Optional

A <percentage> or a <number> between 0 and 1, where the number 1 corresponds to 100% and means full opacity, while 0 corresponds to 0% and means fully transparent.

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

<div></div>

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);
}

• The function hsla(), an historical alias for this function.
• The <color> type that represents any color.
• HSL Color Picker