Usando cores HSL em CSS

Pela minha experiência, a maioria das cores que vejo as pessoas usando em CSS são hexadecimais e RGB. Recentemente, comecei a ver mais uso de cores HSL, no entanto, ainda acho que todo o potencial do HSL é negligenciado. Com a ajuda deste artigo, gostaria de mostrar como o HSL pode realmente nos ajudar a trabalhar melhor com cores em CSS.

Introdução

Normalmente, usamos códigos de cores hexadecimais (cores hexadecimais) que são bons, mas têm alguns problemas:

• Eles são limitantes;
• Eles são difíceis de entender de lê-los.

Por “limitado”, quero dizer que não é fácil alterar a cor sem abrir uma roda de cores e escolher uma cor você mesmo. Além disso, não é fácil adivinhar qual é a cor olhando para o código hexadecimal.

Considere a figura a seguir:

Escolhi uma cor hexadecimal para um azul celeste e uma mais escura. Observe que as cores hexadecimais não estão relacionadas entre si. É difícil dizer que ambos são azuis, mas com tons diferentes.

Em um cenário da vida real, talvez seja necessário criar um tom mais claro ou mais escuro de uma cor para testar ou validar algo rapidamente. Com cores hexadecimais, isso não é possível até que você abra o seletor de cores.

Felizmente, as cores HSL podem nos ajudar a resolver esse problema específico e abre muitas possibilidades para nós.

O que é HSL?

HSL significa matiz, saturação e leveza. É baseado na roda de cores RGB. Cada cor tem um ângulo e um valor percentual para os valores de saturação e luminosidade.

Vamos dar um exemplo da cor azul celeste que discutimos anteriormente. Primeiro, escolhemos a cor como costumamos fazer em um seletor de cores e nos certificamos de obter o valor HSL para ela.

Nota : Estou usando o aplicativo Sketch, mas você usa qualquer ferramenta de design que desejar.

Considere a figura a seguir:

Observe que os valores HSL estão lá. O primeiro é o ângulo, que representa o ângulo da cor que temos. Neste caso, é azul celeste. Assim que tivermos o ângulo, podemos começar a ajustar a saturação e o brilho conforme nossas necessidades.

Saturação

A saturação controla a saturação da cor. 0% é completamente insaturado, enquanto 100% é totalmente saturado.

Leveza

Quanto à luminosidade , ela controla o quão clara ou escura é a cor. 0% é preto e 100% é branco.

Considere a figura a seguir:

Com isso, temos três valores que representam cor, ângulo, saturação e brilho. Aqui está como podemos usar a cor em CSS:

 .element { background-color: hsl(196, 73%, 62%); }

Ao modificar o ângulo de cor, podemos obter cores semelhantes em saturação e luminosidade à base. Isso é muito útil ao trabalhar em novas cores de marca, pois pode criar um conjunto consistente de cores de marca secundárias.

Considere a figura a seguir:

Você sente que as três cores estão relacionadas entre si em termos de como a cor é saturada e como é escura ou clara? Isso foi conseguido alterando apenas o ângulo de cor. Isto é o que há de bom nas cores HSL. É mais amigável para ler e editar do que qualquer outro tipo de cor.

Casos de uso para cores HSL

Mudando as cores ao passar o mouse

Quando uma cor em um componente específico precisa parecer mais escura ao passar o mouse, as cores HSL podem ser perfeitas para isso. Pode ser útil para componentes como botões e cartões.

 :root { --primary-h: 221; --primary-s: 72%; --primary-l: 62%; } .button { background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l)); } .button:hover { --primary-l: 54%; }

Observe como combinei variáveis ​​CSS com cores HSL. Ao passar o mouse, só preciso alterar o valor da luminosidade. Lembre-se, quanto maior o valor, mais leve. Para um tom mais escuro, precisamos reduzir o valor.

Uma combinação de cores coloridas

O HSL pode ser útil quando temos um design que usa a mesma cor, mas com tons diferentes. Considere o seguinte projeto:

A navegação do cabeçalho principal tem a cor primária, enquanto a navegação secundária tem um tom mais claro. Com HSL, podemos obter a tonalidade mais clara facilmente alterando o valor da luminosidade .

Isso pode ser extremamente útil ao ter uma interface do usuário com vários temas. Eu criei dois temas e mudar de um para outro requer apenas que eu edite o grau de matiz.

Primeiro tema:

Segundo tema:

Paletas de cores

Ao alterar a luminosidade, podemos criar um conjunto de tons para uma cor que pode ser usada em toda a interface do usuário sempre que possível.

Isso é útil para sistemas de design em que os designers fornecem aos desenvolvedores os tons para cada cor da marca.

Aqui está uma demonstração interativa que mostra isso. O controle deslizante de entrada altera apenas o valor do matiz, e o restante dos tons muda com base nisso.

Cor branca personalizada

Muitas vezes, precisamos colorir um texto com a cor branca para destacar o texto. Essa cor branca é chata, e podemos substituí-la por um tom bem claro da cor que temos.

Considere o seguinte exemplo:

Observe como o branco à direita é demais. Podemos substituí-lo por um branco personalizado derivado de um tom muito claro da cor que temos. Na minha opinião, é muito melhor.

Variações de um botão

Outro caso de uso útil para cores HSL é quando temos opções primárias e secundárias que são da mesma cor, mas com tons diferentes. Neste exemplo, o botão secundário tem uma tonalidade muito clara da cor principal. As cores HSL são perfeitas para isso.

 :root { --primary-h: 221; --primary-s: 72%; --primary-l: 62%; } .button { background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l)); } .button--secondary { --primary-l: 90%; color: #222; } .button--ghost { --primary-l: 90%; background-color: transparent; border: 3px solid hsl(var(--primary-h), var(--primary-s), var(--primary-l)); }

Ajustar as variações do botão primário é rápido e pode ser estendido mais para uso mais amplo. Alterar o valor de hue mudará todos os temas dos botões.

Efeitos Dinâmicos Desbotados

Em alguns casos, podemos precisar de um gradiente para ter um tom muito claro da outra parada de cor. Com HSL, podemos usar a mesma cor, mas com um valor de luminosidade diferente para a segunda.

 .section { background: linear-gradient(to left, hsl(var(--primary-h), var(--primary-s), var(--primary-l)), hsl(var(--primary-h), var(--primary-s), 95%)); } .section-2 { --primary-h: 167; }

O gradiente começa da direita com uma cor sólida e depois desaparece para o tom mais claro. Isso pode ser usado para uma seção de herói decorativo, por exemplo.

Isso é tudo com os casos de uso. Espero que você tenha aprendido algo novo e útil.

Conclusão

As cores HSL são muito poderosas quando as usamos da maneira certa. Eles podem nos poupar tempo e esforço e até nos ajudar a explorar opções de como aplicar cores ao design.