HSL significa matiz, saturação e luminosidade.
Em CSS, uma cor pode ser especificada usando matiz, saturação e luminosidade (HSL) em a forma:
hsl(matiz, saturação, luminosidade)
Matiz é um grau na roda de cores de 0 a 360. 0 é vermelho, 120 é verde e 240 é azul.
A saturação é um valor percentual. 0% significa um tom de cinza e 100% é a cor completa.
A leveza também é uma porcentagem. 0% é preto, 50% não é nem claro nem escuro, 100% é branco
Experimente misturar os valores HSL abaixo:
HUE
SATURATION
LIGHTNESS
Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>Specify colors using HSL values</h1>
<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h2>
<h2 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h2>
<h2 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h2>
<h2 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h2>
<h2 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h2>
</body>
</html>
A saturação pode ser descrita como a intensidade de uma cor.
100% é cor pura, sem tons de cinza.
50% é 50% cinza, mas você ainda pode ver a cor.
0% é completamente cinza; você não pode mais ver a cor.
Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>HSL Saturation</h1>
<p>The second parameter of hsl() defines the saturation. Less saturation mean less color. 0% is completely gray:</p>
<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h2>
<h2 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h2>
<h2 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h2>
<h2 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h2>
<h2 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h2>
</body>
</html>
A luminosidade de uma cor pode ser descrita como a quantidade de luz que você deseja dar à cor, onde 0% significa nenhuma luz (preto), 50% significa 50% de luz (nem escuro nem claro) e 100% significa luminosidade total (branco).
Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>HSL Lightness</h1>
<p>The third parameter of hsl() defines the lightness. 0% means black, and 100% means white:</p>
<h2 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h2>
<h2 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h2>
<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h2>
<h2 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h2>
<h2 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h2>
</body>
</html>
Os tons de cinza geralmente são definidos definindo o matiz e a saturação como 0 e ajuste a luminosidade de 0% a 100% para obter tons mais escuros/mais claros:
Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>Shades of gray</h1>
<p>With HSL, shades of gray are made by setting the saturation to 0%, and adjusting the lightness from 0% to 100%:</p>
<h2 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h2>
<h2 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h2>
<h2 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h2>
<h2 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h2>
<h2 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h2>
<h2 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h2>
</body>
</html>
Os valores de cores HSLA são uma extensão dos valores de cores HSL com um canal alfa - que especifica a opacidade de uma cor.
Um valor de cor HSLA é especificado com:
hsla(matiz, saturação, luminosidade, alfa)
O parâmetro alfa é um número entre 0,0 (totalmente transparente) e 1,0 (nada transparente):
Experimente misturando os valores HSLA abaixo:
HUE
SATURATION
LIGHTNESS
ALPHA
Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>Make transparent colors with HSLA</h1>
<h2 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h2>
</body>
</html>