ForHosting KIT · Dados e planilhas

Conversor de cores HEX, RGB e HSL

Conversor de cores para quem trabalha com web e design: transforma HEX em RGB ou HSL — e vice-versa — mantendo exatamente a mesma cor, só mudando a notação. Cole o código, copie o resultado e use no CSS, no Figma ou na configuração da sua loja. Grátis, sem cadastro, rodando inteiro no navegador.

● EstávelGrátis · no seu navegador

Executar grátis Ver a API

Use pelo WebAPIE-mailApp em breveTelegram em breve

A mesma cor, três jeitos de escrever

#1E90FF, rgb(30, 144, 255) e hsl(210, 100%, 56%) descrevem a mesma cor. O HEX é compacto e reina em CSS e ferramentas de design; o RGB explicita os canais de vermelho, verde e azul, formato que muitas bibliotecas pedem; o HSL fala a língua de quem ajusta cor de verdade — matiz, saturação e luminosidade — e facilita criar variações claras e escuras de um mesmo tom. Converter entre eles não altera a cor: muda só a notação, cada uma boa para um contexto.

Onde isso trava o trabalho

O designer entrega a paleta em HEX, mas o componente espera RGB separado por canal. O CSS antigo do site usa rgb(), e o guia de marca novo veio todo em HSL. A plataforma da loja só aceita HEX de seis dígitos, e a cor foi copiada como hsl(). São situações pequenas que interrompem o fluxo várias vezes por semana — e que a conversão manual resolve mal, porque envolve aritmética de canais que ninguém faz de cabeça. Colar, converter e copiar é mais rápido do que procurar a fórmula.

Uso na página e via API

Na página, cole o código da cor em qualquer um dos formatos e receba os equivalentes prontos para copiar — grátis, sem limite e sem que nada saia do seu navegador. Via API, a mesma conversão atende sistemas: normalizar as cores de um catálogo de produtos, converter tokens de um design system, tratar temas criados por usuários. Cada chamada custa US$ 0,002, preço publicado, sem assinatura. Para uma cor, use a página; para mil, a API.

Casos de uso

Do Figma para o CSS

O designer mandou a paleta nova com valores em HSL. Rafael converte cada tom para HEX e cola direto nas variáveis do CSS do site, sem instalar plugin nem abrir a calculadora.

Cor da marca igual em todo canal

A dona da Padaria Pão Dourado quer o mesmo dourado do letreiro no site, no cardápio em PDF e nos posts. Com o código convertido para o formato que cada ferramenta pede, a cor não desvia em lugar nenhum.

Tema escuro sem redesenhar

Para criar a versão escura do site, Carlos converte as cores principais para HSL, ajusta a luminosidade de cada uma e volta para HEX — variações consistentes, sem depender do olho.

Design system via API

A TecnoSul mantém tokens de cor para vários clientes. Um script converte a paleta inteira entre HEX, RGB e HSL ao gerar os arquivos de cada plataforma — centenas de conversões a US$ 0,002 cada.

Perguntas frequentes

Converter de HEX para RGB muda a cor?

Não: HEX e RGB são duas escritas dos mesmos três canais, então a conversão é exata nos dois sentidos. No HSL pode haver arredondamento mínimo de casas decimais — imperceptível a olho nu.

Que formatos entram e saem?

Os formatos padrão da web: HEX, RGB e HSL, em qualquer direção. Você cola a cor em um deles e recebe os equivalentes nos outros.

Serve para impressão (CMYK)?

O foco aqui é cor de tela, no padrão da web. CMYK é outro modelo, pensado para gráfica, e a correspondência com cores de tela depende do perfil de impressão — essa parte fica com o software gráfico.

Preciso pagar alguma coisa para usar no dia a dia?

Não: na página o uso é livre, sem cadastro e sem teto de conversões. O único uso cobrado é a API, para quem integra a conversão a um sistema — US$ 0,002 por chamada.

Vocês guardam as cores que eu converto?

Nada é guardado nem enviado: a conversão acontece no seu navegador, no seu aparelho. As cores de um projeto confidencial de cliente continuam só com você.

Por que usar HSL em vez de mexer direto no HEX?

Porque no HSL cada número significa algo visível: matiz, saturação e luminosidade. Para clarear um tom, basta subir a luminosidade — no HEX, o mesmo ajuste é tentativa e erro.

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

POSThttps://api.kit.forhosting.com/data/color-convert

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/data/color-convert \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d &#39;{"items":["valor-1","valor-2"]}'

const res = await fetch("https://api.kit.forhosting.com/data/color-convert", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "items": [
      "valor-1",
      "valor-2"
    ]
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/data/color-convert",
    headers={"Authorization": f"Bearer {os.environ[&#39;KIT_KEY']}"},
    json={
    "items": [
        "valor-1",
        "valor-2"
    ]
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/data/color-convert", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => &#39;{"items":["valor-1","valor-2"]}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"items":["valor-1","valor-2"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/data/color-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

{
  "items": [
    "valor-1",
    "valor-2"
  ]
}

Exemplo de resposta

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "data.color_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

por chamadaUS$ 0,002

Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.

Limites

max_mb 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.

Ver a documentação completa do KIT →

Executar grátis