Cores CSS HSL

HSL significa matiz, saturação e leveza.

Valor HSL

Em CSS, uma cor pode ser especificada usando matiz, saturação e luminosidade (HSL) na 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 luminosidade também é uma porcentagem, 0% é preto, 50% não é claro nem escuro, 100% é branco

Experimente misturando os valores HSL abaixo:

Saturação

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.

Leveza

A claridade de uma cor pode ser descrita como quanta luz você quer dar à cor, onde 0% significa sem luz (preto), 50% significa 50% luz (nem escuro nem claro) 100% significa luminosidade total (branco).

Tons de cinza

Os tons de cinza geralmente são definidos definindo o matiz e a saturação como 0 e ajustando a luminosidade de 0% a 100% para obter tons mais escuros/mais claros:

Valor HSLA

Os valores de cor HSLA são uma extensão dos valores de cor 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 de HSLA abaixo: