Matiz, saturação e brilho (HSB) explicados de forma simples

Matiz, saturação e brilho (HSB) são um jeito de descrever qualquer cor com três controles simples. O matiz é qual cor ela é, dado como um ângulo de 0 a 360 graus no círculo cromático. A saturação é quão intensa ela é, do cinza em 0 por cento à cor plena em 100 por cento. O brilho é quanta luz ela tem, do preto em 0 por cento à versão mais brilhante daquela cor em 100 por cento. Quando você passa a ver as cores assim, ajustar uma paleta deixa de ser adivinhação.

Matiz: qual cor

O matiz é a posição no círculo cromático. Nos círculos de tela, o vermelho fica em 0 grau, o verde em 120 e o azul em 240, com amarelo, ciano e magenta entre eles. Como o matiz é um ângulo, as harmonias de cor viram aritmética simples: some 180 graus para a complementar, 120 para uma tríade.

Saturação: quão forte

A saturação controla quanto do matiz está presente. Diminua e a cor vai se esvaindo para o cinza; aumente e a cor fica viva. A maioria das paletas refinadas vive bem abaixo da saturação máxima. Cores totalmente saturadas gritam, o que é certo para um selo de promoção e cansativo para um site inteiro. Paletas de cores suaves são, em grande parte, uma questão de saturação mais baixa.

Brilho: quanta luz

No HSB, o brilho é quão iluminada a cor está. Em 0 por cento toda cor é preta, seja qual for o matiz ou a saturação. Em 100 por cento você tem a versão mais brilhante que a tela consegue mostrar para aquele matiz e saturação. Para fazer um tom pastel no HSB, você mantém o brilho alto e baixa a saturação, o que mistura branco. É exatamente a ideia por trás de tons, matizes e sombras.

HSB vs HSL: a diferença que confunde todo mundo

O HSL parece quase idêntico: matiz, saturação, luminosidade. O matiz é o mesmo. O que muda é o terceiro controle. No HSL, luminosidade de 50 por cento é a cor pura, 0 por cento é preto e 100 por cento é sempre branco. No HSB, brilho de 100 por cento é a cor pura quando a saturação está no máximo, e você só chega ao branco baixando também a saturação. Os números de saturação também diferem entre os dois, então a mesma cor tem valores diferentes em cada um.

Usando HSL em CSS

O CSS entende hsl() diretamente, o que é prático para temas. Guarde o matiz numa variável e você muda a cor de uma interface inteira com um número. Existe também hwb() (matiz, brancura, negrura), que se aproxima mais do espírito do HSB. Os detalhes estão na página de hsl() do MDN, e cores HSL vai mais fundo.

:root {
  --hue: 262;
  --brand: hsl(var(--hue) 83% 58%);   /* #7c3aed */
  --brand-soft: hsl(var(--hue) 83% 92%);
  --brand-deep: hsl(var(--hue) 70% 28%);
  --brand-muted: hsl(var(--hue) 25% 55%);
}

/* Change --hue to 175 and the whole set turns teal */

Por que a mesma luminosidade não parece igual

HSB e HSL são geometria, não percepção. O amarelo puro e o azul puro ficam ambos em luminosidade HSL de 50 por cento, mas o amarelo parece muito mais claro: pela fórmula das WCAG, a luminância relativa dele é de cerca de 0,93, contra 0,07 do azul. Coloque texto branco sobre cada um e a diferença fica óbvia. É por isso que uma paleta feita avançando a luminosidade HSL em passos iguais pode parecer irregular, e por isso o contraste do texto sempre precisa ser conferido, nunca presumido.

Modelos perceptuais resolvem isso. O OKLCH mantém a ideia amigável de luminosidade, croma e matiz, mas a luminosidade dele acompanha o que o olho vê, então os passos parecem uniformes. Para ajustes rápidos, HSB e HSL são perfeitos; para uma escala de marca ou um gradiente sem meios lamacentos, use o OKLCH.

Jeitos rápidos de ajustar uma cor com HSB

• Gritante demais: baixe a saturação de 15 a 25 pontos antes de mexer em qualquer outra coisa.
• Apagada demais: suba um pouco a saturação ou puxe o matiz alguns graus para o lado quente.
• Precisa de um estado de hover: baixe o brilho em cerca de 10 pontos.
• Precisa de um fundo levemente tingido: mantenha o matiz, baixe bastante a saturação e leve o brilho para perto de 100.
• Duas cores brigam: aproxime um matiz do outro ou suavize uma delas.

Se você prefere começar de um visual pronto em vez de três controles deslizantes, o Mercado do Gradiently permite pesquisar Marks por palavras de cor como “verde-azulado profundo” ou “pêssego quente”.