Conversor de HWB para HSL
O matiz 210 com 20 % de brancura e 10 % de negrura vira hsl(210 77.78% 55%), mantendo o matiz exatamente como você digitou. Leve suas cores de design de HWB para HSL sem adivinhação. Grátis no seu navegador.
- Grátis
- Funciona no seu navegador
- Sem cadastro
- Seus dados não saem do seu aparelho
Executar grátis
Exemplo resolvido
- Hue
- 210
- Brancura
- 20
- Pretume
- 10
- H
- 210
- S
- 77,7778
- L
- 55
- Saturação
- 77,7778
O conversor de HWB para HSL transforma um ângulo de matiz e percentuais de brancura e negrura em matiz, saturação e luminosidade sem depender do analisador de cores do navegador nem de um serviço externo. Ele preserva o ângulo normalizado, valida cada componente e aplica a regra padrão de normalização HWB quando brancura e negrura juntas ultrapassam cem por cento. O resultado inclui campos HSL numéricos, um objeto aninhado e uma string CSS pronta para uso.
Informe uma cor HWB completa e entenda a validação
O matiz é medido em graus e pode ser qualquer ângulo finito positivo ou negativo: o conversor o ajusta ao intervalo conhecido de zero inclusivo a trezentos e sessenta exclusivo; assim, menos trinta vira trezentos e trinta, e quatrocentos e vinte vira sessenta. Brancura e negrura são percentuais e cada uma deve ficar entre zero e cem, inclusive. Strings numéricas são aceitas quando contêm apenas uma notação decimal ou exponencial válida, ajudando clientes baseados em formulários sem enfraquecer a validação.
Esse limite rigoroso é útil em pipelines porque interrompe dados incorretos antes que pareçam uma cor plausível.
Como a brancura e a negrura se tornam HSL
HWB descreve uma cor como um matiz puro misturado com branco e preto. Após converter os dois percentuais em frações, o conversor verifica a soma. Se o total for no máximo um, a fração restante será o croma: um menos a brancura menos a negrura.
A luminosidade HSL é um mais a brancura menos a negrura, dividido por dois. A saturação é o croma dividido por um menos o valor absoluto de duas vezes essa luminosidade menos um, exceto nos limites preto, branco ou acromático, nos quais ela é zero. Quando brancura mais negrura supera cem por cento, as regras de cor CSS normalizam ambas as proporções pela soma.
O matiz retornado ainda preserva o ângulo de entrada ajustado mesmo com saturação zero. Isso mantém estáveis as conversões de ida e volta, os metadados de paleta e as comparações determinísticas, embora o cinza visível não tenha matiz perceptível. Todos os resultados numéricos publicados são arredondados para quatro casas decimais, evitando ruído de ponto flutuante em snapshots.
Use a saída em CSS, sistemas de design e testes automatizados
Uma resposta correta expõe h, s e l, com matiz em graus e saturação e luminosidade em percentuais. Use o executor gratuito do navegador em trabalhos pontuais de paleta, exemplos de documentação e verificações didáticas. Como a implementação contém somente aritmética limitada, entradas idênticas sempre produzem saídas idênticas: não há rede, aleatoriedade, relógio do sistema, analisador dependente de localidade ou perfil oculto de cores.
Este conversor trata apenas de HWB para HSL.
Casos de uso
Migre tokens de cor CSS
Converta tokens de design HWB em componentes HSL numéricos e uma string CSS, mantendo o matiz e a mistura originais para revisão.
Normalize paletas geradas
Trate totais programáticos de brancura e negrura acima de cem por cento com valores efetivos explícitos, sem surpresas dependentes do navegador.
Perguntas frequentes
Quais unidades o conversor aceita?
O matiz é um ângulo em graus. Brancura e negrura são percentuais de 0 a 100, inclusive, e não frações de 0 a 1.
O que ocorre quando brancura mais negrura supera 100%?
Os dois valores são normalizados proporcionalmente pela soma, conforme as regras HWB. A saída é acromática, normalized é true e os percentuais efetivos são retornados.
O matiz é preservado em um resultado cinza?
Sim. O matiz de entrada é ajustado ao intervalo 0–360 e retornado mesmo quando a saturação é zero, preservando os metadados de forma determinística.
Você pode usar os campos h, w e b?
Os nomes canônicos longos prevalecem quando as duas formas são fornecidas.
Como converto o matiz 210 com 20 % de brancura e 10 % de negrura para HSL?
O resultado é hsl(210 77.78% 55%). O que sobra depois de tirar brancura e negrura é a cor pura, e a luminosidade é um mais a brancura menos a negrura, dividido por dois: 55 %.
Ferramentas relacionadas
Para desenvolvedores — acesso via API
Tudo nesta página está disponível via API. Esta seção é para equipes que querem integrar a ferramenta aos próprios sistemas; quem não precisa disso pode simplesmente usar a ferramenta acima.
Endpoint
Autenticação por token Bearer. Um único POST coloca a tarefa na fila; o resultado chega por webhook ou link assinado.
Chame do seu código
curl -X POST https://api.kit.forhosting.com/color/hwb-hsl \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hue":210,"whiteness":20,"blackness":10}'const res = await fetch("https://api.kit.forhosting.com/color/hwb-hsl", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hue": 210,
"whiteness": 20,
"blackness": 10
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hwb-hsl",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hue": 210,
"whiteness": 20,
"blackness": 10
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hwb-hsl", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hue":210,"whiteness":20,"blackness":10}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hue":210,"whiteness":20,"blackness":10}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hwb-hsl", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemplo de requisição
{
"hue": 210,
"whiteness": 20,
"blackness": 10
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hwb_hsl",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}A API é assíncrona: cada chamada devolve um task_id na hora. Se preferir polling, consulte o status a até 1 requisição por segundo.
Preço
Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.
Erros
| HTTP | Código | O que significa |
|---|---|---|
401 | unauthorized | Token ausente ou inválido. Confira o header Authorization. |
402 | insufficient_balance | Saldo insuficiente para esta tarefa. Faça uma recarga e tente de novo. |
404 | unknown_type | Esse tipo de tarefa não existe. Confira o campo type no catálogo. |
429 | rate_limited | Muitas requisições em pouco tempo. Espere um instante e tente de novo. |
Notas técnicas
A ferramenta no navegador é gratuita; a conversão automatizada pela API custa US$ 0,002 por item correto.
Informe uma cor HWB completa e entenda a validação
Forneça hue, whiteness e blackness como números finitos. Os aliases curtos h, w e b também são aceitos para clientes que já armazenam registros HWB compactos. Valores ausentes, texto não numérico, infinitos e percentuais fora da faixa geram invalid_input, sem suposições ou cortes silenciosos.
Como a brancura e a negrura se tornam HSL
Nenhum componente cromático permanece, portanto o resultado é cinza; effective_whiteness e effective_blackness exibem a mistura normalizada, e normalized é true.
Use a saída em CSS, sistemas de design e testes automatizados
Ela também fornece os nomes longos hue, saturation e lightness, um objeto hsl aninhado e hsl_css para uso direto em uma folha de estilos ou propriedade personalizada. Os percentuais originais de brancura e negrura continuam visíveis, enquanto effective_whiteness e effective_blackness distinguem uma mistura HWB excessiva que exigiu normalização. Use a API por US$ 0,002 por item correto quando um compilador de tokens, gerador de temas, script de migração ou tarefa de integração contínua precisar do mesmo contrato JSON estável. Um conversor multiformato é mais adequado para descobrir entradas arbitrárias HEX, RGB, LAB ou CMYK, enquanto este endpoint focado oferece validação precisa e normalização transparente aos fluxos HWB.
Casos de integração
Crie fixtures de cor estáveis
Use a saída HSL arredondada e determinística em testes unitários, ferramentas didáticas e verificações de conformidade entre linguagens.
Perguntas técnicas
Quanto custa a conversão pela API?
Cada item correto pela API custa US$ 0,002. O executor no navegador é gratuito, e falhas de validação são retornadas como invalid_input.