Sobre a cor HWB

A cor HWB é um modelo de cor que representa cores com três componentes: matiz, brancura e negrura. O matiz especifica o tom base, enquanto a brancura e a negrura indicam quanto branco e preto são misturados. Isso torna intuitivo clarear, escurecer ou aproximar uma cor do cinza.

Por exemplo, cores principais como o vermelho podem ser representadas assim.

Para incluir transparência, adicione um valor alfa. Por exemplo, o vermelho semitransparente pode ser representado como hwb(0deg 0% 0% / 0.5).

Tratamento de matiz, brancura e negrura

O matiz é tratado como um ângulo, e valores maiores que 360deg ou negativos são normalizados para o intervalo de 0deg a 360deg. Por exemplo, hwb(360deg 0% 0%) é tratado como a mesma cor que hwb(0deg 0% 0%), e hwb(-120deg 0% 0%) como a mesma cor que hwb(240deg 0% 0%).

A brancura e a negrura são tratadas no intervalo de 0% a 100%. Uma brancura maior aproxima a cor do branco, e uma negrura maior a aproxima do preto. Se a soma da brancura e da negrura for 100% ou mais, a cor é tratada como acinzentada independentemente do matiz.

Diferença entre HWB e HSL

HSL ajusta a cor com saturação e luminosidade, sendo adequado para especificar vivacidade e brilho. HWB ajusta a cor pela quantidade de branco e preto misturados, facilitando descrever operações como “deixar mais branco mantendo o mesmo matiz” ou “adicionar preto para escurecer”.

No entanto, HWB também não é um espaço de cor perceptualmente uniforme. Para lidar com brilho visual ou diferenças de cor com mais facilidade, podem ser usados espaços de cor como Lab, LCH, Oklab e Oklch.