Culori HSL în CSS

Valoarea HSL

HSL înseamnă nuanță (hue), saturație (saturation) și luminozitate (lightness).

Se scrie astfel hsl(hue, saturation, lightness).

Nuanța este un grad pe roata culorilor de la 0 la 360: 0 (sau 360) este roșu, 120 este verde, iar 240 este albastru. Saturația este un procent, unde 0% este gri, iar 100% este culoarea completă. Luminozitatea este de asemenea un procent, unde 0% este negru, 50% este normal, iar 100% este alb.

Culori HSL

Șase culori scrise ca valori hsl().

O pagină HTML care arată mai multe culori scrise ca valori hsl().

Creează șase titluri cu culori de fundal: hsl(0, 100%, 50%), hsl(240, 100%, 50%), hsl(147, 50%, 47%), hsl(300, 76%, 72%), hsl(39, 100%, 50%) și hsl(248, 53%, 58%). Etichetează fiecare cu valoarea sa.

> Rezultat: pagină HTML completă

Prompt

O pagină HTML care arată mai multe culori scrise ca valori hsl(). Creează șase titluri cu culori de fundal: hsl(0, 100%, 50%), hsl(240, 100%, 50%), hsl(147, 50%, 47%), hsl(300, 76%, 72%), hsl(39, 100%, 50%) și hsl(248, 53%, 58%). Etichetează fiecare cu valoarea sa.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

</body>
</html>

Saturație

Saturația este intensitatea unei culori.

100% este culoarea pură, fără gri. 50% este pe jumătate gri, dar culoarea încă se vede. 0% este complet gri, deci culoarea a dispărut.

Exemplu

Aceeași nuanță și luminozitate, cu saturația redusă treptat.

O pagină HTML care arată cum saturația schimbă o culoare în hsl().

Păstrează nuanța la 0 și luminozitatea la 50%, și scade saturația pas cu pas: hsl(0, 100%, 50%), hsl(0, 80%, 50%), hsl(0, 60%, 50%), hsl(0, 40%, 50%), hsl(0, 20%, 50%) și hsl(0, 0%, 50%). Folosește-le ca fundaluri de titlu și etichetează fiecare.

> Rezultat: pagină HTML completă

Prompt

O pagină HTML care arată cum saturația schimbă o culoare în hsl(). Păstrează nuanța la 0 și luminozitatea la 50%, și scade saturația pas cu pas: hsl(0, 100%, 50%), hsl(0, 80%, 50%), hsl(0, 60%, 50%), hsl(0, 40%, 50%), hsl(0, 20%, 50%) și hsl(0, 0%, 50%). Folosește-le ca fundaluri de titlu și etichetează fiecare.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>

</body>
</html>

Luminozitate

Luminozitatea stabilește cât de multă lumină are culoarea. 0% înseamnă fără lumină (negru), 50% este normal, iar 100% este lumină completă (alb).

Exemplu

Aceeași nuanță și saturație, cu luminozitatea crescută treptat.

O pagină HTML care arată cum luminozitatea schimbă o culoare în hsl().

Păstrează nuanța la 0 și saturația la 100%, și crește luminozitatea pas cu pas: hsl(0, 100%, 0%), hsl(0, 100%, 25%), hsl(0, 100%, 50%), hsl(0, 100%, 75%), hsl(0, 100%, 90%) și hsl(0, 100%, 100%). Folosește-le ca fundaluri de titlu și etichetează fiecare.

> Rezultat: pagină HTML completă

Prompt

O pagină HTML care arată cum luminozitatea schimbă o culoare în hsl(). Păstrează nuanța la 0 și saturația la 100%, și crește luminozitatea pas cu pas: hsl(0, 100%, 0%), hsl(0, 100%, 25%), hsl(0, 100%, 50%), hsl(0, 100%, 75%), hsl(0, 100%, 90%) și hsl(0, 100%, 100%). Folosește-le ca fundaluri de titlu și etichetează fiecare.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>

</body>
</html>

Nuanțe de gri

Nuanțele de gri se obțin setând nuanța și saturația la 0 și modificând doar luminozitatea de la 0% la 100%.

Exemplu

Nuanța și saturația rămân la 0, în timp ce luminozitatea trece de la închis la deschis.

O pagină HTML care arată nuanțe de gri realizate cu HSL.

Păstrează nuanța și saturația la 0, și crește luminozitatea pas cu pas: hsl(0, 0%, 0%), hsl(0, 0%, 24%), hsl(0, 0%, 47%), hsl(0, 0%, 71%), hsl(0, 0%, 94%) și hsl(0, 0%, 100%). Folosește-le ca fundaluri de titlu și etichetează fiecare.

> Rezultat: pagină HTML completă

Prompt

O pagină HTML care arată nuanțe de gri realizate cu HSL. Păstrează nuanța și saturația la 0, și crește luminozitatea pas cu pas: hsl(0, 0%, 0%), hsl(0, 0%, 24%), hsl(0, 0%, 47%), hsl(0, 0%, 71%), hsl(0, 0%, 94%) și hsl(0, 0%, 100%). Folosește-le ca fundaluri de titlu și etichetează fiecare.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h1 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h1>
<h1 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h1>
<h1 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h1>
<h1 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h1>
<h1 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h1>
<h1 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h1>

</body>
</html>

Valoarea HSLA

HSLA adaugă un canal alfa la HSL, care stabilește opacitatea culorii.

Se scrie astfel hsla(hue, saturation, lightness, alpha). Alfa este un număr de la 0.0 (complet transparent) la 1.0 (complet opac).

Exemplu

Aceeași culoare la valori alfa crescânde, de la complet transparent la complet opac.

O pagină HTML care arată aceeași culoare HSL la niveluri diferite de alfa (opacitate) folosind hsla().

Creează șase titluri cu culoarea de fundal hsla(9, 100%, 64%, A), unde A merge de la 0, 0.2, 0.4, 0.6, 0.8 și 1. Etichetează fiecare astfel încât opacitatea crescândă să fie clară.

> Rezultat: pagină HTML completă

Prompt

O pagină HTML care arată aceeași culoare HSL la niveluri diferite de alfa (opacitate) folosind hsla(). Creează șase titluri cu culoarea de fundal hsla(9, 100%, 64%, A), unde A merge de la 0, 0.2, 0.4, 0.6, 0.8 și 1. Etichetează fiecare astfel încât opacitatea crescândă să fie clară.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

</body>
</html>