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% / 60%)
```


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>`, an `<angle>`, or the keyword `none`, which represents the hue angle. More details on this type can be found on the `<hue>` reference.

`S`

A `<percentage>` or the keyword `none`, which represents saturation. Here `100%` is completely saturated, while `0%` is completely unsaturated (gray).

`L`

A `<percentage>` or the keyword `none`, which represents lightness. Here `100%` is white, `0%` is black, and `50%` is "normal".

`A` Optional

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


**Note:** This functional notation serializes to sRGB values, and the values of the red, green, blue components may be rounded in serialization.

**Note:** See Missing color components for the effect of `none`.

### Formal syntax
```

<hsl()> =   
  <legacy-hsl-syntax>  |  
  <modern-hsl-syntax>    
  
<legacy-hsl-syntax> =   
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )    
  
<modern-hsl-syntax> =   
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | 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.
```

<div></div>
```


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


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


#### Result

Specifications
--------------

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

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* List of all color notations
* `<hue>` data type
* Color picker tool on MDN
* Color picker by Lea Verou