Cores HTML HSL e HSLA
HSL significa matiz, saturação e leveza.
Os valores de cor HSLA são uma extensão do HSL com um canal Alpha (opacidade).
Valores de cores HSL
Em HTML, 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 é um valor percentual, 0% é preto e 100% é branco.
Experimente misturando os valores HSL abaixo:
hsl(0, 100%, 50%)
MATIZ
SATURAÇÃO
LEVEZA
Exemplo
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.
Exemplo
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).
Exemplo
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:
Exemplo
Valores de cores 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:
hsla (0, 100%, 50%, 0,5)
MATIZ
SATURAÇÃO
LEVEZA
ALFA