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 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)

/* Legacy hsla() syntax */
hsla(hue saturation lightness)
hsla(hue saturation lightness / alpha)

hsla(hue, saturation, lightness)
hsla(hue, saturation, lightness, alpha)

The hsl() function accepts three space-separated values, representing respectively hue, saturation, and lightness. Optionally it may also be given a slash / followed by a fourth value, representing alpha.

The function also accepts a legacy syntax in which all values are separated with commas.



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: A color wheel indicating the angle for the hue of the primary (red-green-blue) and secondary (yellow-cyan-magenta) colors


A <percentage> where 100% is completely saturated, while 0% is completely unsaturated (gray).


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.

Formal syntax

<hsl()> = 
hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )

<hue> =
<number> |

<alpha-value> =
<number> |


Using hsl() with conic-gradient()

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);


Legacy syntax: comma-separated values

For legacy reasons, the hsl() function accepts a form in which all values are separated using commas.


<div class="space-separated"></div>
<div class="comma-separated"></div>


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%);


Legacy syntax: hsla()

The legacy hsla() syntax is an alias for hsl().


<div class="hsl"></div>
<div class="hsla"></div>


div {
  width: 100px;
  height: 50px;
  margin: 1rem;

div.hsl {
  background-color: hsl(0 100% 50% / 50%);

div.hsla {
  background-color: hsl(0 100% 50% / 50%);



CSS Color Module Level 4
# the-hsl-notation

Browser compatibility

BCD tables only load in the browser

See also