Conversor hex para HSL
Transforme um código hex em valores que se ajustam a olho: #FF8040 equivale a matiz 20,1°, saturação 100% e luminosidade 62,55%, pronto para colar como hsl(20.1 100% 62.55%). 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
- Hexa
- #FF8040
- Dígitos hex
- FF8040
- Resistência (Ω)
- 255
- G
- 128
- B
- 64
Designers, desenvolvedores front-end e sistemas de marca costumam guardar cores como códigos hex como #FF8040 ou a forma curta #f80, mas precisam de matiz, saturação e luminosidade para ajustar o tom sem desviar o brilho, montar variáveis CSS ou alimentar tokens de design sensíveis à cor. Este conversor hex para HSL aceita um código hexadecimal de três ou seis dígitos com ou sem hash inicial, expande formas abreviadas como o CSS faz, executa uma conversão determinística estilo sRGB e devolve matiz em graus mais saturação e luminosidade em porcentagens, junto com strings CSS hsl modernas e legadas que você pode colar em folhas de estilo. Códigos hex inválidos—comprimento errado, caracteres não hex ou campo ausente—falham com erro claro de entrada inválida para que dados ruins nunca virem um clamp silencioso.
Como informar um código hex e o que a conversão calcula
Forneça um campo string chamado hex com um código de cor hexadecimal de três ou seis dígitos. O hash inicial é opcional, então #FF8040 e FF8040 são aceitos, assim como formas curtas #f80 e f80. Maiúsculas e minúsculas são ignoradas: dígitos em minúscula, maiúscula ou mistos normalizam para o mesmo resultado.
Códigos de três dígitos expandem dobrando cada dígito—f80 vira FF8800—seguindo a regra de abreviação de cor CSS dos navegadores. Após a expansão o motor analisa dois dígitos hex por canal em inteiros vermelho, verde e azul de zero a 255, depois normaliza cada canal dividindo por 255 para valores no intervalo unitário. Encontra o máximo e o mínimo desses três componentes normalizados e o croma como sua diferença.
A luminosidade é metade da soma de máximo e mínimo. Quando o croma é zero a cor é acromática: matiz zero e saturação zero, restando só a luminosidade para descrever cinzas do preto ao branco passando pelo cinza médio. Quando o croma é positivo, a saturação é o croma dividido por um menos o valor absoluto de duas vezes a luminosidade menos um, a fórmula padrão de saturação HSL usada em CSS e pilhas gráficas.
O matiz é construído a partir do setor da roda de cores onde está o canal máximo: dominante em vermelho, verde ou azul, escalado para graus no intervalo semiaberto de zero até 360.
Casos de uso
Tokens CSS e de design a partir de cores hex da marca
Converta amostras hex de ferramentas de design em HSL para que temas ajustem matiz ou luminosidade mantendo políticas de saturação consistentes em modos claro e escuro.
Pipelines de paleta e marca
Automação que parte de cores hex da marca obtém componentes HSL para gerar tintas, sombras e variantes de destaque sem aceitar códigos malformados em silêncio.
Perguntas frequentes
Como converto uma cor hex para HSL com esta ferramenta?
A resposta inclui h, s, l, canais RGB, strings CSS e um objeto hsl aninhado.
O que acontece se o código hex for inválido?
Só são aceitos 3 ou 6 dígitos hexadecimais (# inicial opcional). Comprimento errado ou caracteres não hex são rejeitados e não cobrados.
Matiz, saturação e luminosidade são porcentagens ou frações 0–1?
O matiz está em graus de 0 até 360. Saturação e luminosidade são porcentagens de 0 a 100, alinhadas ao uso comum de hsl() em CSS.
O conversor hex para HSL é gratuito?
A ferramenta no navegador roda grátis no seu dispositivo.
Posso usar códigos hex curtos de três dígitos?
Sim. Códigos como #f80 expandem para #FF8800 dobrando cada dígito, seguindo as regras de abreviação CSS, e então convertem para HSL.
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/hex-hsl \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hex":"#FF8040"}'const res = await fetch("https://api.kit.forhosting.com/color/hex-hsl", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hex": "#FF8040"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hex-hsl",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hex": "#FF8040"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hex-hsl", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hex":"#FF8040"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hex":"#FF8040"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hex-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
{
"hex": "#FF8040"
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hex_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
Como informar um código hex e o que a conversão calcula
Os alias color, colour, value e hex_code mapeiam para o mesmo campo quando os clientes preferem esses nomes. Entradas idênticas sempre produzem JSON idêntico porque o caminho é aritmética pura sem rede, sem semente aleatória e sem relógio de parede.
Lendo matiz, saturação, luminosidade, eco RGB e strings CSS
Em seguida expõe h, s e l para matiz em graus, saturação em por cento e luminosidade em por cento. Vermelho puro #FF0000 produz matiz zero com saturação plena e luminosidade média; verde puro #00FF00 e azul puro #0000FF caem perto de 120 e 240 graus respectivamente; canais iguais como #808080 produzem cinzas com saturação zero. Em sucesso a resposta inclui a string hex normalizada com hash inicial e seis dígitos maiúsculos, o campo hex_digits sem o hash, e os canais r, g e b expandidos para verificar o parse ou encadear em ferramentas só RGB. Os mesmos três números reaparecem sob os nomes longos hue, saturation e lightness, e aninhados dentro de um objeto hsl, para que código de UI, demos de SDK e avaliadores escolham o formato que couber sem mapeamento extra. Duas strings prontas para colar estão incluídas: hsl_css usa a forma moderna CSS Color Module separada por espaços como hsl(20.1 100% 62.55%), e hsl_legacy usa a forma clássica com vírgulas e parênteses que parsers antigos ainda esperam. O campo method é sempre hex_to_hsl para que roteadores posteriores possam ramificar sem farejar formas. Hex ausente, strings vazias, caracteres não hex e comprimentos diferentes de três ou seis dígitos falham com invalid_input e não são cobrados após a rejeição do motor.
Uso da API, preços, fluxos de design e limites práticos
Use o conversor hex para HSL gratuito no navegador para ajustes de paleta, demos de aula e checagens rápidas sem instalar biblioteca de cor. Combine saídas HSL com verificadores de contraste ao construir temas acessíveis, ou alimente mudanças de matiz em pipelines de tokens de marca que mantêm a luminosidade fixa enquanto rotacionam cores de destaque derivadas de uma amostra hex de marca. Envie um corpo JSON com a string obrigatória hex definida para um código de cor de três ou seis dígitos. Use a API pré-paga quando um design system, gerador de temas, pipeline de acessibilidade ou ferramenta de cor de e-commerce precisar de contrato estável sob saldo KIT a US$ 0,002 por item bem-sucedido; falhas de validação nunca consomem saldo após a rejeição do motor. Prefira este endpoint quando a intenção de busca e o enquadramento do produto forem especificamente hex para HSL com validação estrita de código; para triplas de canal RGB use o conversor RGB para HSL dedicado, e para conversão multi-formato entre HEX, RGB, HSL, LAB e CMYK em uma chamada use o conversor de cor mais amplo do catálogo. Autores que publicam SDK podem mapear h, s e l diretamente em controles de formulário ou propriedades personalizadas CSS sem reimplementar parse hex e conversão em cada linguagem.
Casos de integração
Ensino e avaliação da matemática das cores
Cursos e avaliações de código checam respostas hex→HSL de alunos contra JSON determinístico, com invalid_input claro quando o código hex está malformado.