📃 🥘 🍫 Esqueça o RGB e o HEX 🎓 👴🏻 👨🏼‍⚕️

Existem várias maneiras de representar cores em CSS. Um deles é o sistema HSL. Neste artigo, mostrarei quais possibilidades ele abre para um designer de layout.

O que é HSL?

O nome do formato HSL deriva de uma combinação das primeiras letras Matiz (matiz), Saturar (saturação) e Luminosidade (luminosidade ou brilho).

Matiz é o valor da cor na roda de cores e é definido em graus. 0 ° corresponde ao vermelho, 120 ° ao verde e 240 ° ao azul. O valor da tonalidade pode variar de 0 a 359.

Saturação é a intensidade da cor, medida em porcentagem de 0% a 100%. Determina a que distância a cor está do cinza com o mesmo brilho.

O brilho caracteriza a luminosidade da cor e é indicado como uma porcentagem de 0% a 100%. Valores pequenos tornam a cor mais escura e valores altos mais claros, valores extremos 0% e 100% correspondem a preto e branco.

Benefícios HSL ()

A principal vantagem do HSL é a capacidade de especificar características de cores independentemente uma da outra . Isso abre grandes oportunidades para você. Você pode facilmente tornar a cor mais brilhante, mais escura, mais saturada ou descolorida. E enquanto mantém sua sombra. Ou vice-versa - altere os tons sem alterar sua saturação ou brilho. Geralmente, os pré-processadores são usados para usar esses recursos, mas você também pode ficar sem eles.

Alguns exemplos

Cores derivadas da mesma tonalidade

Uma das tarefas mais comuns: criar um componente que terá uma única sombra básica, mas consistirá em várias variações. No meu exemplo, este é um alerta típico em que a cor do texto, plano de fundo e traçado tem o mesmo tom e saturação, mas com brilho diferente:

.success {  
  border-color:     hsl(120, 50%, 40%);
  color:            hsl(120, 50%, 20%);
  background-color: hsl(120, 50%, 90%);
}

Veja como é bonito e claro? É imediatamente óbvio que esta é uma "família" de flores. Em outros formatos, seria algo parecido com isto:

/* rgb */
.alert {
  border-color:     rgb(51, 153, 51);
  color:            rgb(25, 77, 25);
  background-color: rgb(217, 242, 217);
}

/* hex */
.alert {
  border-color:     #339933;
  color:            #194d19;
  background-color: #d9f2d9;
}

Não conheço você, mas é difícil para mim olhar para esse código para dizer se essas cores estão de alguma forma conectadas ou não.

Mas estes são triviais. O verdadeiro poder é revelado ao usar propriedades personalizadas de css.

Como se costuma dizer, observe suas mãos. Se criarmos algum componente da cor, por exemplo, uma tonalidade, uma variável, podemos facilmente criar um número infinito de variações de nosso componente alterando apenas o tom básico nele. E todos os derivados serão repelidos a partir dele.

.alert {
  border-color:     hsl(var(--hue), 50%, 40%);
  color:            hsl(var(--hue), 50%, 20%);
  background-color: hsl(var(--hue), 50%, 90%);
}

Branqueamento

Neste exemplo, o botão desligar possui uma saturação reduzida. Ele ainda tem um tom azul sutil, mas é quase cinza. E quando você passa o mouse, o botão mantém a tonalidade e a saturação, mas fica mais escuro.

Para resolver esse problema, basta alterar apenas um dos três parâmetros para obter uma cor derivada, mas semelhante. O que ao usar rgb ou hex não é tão fácil de fazer.

Como no primeiro exemplo, você pode alterar facilmente o matiz sem afetar todas as outras características de cores do seu componente.

Herança de cores

Uma das técnicas mais legais: criar uma sombra, a partir da outra. Isso é conseguido pela adição simples em calc ().

:root{
  --hue: 120;
}

header {
  background-color: hsl(var(--hue), 30%, 20%)
}

header button {
  background-color: hsl(calc(var(--hue) + 130), 80%, 50%)
}

Neste exemplo, o matiz do botão depende (+ 130 ° na roda de cores) do matiz do contêiner.

Portanto, de uma maneira simples, você pode criar paletas de cores flexíveis completas para seus sites, definindo apenas uma sombra básica e partindo dela.

E todos os seus componentes manterão a saturação e o brilho, conforme demonstrado nos exemplos anteriores.

Futuro

Na especificação CSS Color Module Level 4 , novas funções foram descritas: lab () e lch () para especificar cores nos formatos com o mesmo nome. O LCH tem a mesma flexibilidade que o hsl, mas traz várias melhorias, de olho nos dispositivos modernos. Você pode ler mais sobre isso no artigo “ Cores LCH no CSS: o que, por que e como? "

Total

Na minha opinião, o formato hsl tem uma flexibilidade fantástica em comparação com as alternativas. Em combinação com variáveis, você praticamente traz todas as possibilidades para trabalhar com cores, desde pré-processadores até CSS nativo.

PS Desculpe pelo título alto :)

Esqueça o RGB e o HEX