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 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)
hue
An <angle> of the color wheel given in one of the following units: deg, rad, grad, or turn. When written as a unitless <number>, it is interpreted as degrees. By definition, red is 0deg, with the other colors spread around the circle, so green is 120deg, blue is 240deg, 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> where 100% is completely saturated, while 0% is completely unsaturated (gray).
lightness
A <percentage> where 100% is white, 0% is black, and 50% is "normal".
alpha
Optional
A <percentage> or a <number> between 0 and 1, where the number 1 corresponds to 100% and means full opacity, while 0 corresponds to 0% and means fully transparent.
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); }
| Specification |
|---|
| CSS Color Module Level 4 # the-hsl-notation |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
hsl |
1
|
12
|
1
|
9
|
9.5
|
3.1
|
≤37
|
18
|
4
|
10.1
|
2
|
1.0
|
alpha_parameter |
65
|
79
|
52
|
No
|
52
|
12.1
|
65
|
65
|
52
|
47
|
12.2
|
9.0
|
space_separated_parameters |
65
|
79
|
52
|
No
|
52
|
12.1
|
65
|
65
|
52
|
47
|
12.2
|
9.0
|
hsla(), an historical alias for this function.<color> type that represents any color. © 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
| Name | CSS |
| Version | |
| Badge |
|
| Last Updated | 2022-04-27T17:24:15Z |