HSL para string CSS
Receba um valor hsl() pronto para o navegador sem digitar vírgulas nem sinais de porcentagem: matiz 210,456, saturação 64,444 e luminosidade 42,225 viram hsl(210.46, 64.44%, 42.23%) com as duas casas decimais padrã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,456
- Saturação
- 64,444
- Luminosidade
- 42,225
- Css
- hsl(210.46, 64.44%, 42.23%)
Transforme valores separados de matiz, saturação e luminosidade em uma string CSS hsl() limpa, sem montar pontuação manualmente, aplicar arredondamentos inconsistentes ou esquecer percentuais. O formatador valida cada componente, normaliza o matiz no círculo cromático, arredonda conforme a precisão escolhida e retorna um resultado previsível. Ele é útil sempre que dados estruturados de cor precisam virar CSS pronto para o navegador, desde pipelines de tokens e geradores de temas até testes automatizados, modelos e utilitários de desenvolvimento.
Forneça componentes HSL numéricos
O matiz representa um ângulo em graus e pode ser positivo, negativo ou maior que uma volta completa. O formatador o ajusta ao intervalo canônico iniciado em zero e encerrado antes de 360: -30 equivale a 330, enquanto 390 vira 30. Saturação e luminosidade representam percentuais, mas entram sem o símbolo: use 65 para sessenta e cinco por cento.
Ambas devem ficar entre 0 e 100.
Controle o arredondamento determinístico
Use precision para definir o máximo de casas decimais mantidas nos três componentes. O padrão é dois, com inteiros aceitos de zero a seis. Zero gera componentes inteiros; valores maiores preservam mais detalhes.
O arredondamento ocorre depois da normalização do matiz. Zeros finais desnecessários são removidos, e zero negativo é convertido em zero simples. As regras não dependem da localidade: o separador decimal é sempre ponto, os argumentos usam vírgula seguida de espaço, e saturação e luminosidade sempre recebem o símbolo de porcentagem.
Assim, a mesma entrada válida produz uma string idêntica em qualquer ambiente de execução.
Use o CSS retornado com segurança
O resultado contém um campo css no formato hsl(h, s%, l%). A capacidade apenas formata: não converte RGB ou hexadecimal, não adiciona transparência alfa, não calcula contraste e não avalia legibilidade. Se a precisão fizer parte de uma convenção pública, informe-a explicitamente.
Insira o valor somente onde uma cor CSS for esperada, nunca em seletores ou marcação sem relação.
Casos de uso
Gerar tokens de design
Converta registros HSL calculados em valores CSS consistentes antes de gravar variáveis de tema ou arquivos de tokens.
Normalizar saídas de formulário
Valide números de um seletor de cores e gere uma string previsível para visualização, armazenamento ou estilos.
Criar testes estáveis
Aplique arredondamento e espaçamento fixos para evitar alterações em snapshots causadas por formatos diferentes.
Perguntas frequentes
A entrada inclui símbolos de porcentagem?
Não. Envie números de 0 a 100; o formatador acrescenta os símbolos necessários.
O que acontece com um matiz fora de 0 a 360?
Ele é ajustado no círculo cromático para o intervalo de 0 até antes de 360.
Quantas casas decimais posso manter?
Defina precision como inteiro de 0 a 6. O padrão é 2, e zeros finais são removidos.
O formatador aceita transparência alfa?
Não. Ele produz uma string hsl() opaca com três componentes e não aceita alfa.
O resultado muda conforme meu idioma ou região?
Não. As regras são fixas e não dependem das configurações regionais: o separador decimal é sempre um ponto, então os mesmos números sempre dão hsl(210.46, 64.44%, 42.23%), válido em qualquer navegador.
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/hsl-to-css \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hue":210.456,"saturation":64.444,"lightness":42.225}'const res = await fetch("https://api.kit.forhosting.com/color/hsl-to-css", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hue": 210.456,
"saturation": 64.444,
"lightness": 42.225
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hsl-to-css",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hue": 210.456,
"saturation": 64.444,
"lightness": 42.225
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsl-to-css", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hue":210.456,"saturation":64.444,"lightness":42.225}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hue":210.456,"saturation":64.444,"lightness":42.225}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsl-to-css", 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.456,
"saturation": 64.444,
"lightness": 42.225
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsl_to_css",
"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
Forneça componentes HSL numéricos
Envie matiz, saturação e luminosidade como números JSON, e não como uma expressão CSS parcialmente formatada. Todos os campos obrigatórios precisam ser números finitos; strings como “50”, campos ausentes, null, Infinity e NaN são rejeitados para expor erros e manter resultados idênticos na API, no navegador e nos testes.
Use o CSS retornado com segurança
Ao gerar temas, valide os registros anteriores e formate uma cor por chamada para localizar falhas. Cada solicitação automatizada custa US$ 0,002.
Perguntas técnicas
Quanto custa uma solicitação?
O preço-base da API é US$ 0,002 por solicitação.