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.
Note: The legacy hsla()
syntax is an alias for hsl()
, accepting the same parameters and behaving in the same way.
Try it
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.
Syntax
css
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.
Values
Functional notation: hsl(H S L[ / A])
H
-
A
<number>
or an<angle>
representing the hue angle. More details on this type can be found on the<hue>
reference. S
-
A
<percentage>
representing saturation, where100%
is completely saturated, while0%
is completely unsaturated (gray). L
-
A
<percentage>
representing lightness, where100%
is white,0%
is black, and50%
is "normal". A
Optional-
An
<alpha-value>
, where the number1
corresponds to100%
(full opacity).
Formal syntax
Examples
Using hsl() with conic-gradient()
The hsl()
function works well with conic-gradient()
as both deal with angles.
CSS
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
Legacy syntax: comma-separated values
For legacy reasons, the hsl()
function accepts a form in which all values are separated using commas.
HTML
html
<div class="space-separated"></div>
<div class="comma-separated"></div>
CSS
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
Legacy syntax: hsla()
The legacy hsla()
syntax is an alias for hsl()
.
HTML
html
<div class="hsl"></div>
<div class="hsla"></div>
CSS
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
Specifications
Specification |
---|
CSS Color Module Level 4 # the-hsl-notation |
Browser compatibility
BCD tables only load in the browser
See also
<color>
: the data type that represents any color- HSL Color Picker