hsl()
The hsl()
functional notation expresses an sRGB color according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency.
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.
Syntax
/* Syntax with space-separated values */
hsl(hue saturation lightness)
hsl(hue saturation lightness / alpha)
/* Syntax with comma-separated values */
hsl(hue, saturation, lightness)
hsl(hue, saturation, lightness, alpha)
Values
hue
-
An
<angle>
of the color wheel given in one of the following units:deg
,rad
,grad
, orturn
. When written as a unitless<number>
, it is interpreted as degrees. By definition, red is0deg
, with the other colors spread around the circle, so green is120deg
, blue is240deg
, 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>
where100%
is completely saturated, while0%
is completely unsaturated (gray). lightness
-
A
<percentage>
where100%
is white,0%
is black, and50%
is "normal". alpha
Optional-
A
<percentage>
or a<number>
between0
and1
, where the number1
corresponds to100%
and means full opacity, while0
corresponds to0%
and means fully transparent.
Examples
The hsl()
function works well with conic-gradient()
as both deal with angles.
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);
}
Specifications
Specification |
---|
CSS Color Module Level 4 # the-hsl-notation |
Browser compatibility
BCD tables only load in the browser
See also
- The function
hsla()
, an historical alias for this function. - The
<color>
type that represents any color. - HSL Color Picker