Sem upload, 100% local, sem conta

Conversor de Cores

Converta entre HEX, RGB, HSL, HSV e CMYK. Pré-visualização ao vivo. Verificador de contraste WCAG para acessibilidade. Nada sai do seu navegador.

Como o Conversor de Cores funciona

O Conversor de Cores traduz qualquer cor entre os formatos HEX, RGB, HSL, HSV e CMYK instantaneamente conforme você digita. Também executa uma verificação de contraste WCAG entre quaisquer duas cores que você escolher, mostrando a taxa de contraste e o resultado de aprovação/reprovação AA/AAA para texto normal, texto grande e componentes de interface. Todos os cálculos acontecem no navegador sem dados enviados a lugar nenhum; nada que você digitar sai do seu dispositivo.

Entender como a mesma cor se parece em diferentes modelos de cor é útil em entregas de design. Um designer pode especificar uma cor de marca como HEX #1A4F8C; um desenvolvedor CSS precisa do equivalente HSL para temas; uma equipe de impressão precisa da decomposição CMYK. Esta ferramenta faz a conversão em todas as direções de uma vez, para que você nunca precise executar vários conversores separados.

Escrito por Bastien Sulyan

Como usar o Conversor de Cores, passo a passo

  1. Digite um valor HEX, clique em uma amostra de cor ou insira valores RGB, HSL, HSV ou CMYK nos campos respectivos.
  2. Todas as outras representações de formato são atualizadas imediatamente para mostrar a cor equivalente.
  3. Para executar uma verificação de contraste, selecione uma cor de primeiro plano e uma cor de fundo usando os dois seletores de cor.
  4. Leia a taxa de contraste WCAG e as medalhas de aprovação/reprovação para os níveis de conformidade AA e AAA.
  5. Copie qualquer valor de cor usando o ícone de cópia ao lado de cada campo.

Casos de uso comuns

  • Um designer de interface converte um código HEX de marca para HSL para escrever uma propriedade CSS personalizada para um sistema de temas.
  • Um desenvolvedor web verifica a taxa de contraste entre a cor do texto e o fundo antes de lançar um componente para confirmar a conformidade WCAG AA.
  • Um designer de impressão recebe uma cor HEX da web e precisa do equivalente CMYK para combiná-la em um folheto impresso.
  • Um desenvolvedor precisa da decomposição RGB de um token de design para passar valores de canais individuais para uma função de desenho no canvas.

Perguntas frequentes

A ferramenta suporta valores de alfa (transparência)?

O conversor atual funciona com cores totalmente opacas (alfa = 1). HEXA (hex de 8 dígitos) e RGBA ainda não estão no escopo. Para opacidade, defina o canal alfa no seu CSS separadamente usando a notação rgba() ou oklch().

As cores que insiro são armazenadas ou enviadas para algum lugar?

Não. A conversão de cores é aritmética pura (remapeamento de canais e escalonamento de intervalo) que é executada completamente no motor JavaScript do navegador. Nada que você digita aqui chega a qualquer servidor ou serviço externo.

Quais níveis de contraste WCAG o verificador suporta?

A ferramenta reporta contra os critérios de sucesso WCAG 2.1: AA requer uma taxa de contraste mínima de 4,5:1 para texto normal (abaixo de 18pt ou 14pt negrito) e 3:1 para texto grande e componentes de interface. AAA requer 7:1 para texto normal e 4,5:1 para texto grande.

Por que os valores CMYK diferem entre esta ferramenta e softwares de design profissional?

A conversão RGB para CMYK que esta ferramenta realiza é uma fórmula matemática sem um perfil de cor. Aplicativos de design profissional aplicam perfis de cor ICC que levam em conta o ganho de ponto de tinta e as propriedades do substrato. Os valores CMYK aqui são úteis para aproximação; para impressão de produção, sempre aplique o perfil da sua impressora em software dedicado.

Posso converter um nome de cor CSS como 'cornflowerblue' aqui?

Nomes de cores CSS não são digitados diretamente nos campos do conversor. Para converter uma cor nomeada, primeiro encontre seu valor HEX em uma referência CSS (cornflowerblue é #6495ED) e depois cole esse HEX no campo HEX para ver todos os outros formatos.

A ferramenta funciona offline após o carregamento da página?

Sim. A conversão de cores é aritmética sem dependência externa. Uma vez que a página esteja no cache do seu navegador, você pode abri-la sem conexão de rede e todas as conversões funcionarão normalmente.

Ferramentas relacionadas

Mantenha tudo local, explore ferramentas complementares.

Todas as ferramentas de desenvolvedor