Conversor HSL para HWB

HSL descreve uma cor pelo matiz na roda, a saturação como o quão vívida é a mistura e a luminosidade como o quão perto ela fica do preto ou do branco. HWB usa esse mesmo matiz e nomeia quanto branco e quanto preto se misturam ao matiz puro. Quem já escolhe cores em HSL costuma precisar de HWB ao escrever funções hwb() do CSS Color Module, ao falar com ferramentas de ilustração que expõem controles de brancura e negrura, ou ao documentar uma amostra como tinta mais sombra. Este conversor recebe o matiz em graus de zero a trezentos e sessenta e a saturação e a luminosidade como porcentagens de zero a cem, e devolve o triplo HWB correspondente com uma string CSS hwb().

Como o HSL se mapeia para matiz, brancura e negrura

O matiz é compartilhado por HSL e HWB: zero graus é vermelho puro, cento e vinte é verde puro, duzentos e quarenta é azul puro e trezentos e sessenta fecha o círculo de volta ao vermelho. O HSL então guarda a saturação como até onde um cinza da luminosidade escolhida é esticado rumo à cor plenamente cromática naquele matiz, e a luminosidade como a mistura entre preto a zero por cento, um tom médio perto de cinquenta por cento e branco a cem por cento.

O HWB nomeia a mesma cor como um matiz puro misturado com uma quantidade de branco e uma quantidade de preto. No intervalo unitário o mapeamento é de forma fechada e não precisa passar por RGB inteiro: o croma é um menos o valor absoluto de duas vezes a luminosidade menos um, tudo multiplicado pela saturação; a brancura é a luminosidade menos a metade do croma; a negrura é um menos a luminosidade menos a metade do croma.

Isso equivale a tomar o canal RGB mínimo como branco e um menos o canal RGB máximo como preto, que é como o CSS Color Module Level Four define HWB. Quando a saturação é zero o croma some, então brancura e negrura viram porcentagens complementares que somam cem e descrevem um cinza, um preto ou um branco. Quando a luminosidade é cinquenta por cento e a saturação é cem por cento, o croma vale um e tanto o branco quanto o preto colapsam a zero, que é o matiz puro.

O matiz deve estar no intervalo fechado de zero a trezentos e sessenta; saturação e luminosidade devem cada uma estar entre zero e cem por cento inclusive.

O que você envia e o que recebe de volta

Envie três números finitos nos campos h, s e l. O campo h é o matiz em graus e é obrigatório; deve ficar entre zero e trezentos e sessenta inclusive porque HSL e HWB compartilham esse ângulo e este conversor não inventará um envelopamento. Os campos s e l são saturação e luminosidade como porcentagens de zero a cem.

Quando a saturação fica fora de zero a cem, a resposta explica que s deve ser uma porcentagem nessa faixa fechada para que um cliente possa limitar ou corrigir o token antes de tentar de novo; a mesma regra vale para a luminosidade.

Em caso de sucesso, a resposta ecoa os valores h, s e l limpos, informa a brancura w e a negrura b como porcentagens, aninha o objeto hsl de origem e o objeto hwb resultante, emite uma string CSS imprimível na forma hwb(H W% B%) e inclui uma nota curta de fórmula que reafirma as identidades de croma.

Verificações clássicas incluem o azul-ciano de tom médio com matiz duzentos e dez, saturação oitenta e luminosidade quarenta e cinco, mapeando para nove por cento de branco e dezenove por cento de preto; o vermelho puro com matiz zero, saturação cem e luminosidade cinquenta, mapeando para zero de branco e zero de preto; e qualquer matiz com saturação zero, que colapsa em uma mistura acromática cuja brancura mais negrura soma cem.

Onde a conversão de HSL para HWB aparece no trabalho real

Sistemas de design costumam redigir rampas de marca em HSL para que as equipes de produto possam escalonar a luminosidade com contraste acessível mantendo estáveis o matiz e uma faixa de saturação; ainda assim, folhas de estilo modernas, aplicativos de ilustração e vários seletores nativos já expõem HWB porque misturar um matiz puro com branco e preto coincide com o modo como pintores falam de tintas e sombras.

Engenheiros front-end que migram um token de propriedades customizadas hsl() para hwb() precisam de um oráculo determinístico que não dependa da serialização do estilo computado de um navegador específico. Ferramentas de visualização de dados e de arte generativa que montam paletas categóricas avançando o matiz com saturação e luminosidade fixas ainda precisam despejar HWB quando um renderizador ou um pipeline de impressão pede brancura e negrura em vez de um terceiro eixo de luminosidade.

Currículos e aulas de bootcamp ensinam modelos cilíndricos lado a lado e precisam de uma única chave confiável para as tarefas que combine com as identidades do CSS Color Module, e não com uma captura de um seletor de cor. Fluxos de acessibilidade que ajustam a luminosidade percebida em HSL e depois entregam a um editor baseado em HWB ainda precisam de mapeamento exato de canais sem APIs exclusivas do navegador.

Se mais tarde você precisar de HSL para RGB, HSL para HSV, conversão multi-formato HEX LAB CMYK ou checagens de contraste WCAG, trate-as como intenções de busca e páginas de destino separadas em vez de sobrecarregar esta página dedicada ao conversor de HSL para HWB.