Sass hsl() Function

Last Updated:

Sass hsl() Function

The hsl() function returns a color with the given hue, saturation, and lightness and the given alpha channel.

Example

SASS TO CSS CONVERTER
.foo{ color: hsl(210deg, 100%, 20%); }

Syntax

hsl($hue, $saturation, $lightness)

Parameter Value

ValueTypeExplanation
$hue Required Specifies the degree to which a stimulus can be described as similar to or different from stimuli that are described as red, green, blue, and yellow. The hue is a number between 0deg and 360deg (both are inclusive).
$saturation Required Specifies the intensity of color. The saturation is the numbers between 0% and 100% (both are inclusive).
$lightness Required Specifies the tone of the color. The lightness is the numbers between 0% and 100% (both are inclusive).

Return Value

ValueExplanation
color Returns a color with the given hue, saturation, and lightness.

Share this Page

Meet the Author