Conversor de Códigos de Cor (Todos os Formatos)

Bem-vindo ao Conversor de Códigos de Cor (Todos os Formatos), uma ferramenta online gratuita que converte qualquer valor de cor em todos os formatos comuns de uma só vez. Cole um código HEX, um trio RGB, uma definição HSL ou HSV, um quarteto CMYK ou mesmo uma cor nomeada do CSS — e leia instantaneamente os valores equivalentes, veja uma amostra de visualização ao vivo, verifique o contraste de acessibilidade WCAG e explore uma paleta de designer gerada com cores complementares, triádicas, análogas, tons e sombras.

Por que usar um conversor de cores tudo-em-um?

A maioria dos conversores de cores online lida apenas com uma direção (HEX para RGB ou RGB para CMYK), forçando você a encadear várias ferramentas quando precisa de uma visão completa. Este conversor aceita todos os formatos comuns em um único campo, detecta automaticamente qual formato você digitou e retorna todos os cinco de uma vez com uma visualização ao vivo — economizando várias etapas ao alternar entre ferramentas de web, mobile, impressão e design.

Formatos de entrada suportados

Qual é a diferença entre os modelos de cor HSL e HSV?

Tanto o HSL quanto o HSV descrevem uma cor através de três canais intuitivos — Matiz, Saturação e um terceiro valor relacionado à luminosidade — mas eles diferem nesse terceiro canal.

• HSL — Matiz, Saturação, Luminosidade (Hue, Saturation, Lightness): a luminosidade varia de 0% (preto puro) passando por 50% (a versão mais vívida do matiz) até 100% (branco puro). O HSL é preferido no CSS porque torna o clareamento ou escurecimento de uma cor simétrico e previsível.
• HSV / HSB — Matiz, Saturação, Valor/Brilho (Hue, Saturation, Value/Brightness): o valor varia de 0% (preto puro) até 100% (a versão mais plena e saturada do matiz). O HSV é o modelo por trás dos seletores de cores no Photoshop, Figma e na maioria das ferramentas de design desktop.

Por exemplo, um vermelho totalmente saturado é hsl(0, 100%, 50%) no HSL, mas hsv(0, 100%, 100%) no HSV. A mesma cor em dois modelos mentais diferentes — ambos úteis, dependendo se você está pensando como um desenvolvedor CSS ou como um pintor.

Por que meus valores CMYK parecem um pouco diferentes dos softwares de impressão?

O RGB é um modelo aditivo usado por telas, enquanto o CMYK é um modelo subtrativo usado por impressoras. A conversão matemática que esta ferramenta realiza é uma aproximação rápida que não inclui nenhum perfil de cores ICC, limites de cobertura de tinta ou ajustes específicos de papel. Para trabalhos de impressão de produção, dependa sempre do perfil CMYK gerenciado por cores do seu software de design (como o US Web Coated SWOP v2 ou Coated FOGRA39). Use este conversor como uma referência rápida quando você simplesmente precisar de um quarteto CMYK que seja "próximo o suficiente" para conversas de design em estágio inicial.

Como funciona a verificação de contraste WCAG?

As Diretrizes de Acessibilidade para Conteúdo Web definem uma taxa de contraste entre duas cores baseada em sua luminância relativa — um modelo de brilho perceptual que dá mais peso ao verde do que ao vermelho, e ao vermelho mais do que ao azul. A proporção vai de 1:1 (sem contraste algum) a 21:1 (preto puro sobre branco puro).

• AAA — proporção ≥ 7:1, atende ao nível mais rigoroso de acessibilidade para texto de corpo
• AA — proporção ≥ 4.5:1, o mínimo para texto de corpo na maioria das regulamentações
• AA Large — proporção ≥ 3:1, suficiente para textos grandes (18pt+ ou 14pt negrito) e elementos de interface gráfica
• Fail — proporção < 3:1, não use esta combinação para texto

A ferramenta calcula o contraste em relação ao branco puro e ao preto puro, destacando a melhor escolha como sua cor de texto padrão quando este matiz for usado como fundo.

O conversor gera uma paleta de cores?

Sim. Após cada conversão, a ferramenta constrói uma paleta de designer a partir do mesmo matiz, incluindo:

• Complementar — a cor diretamente oposta na roda (rotação de matiz de 180°), útil para acentos de alto contraste
• Triádica — duas cores uniformemente espaçadas a 120°, equilibradas e vibrantes
• Análoga — matizes vizinhos a ±30°, úteis para gradientes e fundos harmoniosos
• Tons (Tints) — três variações mais claras (mesmo matiz, maior luminosidade)
• Sombras (Shades) — três variações mais escuras (mesmo matiz, menor luminosidade)

Clique em qualquer amostra da paleta para carregá-la instantaneamente no conversor como um novo ponto de partida — perfeito para iterar rapidamente em uma cor de marca, um conjunto de ícones ou um tema de interface.

Como usar esta ferramenta

1. Insira ou escolha uma cor — digite qualquer valor (HEX, RGB, HSL, HSV, CMYK ou um nome de cor CSS) no campo de entrada, ou clique na pequena amostra de cor para abrir o seletor de cores nativo do seu navegador.
2. Converta — clique no botão Converter. A ferramenta detecta automaticamente o formato fornecido e calcula todos os outros formatos.
3. Copie o que precisar — clique em qualquer botão de cópia de um toque ao lado de um valor de formato. O botão exibe brevemente uma marca de seleção para confirmar que o valor está na sua área de transferência.
4. Verifique a acessibilidade — revise as taxas de contraste WCAG em relação ao branco puro e ao preto puro para confirmar se a cor é legível como texto ou fundo.
5. Explore a paleta — clique em qualquer amostra na seção de paleta de designer para convertê-la, expandindo sua exploração de design sem sair da página.

Casos de uso práticos

Para desenvolvedores web

• Converta um HEX de uma composição do Figma em hsl() para usar com propriedades personalizadas CSS e sistemas de temas modernos
• Gere valores rgba() para sobreposições translúcidas diretamente de uma cor HEX da marca
• Verifique se a cor de uma marca atende ao WCAG AA em fundos brancos antes de publicar

Para designers gráficos

• Traduza uma cor CSS de um site em uma aproximação CMYK para mockups de impressão
• Construa uma escala tonal (tons e sombras) a partir de um único matiz inicial
• Encontre um acento complementar ou triádico sem sair do navegador

Para designers de interface (UI) e produto

• Faça a ponte entre HSV (seletor do Figma) e HSL (CSS) ao documentar design tokens
• Identifique automaticamente a melhor cor de texto (preto vs branco) para qualquer fundo
• Favorite ou compartilhe rapidamente uma cor convertida via URL da página de resultados

Dicas para melhores resultados

• Seja flexível com separadores — o analisador aceita vírgulas, espaços ou barras dentro dos parênteses, então rgb(79 70 229) funciona tão bem quanto rgb(79, 70, 229).
• Use porcentagens quando apropriado — rgb(31%, 27%, 90%) é válido; a ferramenta converte porcentagens para 0–255 internamente.
• Tente cores nomeadas do CSS — mais de 140 nomes funcionam, incluindo adições modernas como rebeccapurple.
• Leia as barras de canais — o detalhamento visual dos canais vermelho/verde/azul e CMYK facilita ver quais tintas dominam a versão impressa da cor.
• Trate o CMYK apenas como um guia — abra o resultado no seu software de impressão com gerenciamento de cores para obter o valor final preciso.

Perguntas frequentes

Preciso incluir o símbolo # ao inserir um valor HEX?

Não. Tanto #4f46e5 quanto 4f46e5 são aceitos. O # inicial é opcional.

Valores HEX de 4 e 8 dígitos (com alfa) são suportados?

O analisador os aceitará, mas o canal alfa é descartado durante a conversão porque RGB, HSL, HSV e CMYK em suas formas clássicas não carregam alfa. A ferramenta foca apenas na parte da cor.

Posso compartilhar ou favoritar uma cor convertida?

Sim. O formulário é enviado via GET, então a URL contém a cor que você converteu. Copie a URL da página após a conversão para compartilhar ou salvar a página de resultado exata.

Por que alguns valores HEX são mostrados em letras maiúsculas?

A saída padroniza o HEX para maiúsculas (ex: #4F46E5), que é a convenção usada em muitos guias de design e estilo de marca. Você pode colá-lo de volta em minúsculas se preferir — ambos são equivalentes.

Funciona em dispositivos móveis?

Sim. A interface é totalmente responsiva e o formulário, a paleta e os cartões de contraste se reorganizam em layouts de coluna única em telas menores para uma experiência tátil confortável.

Recursos adicionais

• HSL e HSV - Wikipedia (Inglês)
• Modelo de cor CMYK - Wikipedia (Inglês)
• Requisito de Contraste WCAG 2.1 (Mínimo)