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

Matiz, saturação e brilho (HSB) é uma forma de descrever qualquer cor com três botões simples. O matiz é que cor é, dado como um ângulo de 0 a 360 graus à volta do círculo cromático. A saturação é quão intensa é, de cinzento a 0 por cento a cor plena a 100 por cento. O brilho é a quantidade de luz que tem, de preto a 0 por cento à versão mais brilhante dessa cor a 100 por cento. Quando vês as cores assim, ajustar uma paleta deixa de ser adivinhar.

Matiz: que cor

O matiz é a posição no círculo cromático. Nos círculos de ecrã, o vermelho fica a 0 graus, o verde a 120 e o azul a 240, com o amarelo, o ciano e o magenta pelo meio. Como o matiz é um ângulo, as harmonias de cor tornam-se aritmética simples: soma 180 graus para um complementar, 120 para uma tríade.

Saturação: quão forte

A saturação controla quanto do matiz está presente. Baixa-a e a cor esvazia-se para o cinzento; sobe-a e a cor fica viva. A maioria das paletas refinadas vive bem abaixo da saturação total. As cores totalmente saturadas gritam, o que é certo para um autocolante de saldos e cansativo para um site inteiro. As paletas de cores esbatidas são sobretudo uma história de saturação mais baixa.

Brilho: quanta luz

No HSB, o brilho é o quão iluminada está a cor. A 0 por cento toda a cor é preta, seja qual for o matiz ou a saturação. A 100 por cento tens a versão mais brilhante que o ecrã consegue mostrar para esse matiz e saturação. Para fazer um pastel pálido em HSB manténs o brilho alto e baixas a saturação, o que mistura branco. É exatamente a ideia por trás de tons claros, médios e escuros.

HSB vs HSL: a diferença que confunde toda a gente

O HSL parece quase idêntico: matiz, saturação, luminosidade. O matiz é o mesmo. O que difere é o terceiro botão. No HSL, uma luminosidade de 50 por cento é a cor pura, 0 por cento é preto e 100 por cento é sempre branco. No HSB, um brilho de 100 por cento é a cor pura quando a saturação é total, e só chegas ao branco baixando também a saturação. Os valores de saturação também diferem entre os dois, por isso a mesma cor tem valores diferentes em cada um.

Usar HSL em CSS

O CSS entende hsl() diretamente, o que o torna útil para temas. Guarda o matiz numa variável e podes deslocar a cor de uma interface inteira com um só número. Existe também hwb() (matiz, brancura, negrura), que é mais próximo do HSB no espírito. Os pormenores estão na página de hsl() da MDN, e cores HSL vai mais longe.

: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 */

Porque é que luminosidade igual não parece igual

O HSB e o HSL são geometria, não perceção. O amarelo puro e o azul puro estão ambos a uma luminosidade HSL de 50 por cento, e no entanto o amarelo parece muito mais brilhante: pela fórmula WCAG a sua luminância relativa é cerca de 0,93 contra 0,07 do azul. Põe texto branco sobre cada um e a diferença é óbvia. É por isso que uma paleta construída variando a luminosidade HSL por igual pode parecer irregular, e porque o contraste do texto tem de ser sempre verificado e não assumido.

Os modelos percetuais resolvem isto. O OKLCH mantém a ideia amigável de luminosidade, croma e matiz, mas a sua luminosidade acompanha o que o olho vê, por isso os passos parecem uniformes. Para ajustes rápidos o HSB e o HSL são perfeitos; para uma escala de marca ou um gradiente que evita meios lamacentos, recorre ao OKLCH.

Formas rápidas de ajustar uma cor com HSB

• Demasiado forte: baixa a saturação 15 a 25 pontos antes de tocares em mais nada.
• Demasiado baça: sobe ligeiramente a saturação, ou empurra o matiz uns graus para o quente.
• Precisas de um estado de hover: baixa o brilho cerca de 10 pontos.
• Precisas de um tom de fundo: mantém o matiz, baixa muito a saturação e leva o brilho para perto de 100.
• Duas cores chocam: aproxima um matiz do outro, ou esbate uma delas.

Se preferires partir de um visual acabado em vez de três cursores, o Mercado do Gradiently deixa-te pesquisar Marks por palavras de cor como “verde-azulado profundo” ou “pêssego quente”.