# HSL

* :green\_book: [What is HSL?](https://blog.webdevsimplified.com/2021-06/hsl-color-format/) (Kyle)

{% tabs %}
{% tab title="hue" %}
![color wheel](https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfvEFZnSBhKT6fJmus0%2F-Mh7O_YmExIh5_NLx37W%2F-Mh7PpH4lBoGHtOql8gb%2Fcolor_wheel.png?alt=media\&token=454db2e5-d47a-4bfe-9f41-f19fcbf83d55)

* values: **0 \~ 360**
 (degrees)  
* **complimentary color**: color on the **opposite side** of the color wheel.
  {% endtab %}

{% tab title="saturation" %}
![saturation](https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfvEFZnSBhKT6fJmus0%2F-Mh7QBqm8nD-_V-9zTcN%2F-Mh7QgDELDiXagjeSqHD%2Fsaturation.png?alt=media\&token=0a99c687-a43e-494b-9d93-491383dd15fb)

* determines how **gray** looking the color is.
* **0% \~ 100%**
  {% endtab %}

{% tab title="lightness" %}
![lightness](https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfvEFZnSBhKT6fJmus0%2F-Mh7QsfDnlrPglMQuRMN%2F-Mh7R6EZiF2gdoXxAplH%2Flightness.png?alt=media\&token=00a7a887-aa2e-4c5c-aea8-a96f4424b779)

* determines how **white** or **black** a color is. 
* **0% \~ 100%**
* **50%** means **no additional white or black** added to the color. ⭐️
  {% endtab %}

{% tab title="alpha" %}

* **0** (**transparent**) \~ **1** (**opaque**)
  {% endtab %}
  {% endtabs %}

## code examples

{% tabs %}
{% tab title="parameters" %}

| H            | S              | L              | A          |
| ------------ | -------------- | -------------- | ---------- |
| **0 \~ 360** | **0% \~ 100%** | **0% \~ 100%** | **0 \~ 1** |

```css
.bg {
  background-color: hsl(0, 100%, 50%);		/* pure red: #FF0000  */
	background-color: hsla(0, 100%, 50%, 0.5);	/* alpha: 0 ~ 1 */
}
```

{% endtab %}

{% tab title="10% darker" %}

```css
hsl(16, 95%, 58%)
/*           ╰ ╯                   */

/* drop the lightness value by 10% */
hsl(16, 95%, 48%)
/*           ╰ ╯                   */
```

{% endtab %}

{% tab title="on hover" %}

```css
#container {

    --lightness-offset: 0%;					/* ⭐️ define: css var */

    background-color: hsl(200, 100%,
        calc(50% + var(--lightness-offset))	/* ⭐️ variable lightness */
    );

    display: inline-block;
    padding: 4px 8px 4px 12px;
}

#container::before {
    content: "hover on me❗️";
}

/* change "lightness", "content" on hover */
#container:hover {
    --lightness-offset: -10%;       			/* ⭐️ 10% darker */
}

#container:hover::before {
    content: "10% darker❗️";
}
```

{% endtab %}
{% endtabs %}