Cor HSL: a forma mais amigável de escrever cores em CSS

Uma cor HSL escreve-se com três números: matiz, saturação e luminosidade. Em CSS, hsl(262 83% 58%) significa um matiz de 262 graus (violeta), 83% de saturação (viva) e 58% de luminosidade (um pouco acima do ponto médio). É o mesmo violeta que #7c3bed, mas consegues lê-lo. Queres mais claro? Sobe o último número. Mais suave? Baixa o do meio. Essa propriedade única, um significado por número, é a razão de o HSL ser a forma mais amigável de escrever cores à mão.

O que significam matiz, saturação e luminosidade

O matiz é uma posição no círculo cromático, dada em graus. O vermelho está em 0 e outra vez em 360, o amarelo em 60, o verde em 120, o ciano em 180, o azul em 240 e o magenta em 300. Mover o matiz roda a cor mantendo a sua força.

A saturação é a quantidade de cor. A 0% todos os matizes são o mesmo cinzento; a 100% é tão viva quanto o ecrã permite. A luminosidade vai do preto a 0% ao branco a 100%, com o matiz puro a 50%. O modelo é tratado de forma mais ampla em matiz, saturação e brilho, que também explica como o HSB das aplicações de design difere do HSL do CSS.

Sintaxe HSL em CSS

Há duas grafias. A moderna separa os valores com espaços e põe o alfa depois de uma barra. A mais antiga usa vírgulas e uma função hsla() à parte. Os navegadores aceitam ambas, e o hsl() já aceita alfa também, por isso o hsla() deixou de ser necessário. A referência da MDN para hsl() lista todas as formas.

.button {
  /* modern syntax */
  background: hsl(262 83% 58%);

  /* with 80% opacity */
  background: hsl(262 83% 58% / 0.8);

  /* older comma syntax, still valid */
  background: hsla(262, 83%, 58%, 0.8);

  /* hue can carry a unit */
  background: hsl(262deg 83% 58%);
}

Constrói uma escala de cor mudando a luminosidade

É aqui que o HSL ganha o seu lugar. Mantém o matiz e a saturação fixos, vai variando a luminosidade e tens uma família de tons claros e escuros que claramente pertencem juntos. Eis um violeta em sete passos, com o hex para que cada um se converte.

Combina isto com propriedades personalizadas de CSS e todo o teu tema fica dependente de dois números. Guarda o matiz e a saturação uma só vez e depois escolhe uma luminosidade por função. Muda a variável do matiz e toda a interface passa de violeta a verde-azulado, que é a ideia por trás de variáveis CSS para temas.

:root {
  --brand-h: 262;
  --brand-s: 83%;

  --brand-50:  hsl(var(--brand-h) var(--brand-s) 95%);
  --brand-200: hsl(var(--brand-h) var(--brand-s) 85%);
  --brand-500: hsl(var(--brand-h) var(--brand-s) 58%);
  --brand-800: hsl(var(--brand-h) var(--brand-s) 30%);
}

/* a teal theme is one line */
.theme-teal {
  --brand-h: 175;
}

Cores relativas

Os navegadores mais recentes suportam também a sintaxe de cor relativa, que lê as partes HSL de qualquer cor e te deixa ajustá-las. hsl(from var(--brand) h s calc(l + 15%)) dá uma versão mais clara seja qual for a cor da marca, mesmo que tenha sido definida em hex. Confirma o suporte atual no caniuse antes de contares com isso e mantém uma alternativa simples. Para misturar duas cores em vez de empurrar uma, color-mix() em CSS é a ferramenta.

Onde o HSL te engana

O HSL é um rearranjo do RGB, não um modelo da visão humana. A sua luminosidade é uma simples média do canal mais claro e do mais escuro, por isso ignora o facto de os nossos olhos verem o amarelo e o verde como muito mais brilhantes do que o azul. O resultado: duas cores com luminosidade HSL idêntica podem parecer completamente diferentes em brilho.

Isto importa em dois sítios. Primeiro, uma escala construída variando a luminosidade HSL será desigual entre matizes: um amarelo a 50% é claro demais para texto, enquanto um azul a 50% passa com facilidade. Testa sempre pares reais com um verificador de contraste. Segundo, os gradientes e as paletas geradas que rodam o matiz a luminosidade fixa vão ficar mais brilhantes e mais ténues ao passar pelo amarelo e pelo azul.

O OKLCH mantém a mesma ideia amigável (luminosidade, colorido, matiz) mas mede a luminosidade como os olhos o fazem. Se estás a começar um sistema de design novo, é a melhor opção por omissão; se estás a editar CSS existente ou queres um ajuste rápido e legível, o HSL continua perfeitamente bom.

Converter HSL em hex e vice-versa

Raramente precisas de fazer as contas, já que todas as ferramentas de design e painéis de ferramentas de programador dos navegadores convertem por ti: clica numa amostra de cor nas ferramentas do Chrome ou do Firefox e percorre os formatos. Por baixo, o HSL converte-se primeiro em RGB, e de RGB para hex é aritmética simples de pares, explicada em hex para RGB. Espera pequenas diferenças de arredondamento: hsl(262 83% 58%) cai em #7c3bed, um passo ao lado do #7c3aed com que podias ter começado, porque percentagens inteiras não conseguem atingir cada um dos 16,7 milhões de valores hex.

Se desenhas no Gradiently, raramente tocas nestes números: um Mark traz a sua própria paleta e, no Pro, o kit de marca guarda as tuas cores para que o Designer as aplique por ti.