Cores HTML HSL e HSLA
O objetivo deste artigo é fornecer uma visão geral dos modelos de cores HSL e HSLA, como eles funcionam e como podem ser utilizados em documentos HTML. Além de comparar os códigos de cores HSL e HSLA com os códigos de cores RGB e HEX tradicionais, também veremos alguns exemplos práticos.
Cores Html Os valores HSL com um canal Alfa (opacidade) são chamados de valores de cores HSLA .
Valores HSL de cores HTML
Usando HTML , você pode especificar o matiz, a saturação e a luminosidade ( HSL ) de uma cor no seguinte formato:
hsl( matiz , saturação , luminosidade )
A tonalidade de cores varia de 0 a 360 graus na roda de cores . É vermelho quando é 0 , verde quando é 120 e azul quando é 240 em cores Html .
O valor de saturação é expresso como uma porcentagem, em que 0% representa cinza e 100% representa cores completas .
Como um valor percentual, a luminosidade também pode ser expressa como 0% preto , 100% branco ou qualquer combinação deles.
Tente misturar os valores HSL abaixo:
hsl(0, 100%, 50%)
MATIZ
SATURAÇÃO
LEVEZA
Example
Exemplo de Explicação
O exemplo acima mostra um código HTML que define uma página da Web com seis títulos ( elementos h1 ), cada um com uma cor de fundo diferente especificada usando o modelo de cores HSL. O modelo de cores HSL significa Hue, Saturation e Lightness e fornece uma maneira de especificar cores definindo o matiz, a saturação e a luminosidade da cor.
No código fornecido, o atributo style é usado para adicionar informações de estilo a cada elemento h1. A propriedade background-color define a cor de fundo do elemento e o valor é especificado usando o modelo de cores HSL. O primeiro valor na função HSL representa o matiz da cor, que pode variar de 0 a 360 graus. O segundo valor representa a saturação, que pode variar de 0% (cinza) a 100% (totalmente saturado). O terceiro valor representa a luminosidade, que pode variar de 0% (preto) a 100% (branco).
Por exemplo, o primeiro elemento h1 tem uma cor de fundo especificada usando o valor HSL “hsl(0, 100%, 50%)”. Isso significa que a cor tem um matiz de 0 graus (vermelho), uma saturação de 100% (totalmente saturada) e uma luminosidade de 50% (brilho médio). Da mesma forma, os outros elementos h1 têm valores HSL diferentes que resultam em cores diferentes com matizes, saturação e luminosidade variados.
Quando esse código for renderizado por um navegador da Web, ele exibirá uma página com seis títulos, cada um com uma cor de fundo diferente especificada usando o modelo de cores HSL. As cores variam de vermelho claro (#ff0000) a roxo escuro (#6a5acd), dependendo dos valores específicos de HSL usados.
Saturação
A saturação da cor pode ser definida como a intensidade de uma cor em cores Html .
Não há tons de cinza quando se trata de 100%. é cor pura
Embora 50% da cor seja cinza, você ainda pode vê-la.
Você não pode ver a cor em 0% porque é completamente cinza.
Example
Tons de cinza
Os tons de cinza geralmente são formados definindo o matiz e a saturação como zero e ajustando a luminosidade de 0% a 100% em cores Html :
Example
Leveza
A luminosidade é medida pela quantidade de luz que você deseja que uma cor obtenha, sendo 0% sem luz (preto), 50% sendo 50% claro (nem escuro nem claro) e 100% sendo total luminosidade (branco).
Example
Cores HTML Valores HSLA
Um valor de cor com um canal Alfa é chamado de valor HSLA
A opacidade de uma cor é especificada por este valor.
Os valores de cores especificados em HSLA são os seguintes:
hsla( matiz, saturação , luminosidade,
alfa )
Alpha representa o grau de transparência, variando de 0,0 (transparência total) a 1,0 (sem transparência):
Você pode experimentar misturando os valores HSLA abaixo:
hsla(0, 100%, 50%, 0,5)
MATIZ
SATURAÇÃO
LEVEZA
ALFA
Example
Vantagens de usar HTML Cores HSL e HSLA
As cores HTML baseadas nos modelos de cores HSL e HSLA têm várias vantagens sobre as baseadas em outros modelos de cores. A seguir estão algumas das principais vantagens:
Intuitivo: os modelos de cores HSL geralmente são preferidos porque são baseados em conceitos familiares, como matiz, saturação e luminosidade. Os designers podem criar cores que correspondam à sua visão com mais facilidade.
Faixa de matiz: os designers podem criar uma variedade de cores com HSL, incluindo tons sutis e pastéis que outros modelos de cores não podem.
Claridade e escuridão: os modelos de cores HSL podem ser ajustados com o parâmetro de luminosidade para determinar quão clara ou escura é uma cor. Você pode facilmente criar tons de uma cor e adicionar profundidade e dimensão.
Opacidade: os modelos de cores HSLA permitem que os designers especifiquem a transparência de uma cor, dando-lhes maior controle sobre como as cores interagem com outros elementos.
Acessibilidade: Para aumentar a acessibilidade, as cores HSL e HSLA devem ser contrastadas com a cor de fundo de forma adequada. É essencial que todos os usuários, incluindo aqueles com deficiência, tenham acesso ao conteúdo da web.
