Cores HSL: o jeito mais amigável de escrever cores em CSS

Uma cor HSL é escrita 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 meio). É o mesmo violeta que #7c3bed, mas você consegue lê-lo. Quer mais claro? Aumente o último número. Mais suave? Diminua o do meio. Essa característica, um significado por número, é o que faz do HSL o jeito 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 fica em 0 e de novo em 360, o amarelo em 60, o verde em 120, o ciano em 180, o azul em 240 e o magenta em 300. Mudar o matiz gira a cor mantendo a intensidade dela.

A saturação é a quantidade de cor. Em 0% todo matiz vira o mesmo cinza; em 100% ele fica tão vivo quanto a tela permite. A luminosidade vai do preto em 0% ao branco em 100%, com o matiz puro em 50%. O modelo é explicado de forma mais ampla em matiz, saturação e brilho, que também mostra como o HSB dos apps de design difere do HSL do CSS.

Sintaxe HSL em CSS

Há duas grafias. A moderna separa os valores com espaços e coloca o alfa depois de uma barra. A antiga usa vírgulas e uma função hsla() separada. Os navegadores aceitam as duas, e hsl() agora também aceita alfa, então hsla() não é mais necessária. A referência do 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%);
}

Monte uma escala de cores mudando a luminosidade

É aqui que o HSL mostra o seu valor. Fixe o matiz e a saturação, avance a luminosidade em passos e você tem uma família de tons, matizes e sombras que claramente pertencem ao mesmo grupo. Aqui está um violeta em sete passos, com o hex correspondente a cada um.

Junte isso a propriedades personalizadas de CSS e o seu tema inteiro depende de dois números. Guarde o matiz e a saturação uma vez e escolha uma luminosidade por função. Mude a variável do matiz e a interface inteira passa de violeta para 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

Navegadores mais novos também aceitam a sintaxe de cores relativas, que lê as partes HSL de qualquer cor e permite ajustá-las. hsl(from var(--brand) h s calc(l + 15%)) dá uma versão mais clara da cor da marca, seja ela qual for, mesmo que tenha sido definida em hex. Confira o suporte atual no caniuse antes de depender disso e mantenha uma alternativa simples. Para misturar duas cores em vez de ajustar uma, a ferramenta é color-mix() em CSS.

Onde o HSL engana você

O HSL é um rearranjo do RGB, não um modelo da visão humana. A luminosidade dele é uma média simples entre o canal mais forte e o mais fraco, então ignora o fato de que nossos olhos veem o amarelo e o verde como muito mais brilhantes que o azul. Resultado: duas cores com a mesma luminosidade HSL podem parecer completamente diferentes em brilho.

Isso importa em dois lugares. Primeiro, uma escala feita avançando a luminosidade HSL fica desigual entre matizes: um amarelo em 50% é claro demais para texto, enquanto um azul em 50% passa com folga. Sempre teste pares reais num verificador de contraste. Segundo, gradientes e paletas geradas que giram o matiz com luminosidade fixa vão clarear e escurecer ao passar pelo amarelo e pelo azul.

O OKLCH mantém a mesma ideia amigável (luminosidade, colorido, matiz), mas mede a luminosidade do jeito que os olhos medem. Se você está começando um novo design system, ele é o padrão melhor; se está editando um CSS existente ou quer um ajuste rápido e legível, o HSL continua ótimo.

Convertendo HSL para hex e de volta

Raramente você precisa fazer a conta, já que toda ferramenta de design e o painel de devtools do navegador convertem para você: clique numa amostra de cor no devtools do Chrome ou do Firefox e alterne entre os formatos. Por baixo dos panos, o HSL é convertido primeiro para RGB, e de RGB para hex é uma conta simples de pares, explicada em hex para RGB. Espere pequenas diferenças de arredondamento: hsl(262 83% 58%) cai em #7c3bed, a um passo do #7c3aed com que você talvez tenha começado, porque porcentagens inteiras não alcançam todos os 16,7 milhões de valores hex.

Se você cria no Gradiently, quase nunca mexe nesses números: um Mark traz a própria paleta, e no Pro o kit de marca guarda as suas cores para o Designer aplicá-las por você.