Converta formatos de cor CSS: HEX, RGB, HSL e CMYK
Converta uma cor entre HEX, RGB, HSL e CMYK sem abrir um aplicativo de design nem reescrever fórmulas.
Executar grátis
Insira uma expressão completa, escolha o formato desejado e receba um valor limpo, pronto para copiar. O conversor valida a notação antes do cálculo, limita os canais numéricos às faixas válidas e informa entradas malformadas em vez de tentar adivinhar. Isso atende tanto a ajustes rápidos de folhas de estilo quanto a processos automatizados e repetíveis.
Informe uma expressão de cor completa
Comece com uma notação aceita: HEX de três ou seis dígitos, como <code>#f80</code> ou <code>#ff8800</code>, <code>rgb()</code> separado por vírgulas, <code>hsl()</code> percentual ou <code>cmyk()</code> percentual. RGB exige três canais; HSL, um matiz e duas porcentagens; CMYK, quatro porcentagens. Inclua a cerquilha e os sinais de porcentagem necessários. Espaços em torno das vírgulas são aceitos. Essa gramática rigorosa impede que um valor incompleto seja entendido como outra cor. Canais alfa, nomes CSS, sintaxe CSS moderna separada por espaços e outros espaços de cor não são aceitos. Se o texto não corresponder a uma das quatro formas documentadas, a solicitação retorna erro de entrada inválida, sem criar um resultado aparentemente correto.
Entenda limites, conversão e arredondamento
Após validar a estrutura, cada canal é limitado à faixa do respectivo modelo. RGB permanece entre 0 e 255. O matiz HSL fica entre 0 e 360; saturação e luminosidade, entre 0 e 100 por cento. Cada componente CMYK também fica entre 0 e 100 por cento. Assim, <code>rgb(300, -8, 20)</code> representa a mesma cor que <code>rgb(255, 0, 20)</code>. O ajuste não conserta canais ausentes, funções grafadas incorretamente ou sinais de porcentagem omitidos. A conversão usa aritmética sRGB determinística. HEX e RGB arredondam canais para inteiros; HSL e CMYK mantêm até duas casas decimais, sem zeros dispensáveis. A resposta identifica os formatos de origem e destino para facilitar a verificação por sistemas automatizados.
Aplique o resultado em CSS e automações
A resposta traz um valor normalizado pronto para copiar, além de rótulos compactos de origem e destino. HEX usa seis dígitos maiúsculos; RGB, HSL e CMYK mantêm vírgulas e espaços consistentes. Você pode adaptar um token ao padrão de uma biblioteca, validar temas importados ou normalizar cores de formulários sem dependência gráfica. CMYK representa uma conversão matemática, não um perfil ICC de impressora nem uma garantia da aparência da tinta. O alfa também não é preservado. O navegador é ideal para conversões individuais; cada chamada de API custa US$ 0,002 e disponibiliza a mesma operação determinística para scripts, builds, testes e lotes controlados.
Casos de uso
Normalizar tokens de design
Converta entradas HEX, RGB, HSL e CMYK misturadas para a notação única exigida pelo arquivo de tokens.
Preparar um valor CSS
Transforme uma cor recebida em uma expressão HSL, RGB ou HEX limpa e pronta para a folha de estilo.
Validar cores importadas
Rejeite registros malformados e limite com segurança canais válidos que ultrapassem a faixa documentada.
Perguntas frequentes
Quanto custa uma conversão pela API?
Cada solicitação de API custa US$ 0,002. A ferramenta no navegador atende conversões individuais.
Quais formatos de entrada são aceitos?
São aceitos HEX de três ou seis dígitos, rgb() com três canais, hsl() com matiz e duas porcentagens e cmyk() com quatro porcentagens.
O que ocorre com um canal fora da faixa?
Um canal numérico bem formado é limitado: RGB a 0–255, matiz a 0–360 e porcentagens HSL ou CMYK a 0–100.
Canais alfa são aceitos?
Não. HEX com alfa e expressões rgba() ou hsla() são rejeitados como entrada malformada.
Por que uma entrada malformada não é corrigida?
Adivinhar sintaxe ausente pode alterar a cor pretendida. Apenas excessos numéricos são limitados; a estrutura inválida deve ser corrigida.
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/web/color-format-convert \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#ff8800","target_format":"hsl"}'const res = await fetch("https://api.kit.forhosting.com/web/color-format-convert", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#ff8800",
"target_format": "hsl"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/color-format-convert",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#ff8800",
"target_format": "hsl"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/color-format-convert", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#ff8800","target_format":"hsl"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#ff8800","target_format":"hsl"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/color-format-convert", 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
{
"color": "#ff8800",
"target_format": "hsl"
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.color_format_convert",
"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.
Limites
timeout_sec | 30 |
max_crawl_pages | 25 |
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. |