Conversor de Cores — HEX, RGB, HSL e CMYK

O que este conversor de cores faz

Esta versão em português aceita qualquer código de cor no formato que você já tem — hex como #1e90ff, notação CSS como rgb(30,144,255) ou hsl(210,100%,56%) — e converte instantaneamente para todos os outros formatos: HEX, RGB, HSL e CMYK. Um swatch de prévia ao vivo acompanha cada conversão. A matemática é feita direto no navegador, sem biblioteca externa. 100% no navegador — seus dados nunca saem do seu computador. Sem uploads, sem rastreamento, sem logs em servidor. Vale lembrar: caracteres acentuados como 'ã' e 'õ' usam dois bytes em UTF-8, o que costuma causar bugs em parsers antigos ao processar nomes de cores — um detalhe relevante quando você exporta paletas para ferramentas legadas. Para converter entre bases numéricas de códigos de cor, o [Conversor de Bases Numéricas](/pt/number-base-converter/) pode complementar este fluxo.

Recursos

Conversão HEX ↔ RGB. Cole qualquer hex code — #fff, #1e90ff ou a forma longa sem # — e obtenha os valores RGB (0–255) imediatamente. Funciona como um tradutor de código de cor hex completo.
Suporte a HSL com ajuste preciso. O canal de matiz (hue) vai de 0° a 360°; saturação e luminosidade são percentuais. Isso torna o HSL ideal para gerar variações acessíveis de uma cor de interface sem sair do CSS.
CMYK com aviso honesto sobre impressão. A conversão CMYK exibida é uma aproximação para tela. Para impressão real — como materiais produzidos em São Paulo ou Curitiba — você precisa de um perfil ICC calibrado para o papel e a tinta do equipamento. O conversor deixa isso explícito, evitando surpresas na gráfica.
Seletor de cores nativo do navegador. Clique no seletor para escolher qualquer cor visualmente. O valor é preenchido automaticamente em todos os campos, sem precisar decorar nenhum código.
Entradas no estilo CSS. Aceita exatamente o que você copia do DevTools: rgb(30,144,255), hsl(210,100%,56%) ou #1e90ff. Sem reformatar antes de colar.
Copiar com um clique. Cada formato tem seu próprio botão de cópia. O rótulo muda para 'Copiado' por dois segundos — confirmação visual sem interromper o fluxo.

Como usar o conversor de cores

Cole o valor da cor no campo de entrada ou use o seletor visual. Os formatos HEX, RGB, HSL e CMYK são exibidos simultaneamente.

Digite ou cole a cor. Insira qualquer valor no campo: #1e90ff, rgb(30,144,255) ou hsl(210,100%,56%). O formato é detectado automaticamente.
Ou use o seletor visual. Clique em 'Seletor de cor' para abrir o picker nativo do navegador e escolher a cor pelo olho.
Veja a prévia e os valores convertidos. O swatch de prévia atualiza em tempo real. Os campos HEX, RGB, HSL e CMYK aparecem ao mesmo tempo — compare e escolha o formato que você precisa.
Copie o formato desejado. Clique em 'Copiar' ao lado do formato de destino. O valor vai direto para a área de transferência, pronto para colar no CSS, Figma ou no briefing para a gráfica.

Casos de uso comuns

Traduzir cores de marca para impressão. Designers que recebem um hex code do time de marketing e precisam passar o equivalente CMYK para a gráfica. O conversor entrega a aproximação na tela; o profissional valida com o perfil ICC antes de fechar o arquivo.
Ajustar contraste de interface com HSL. Desenvolvedores front-end que constroem paletas de acessibilidade: partem de um HEX da identidade visual, convertem para HSL e variam só a luminosidade para gerar tons claros e escuros de forma previsível no CSS.
Inspecionar cores capturadas de screenshot. Você tira print de um layout concorrente, usa um color picker externo para pegar o HEX e cola aqui para saber o RGB ou HSL equivalente — fluxo comum durante benchmarking visual.
Gerar variáveis CSS a partir de paleta. Ao migrar uma paleta de um arquivo de design para código, converter cada cor para HSL facilita a criação de tokens semânticos como --cor-primaria-clara e --cor-primaria-escura com incrementos previsíveis de luminosidade.
Ensino e aprendizado de teoria das cores. Estudantes de design e desenvolvimento que querem entender como HEX, RGB e HSL se relacionam: inserir uma cor e observar os três formatos ao mesmo tempo torna a matemática concreta. Se você também trabalha com codificação de dados visuais, o [codificador e decodificador Base64](/pt/base64/) pode ser útil em pipelines de imagem.

Perguntas frequentes

Meus dados de cor são enviados para algum servidor?

Não. Todo o processamento acontece no seu navegador. Nenhum valor digitado aqui chega a qualquer servidor — não há coleta, log ou rastreamento. Você pode usar o conversor offline depois que a página carrega.

Por que a conversão CMYK na tela não bate com a impressão real?

CMYK em monitor é sempre uma aproximação, porque telas emitem luz (modelo aditivo RGB) enquanto impressoras absorvem tinta (modelo subtrativo CMYK). A correspondência exata depende do perfil ICC do equipamento, do tipo de papel e da tinta. Para projetos gráficos profissionais, valide sempre com o perfil correto no Adobe Photoshop ou Illustrator antes de enviar para a gráfica.

O que é HSL e por que é útil para CSS?

HSL descreve a cor por matiz (hue, 0–360°), saturação (%) e luminosidade (%). Essa representação é intuitiva: para deixar uma cor mais clara, basta aumentar a luminosidade. Diferente de HEX ou RGB, onde os três canais interagem de forma não linear, HSL facilita criar paletas coesas diretamente no CSS sem depender de um design system externo.

Por que converter HEX para HSL e voltar pode mudar o valor?

A conversão envolve divisões e arredondamentos de ponto flutuante para inteiros. Um HEX como #1e90ff passa por rgb(30,144,255) → hsl(210,100%,56%) e, ao voltar, pode virar #1e90fe — diferença de 1 em um canal de 255. Esse desvio é normal e imperceptível ao olho humano.

Qual a diferença entre RGB no CSS e em APIs gráficas como OpenGL?

No CSS, os valores RGB vão de 0 a 255 (inteiros). Em APIs como OpenGL, WebGL e shaders GLSL, os mesmos canais são representados como floats de 0.0 a 1.0. Para converter: divida cada valor por 255. Por exemplo, rgb(30,144,255) vira vec3(0.118, 0.565, 1.0) em GLSL. O WHATWG Encoding Standard define como valores de cor são interpretados em contextos web, o que pode ser relevante ao processar paletas em streams de texto.

Como posso comparar cores rapidamente durante o desenvolvimento?

Cole o hex code diretamente do DevTools do Chrome ou Firefox — o formato #rrggbb é aceito sem formatação adicional. A prévia ao vivo facilita comparar variações: troque só os últimos dois dígitos do hex e veja o resultado instantaneamente. Para fluxos que envolvem codificação de cores em URLs, o [codificador e decodificador de URL](/pt/url-encoder/) pode ajudar a escapar valores corretamente. Veja também a referência MDN — crypto.getRandomValues se o seu projeto gera tokens de cor aleatórios com segurança criptográfica.