As cores são os componentes mais importantes usados ​​para dar uma aparência melhor a qualquer aplicativo ou site. Você pode adicionar cores aos elementos HTML usando diferentes propriedades CSS. No CSS, existem três métodos avançados, como RGB, Código Hex e HSL, que podem ser utilizados para especificar cores para elementos HTML.

Esta postagem o guiará sobre os métodos de cor HSL e HSLA. Então, vamos mergulhar!

O que são cores html hsl?

As cores HTML podem ser usadas especificando matiz, saturação e leveza usando o método HSL (). O formato de função que usamos para indicar que a cor HSL é mencionado abaixo:

HSL (matiz, saturação, leveza)

Vamos discuti -los um por um!

• ““matiz”: Hue é a cor básica na roda de cores. É selecionado da roda especificando o grau de 0 a 360 na roda de cores. Por exemplo, 0 indica vermelho, 120 representa verde e 240 produz a cor azul.
• ““saturação”: A intensidade da cor é conhecida como saturação. É o valor percentual em que 100% indica a cor pura, 50% indica que a cor tem um tom de 50% de cinza e 0% representa o cinza completo, o que significa que não podemos ver nenhuma cor.
• ““leveza”: A leveza mostra quanta luz queremos adicionar à cor. É também um valor percentual em que 100% de leveza define branco, 0% define cor preta e 50% define a cor normal.

Exemplo

No arquivo html, primeiro, adicione uma div e adicione um título e um parágrafo dentro dele:

Nome do tópico: equipe

Nós somos um time. Trabalhamos para uma missão comum.

Agora, vamos estilizar a seguinte maneira:

• O "largura”O valor da propriedade da div é definido como“100%”.
• ““altura" como "200px”.
• Atribua o “cor de fundo"Propriedade como"HSL (233, 63%, 89%)”, Onde 233 indica Hue, 63% representa a saturação e 89% representa a leveza.
• O "tamanho da fonte”O valor é definido como“30px”.
• O "alinhamento de texto”O valor da propriedade é definido como“Centro”.

div
largura: 100%;
Altura: 200px;
Background-Color: HSL (233, 63%, 89%);
tamanho da fonte: 30px;
Alinhamento de texto: centro;

Agora, estilize o

tag fornecendo cor HSL para ele. Para aplicar a cor ao texto, utilizaremos o “cor”Valor da propriedade como“HSL (273, 99%, 28%)”:

H1
Cor: HSL (273, 99%, 28%);

Vamos atribuir uma cor HSL diferente ao

marcação. Para fazer isso, o “cor”O valor da propriedade é definido como“HSL (12, 94%, 25%)”:

P
Cor: HSL (12, 94%, 25%);

Aqui está um resultado das cores HSL adicionadas:

Existe uma extensão do método de cor HSL conhecido como HSLA.

O que são cores HSLA?

As cores HSLA podem ser definidas como o modelo de cores HSLA, pois é uma extensão do HSL. A sintaxe da função hsla () é dada da seguinte forma:

HSLA (matiz, saturação, leveza, alfa)

Aqui, o valor alfa tem um intervalo entre “0.0" para "1.0”, Onde 0.0 produz totalmente transparente e 1.0 produz totalmente opaco.

Exemplo

Vamos dar um exemplo para aplicar cores HSLA aos títulos adicionados:

HSLA (89, 100%, 64%, 0.5)

HSLA (89, 100%, 64%, 1)

Em seguida, aplique as cores HSLA como plano de fundo nos títulos adicionados com “0.5" e "1Valores alfa, respectivamente. Observe que os valores dos outros parâmetros são os mesmos:

.Cabeçallho 1
Background-Color: HSLA (89, 100%, 64%, 0.5);

.Heading2
Background-Color: HSLA (89, 100%, 64%, 1);

A imagem abaixo representa as duas mesmas cores com diferentes valores alfa:

Nós compilamos as informações essenciais relacionadas às cores HTML HSL e HSLA.

Conclusão

Usando o método HSL (), as cores HTML HSL podem ser aplicadas especificando o valor da matiz, saturação e leveza. No entanto, a HSLA é uma extensão do HSL com o canal alfa. Este modelo de cores pode ser aplicado com a ajuda da função hsla (). Este blog explicou o que são as cores HTML HSL e HSLA e como aplicá -las aos componentes HTML.