CSS hsl()

The hsl() function defines the hue, saturation, and luminance of an element’s color value.

Syntax

<property>: hsl(hue, saturation, luminance);

• hue: A unitless number value. The base of the color. Represents an angle in the color wheel from 0 to 360.
• saturation: A percentage value. Represents the saturation of the base color. 0% represents a color with no saturation at all and it shows gray. 100% means the base color is full.
• luminance: A percentage value. Represents the brightness of the base color. 0% represents a color with no luminance at all and it shows black. 100% means full lightness and it shows white. 50% means the base color is full.

Example 1

h1 {
  color: hsl(60, 100%, 50%);
}

Copy to clipboard
Copy to clipboard

Sets the font color of the h1 element to yellow:

Example 2

h1 {
  color: hsl(270, 50%, 40%);
}

Copy to clipboard
Copy to clipboard

Sets the font color of the h1 element to a shade of purple: