# 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 `theta` is the angle of a color, its complementary one will have `180deg-theta` as its hue coordinate.

## Syntax

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

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:

`S`

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

`L`

A `<percentage>` representing lightness, where `100%` is white, `0%` is black, and `50%` is "normal".

`A` Optional

An `<alpha-value>`, where the number `1` corresponds to `100%` (full opacity).

### Formal syntax

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

## Examples

### Using `hsl()` with `conic-gradient()`

The `hsl()` function works well with `conic-gradient()` as both deal with angles.

#### CSS

``````div {
width: 100px;
height: 100px;
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.

#### HTML

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

#### 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%);
}
``````

### Legacy syntax: hsla()

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

#### HTML

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

#### 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%);
}
``````

## Specifications

Specification
CSS Color Module Level 4
# the-hsl-notation

## Browser compatibility

BCD tables only load in the browser