hsl()
The hsl()
functional notation expresses a given color according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency.
Note: CSS Colors Level 4 made some changes to hsl()
. In browsers that support the standard hsla()
is an alias for hsl()
, they accept the same parameters and behave the same way.
The Level 4 specification also allows for space-separated in addition to comma-separated values.
Syntax
hsl(100, 100%, 50%) /* #5f0 */
hsl(235, 100%, 50%, .5) /* #0015ff with 50% opacity */
hsl(235 100% 50%) /* CSS Colors 4 space-separated values */
hsl(235 100% 50% / .5); /* #0015ff with 50% opacity, using CSS Colors 4 space-separated values */
Values
- Functional notation:
hsl(H, S, L[, A])
-
H
(hue) is an<angle>
of the color circle given indeg
s,rad
s,grad
s, orturn
s in CSS Color Module Level 4. When written as a unitless<number>
, it is interpreted as degrees, as specified in CSS Color Module Level 3. By definition, red=0deg=360deg, with the other colors spread around the circle, so green=120deg, blue=240deg, etc. As an<angle>
, it implicitly wraps around such that -120deg=240deg, 480deg=120deg, -1turn=1turn, etc.S
(saturation) andL
(lightness) are percentages.100%
saturation is completely saturated, while0%
is completely unsaturated (gray).100%
lightness is white,0%
lightness is black, and50%
lightness is "normal."A
(alpha) can be a<number>
between0
and1
, or a<percentage>
, where the number1
corresponds to100%
(full opacity). - Functional notation:
hsl(H S L[ / A])
-
CSS Colors Level 4 adds support for space-separated values in the functional notation.
Browser compatibility
BCD tables only load in the browser
Space-separated values
BCD tables only load in the browser
Accepts alpha value
BCD tables only load in the browser