Função hsl() do CSS

Definição e uso

Definição e uso do CSS hsl() A função usa o modelo de cor tons-saturação-brilho (HSL) para especificar cores. Também pode adicionar um componente opcional alpha (representando a transparência da cor).

Dica:HSL representa tons (Hue), saturação (Saturation) e brilho (Lightness), é uma representação cúbica de cores.

Atenção:hsla() A função é hsl() Nome alternativo da função. Recomenda-se usar hsl() Função.

Exemplo

Exemplo 1

Definir diferentes cores HSL(A):

#p1 {background-color:hsl(120 100% 50%);} /* Verde */
#p2 {background-color:hsl(120 100% 75%);} /* Verde claro */
#p3 {background-color:hsl(120 100% 25%);} /* Verde escuro */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* Verde escuro com transparência */
#p5 {background-color:hsl(120 60% 70%);} /* Suave verde */
#p6 {background-color:hsl(290 100% 50%);} /* Púrpura */
#p7 {background-color:hsl(290 60% 70%);} /* Suave púrpura */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* Suave púrpura com transparência */

Experimente você mesmo

Exemplo 2

Usar a sintaxe antiga separada por vírgula de valores:

#p1 {cor-fundo: hsl(120, 100%, 50%);} /* Verde */
#p2 {cor-fundo: hsl(120, 100%, 75%);} /* Verde claro */
#p3 {cor-fundo: hsl(120, 100%, 25%);} /* Verde escuro */
#p4 {cor-fundo: hsl(120, 60%, 70%);} /* Verde suave */
#p5 {cor-fundo: hsl(290, 100%, 50%);} /* Púrpura */
#p6 {cor-fundo: hsl(290, 60%, 70%);} /* Púrpura suave */

Experimente você mesmo

Sintaxe do CSS

Sintaxe de valor absoluto

hsl(tono saturação luminosidade / A)
Valor Descrição
tono Obrigatório. Define o ângulo no círculo cromático (de 0 a 360) - 0 (ou 360) é vermelho, 120 é verde, 240 é azul.
saturação

Obrigatório. Define a saturação da cor; 0% é cinza, 100% é pleno (saturação completa).

Também pode usar None (igual a 0%).
luminosidade

Obrigatório. Define a luminosidade da cor; 0% é preto, 50% é normal, 100% é branco.

Também pode usar None (igual a 0%).
/ A

Opcional. Representa o valor do canal alpha da cor (de 0% (ou 0) - completamente transparente a 100% (ou 100) - completamente opaco).

Também pode usar None (representa sem canal alpha).

O valor padrão é 100%.

Sintaxe de valor relativo

hsl(from cor tono saturação luminosidade / A)
Valor Descrição
from cor

Começa com a palavra-chave from, seguida de um valor de cor que representa a cor original.

Esta é a cor original baseada na cor relativa.
tono Obrigatório. Define o ângulo no círculo cromático (de 0 a 360) - 0 (ou 360) é vermelho, 120 é verde, 240 é azul.
saturação

Obrigatório. Define a saturação da cor; 0% é cinza, 100% é pleno (saturação completa).

Também pode usar None (igual a 0%).
luminosidade

Obrigatório. Define a luminosidade da cor; 0% é preto, 50% é normal, 100% é branco.

Também pode usar None (igual a 0%).
/ A

Opcional. Representa o valor do canal alpha da cor (de 0% (ou 0) - completamente transparente a 100% (ou 100) - completamente opaco).

Também pode usar None (representa sem canal alpha).

O valor padrão é 100%.

Detalhes técnicos

Versão: CSS3

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente a função pela primeira vez.

Chrome Edge Firefox Safari Opera
hsl()
1 9 1 3.1 9.5
com alpha Parâmetro hsl()
65 79 52 12.1 52
Parâmetros separados por espaço
65 79 52 12.1 52

Páginas relacionadas

Tutorial:Cor HSL do CSS

Referência:Cores CSS

Referência:Função hwb() do CSS

Referência:Função lab() do CSS

Referência:Função lch() do CSS

Referência:A função CSS oklab()

Referência:A função CSS oklch()