Pular para o conteúdo
SPCXTools

Conversor de Cores

Converta qualquer cor entre HEX, RGB, HSL, HSV e CMYK e verifique seu contraste.

Roda localmente — os arquivos não saem do seu dispositivo

Carregando ferramenta…

Como usar: Conversor de Cores

  1. 1Digite ou cole uma cor em qualquer formato — por exemplo, #0EA5E9, rgb(14 165 233), hsl(199 89% 48%) ou um nome de cor CSS como tomato — ou use o seletor de cores.
  2. 2Veja a mesma cor em HEX, RGB, HSL, HSV e CMYK e copie o formato que precisar.
  3. 3Verifique a taxa de contraste com branco e preto para ver se o texto nesta cor é legível.
  4. 4Clique em uma amostra na escala de tons claros e escuros para explorar versões mais claras e mais escuras.

Converta cores entre todos os formatos comuns

Designers, desenvolvedores e profissionais de marketing constantemente movem cores entre ferramentas que usam linguagens diferentes: o CSS quer HEX ou HSL, um guia de marca lista RGB e CMYK, e um aplicativo de design mostra HSB. Este conversor de cores aceita uma cor em qualquer um desses formatos e a exibe em todos os outros de uma só vez, com um clique para copiar cada um. Ele também verifica o contraste do texto para acessibilidade e gera uma escala de tons claros e escuros.

Recursos

  • Qualquer formato de entrada: HEX (3, 4, 6 ou 8 dígitos), RGB/RGBA, HSL/HSLA, HSV/HSB, CMYK, trios de números simples e nomes de cores CSS.
  • Todas as saídas de uma só vez: HEX, RGB, HSL, HSV e CMYK, cada um com um botão para copiar.
  • Suporte a transparência — os valores alfa são mantidos em HEX8, RGBA e HSLA.
  • Seletor de cores nativo para escolher uma cor visualmente.
  • Verificador de contraste WCAG com branco e preto, com resultados AA para texto normal e grande.
  • Tons claros e escuros de 10% a 90% de luminosidade; clique em qualquer amostra para carregá-la.

Explicação dos formatos de cor

  • HEX — #RRGGBB em hexadecimal, o formato mais comum em web design. Um quarto par opcional define a transparência.
  • RGB — vermelho, verde e azul de 0 a 255; como as telas realmente criam as cores.
  • HSL — matiz (a posição no círculo cromático), saturação (intensidade) e luminosidade. Fácil de ajustar manualmente: mude apenas a luminosidade para obter versões mais claras ou mais escuras da mesma cor.
  • HSV / HSB — matiz, saturação e valor (brilho), usado pela maioria dos seletores de cores em ferramentas de design.
  • CMYK — porcentagens de tinta ciano, magenta, amarelo e chave (preto) usadas em impressão.

Exemplo

O azul-celeste #0EA5E9 é rgb(14, 165, 233), hsl(199, 89%, 48%), hsv(199, 94%, 91%) e aproximadamente cmyk(94%, 29%, 0%, 9%). Seu contraste com o branco é de cerca de 2.8:1 — bom para títulos grandes e ícones, mas muito baixo para corpo de texto, que precisa de 4.5:1. No preto, o contraste atinge cerca de 7.6:1, sendo aprovado com folga.

Dicas para trabalhar com cores

  • Crie paletas em HSL. Mantenha a matiz e a saturação fixas e varie a luminosidade para criar estados de botão, fundos e bordas consistentes.
  • Verifique o contraste desde o início. Muitas cores de marca são claras demais para texto em fundo branco; use um tom mais escuro da escala para o texto e a cor original para detalhes.
  • Não confie apenas na cor para transmitir significado — adicione ícones ou legendas para pessoas com deficiência de visão de cores.
  • Espere diferenças na impressão. Cores RGB brilhantes, especialmente azuis e verdes vívidos, geralmente parecem mais opacas em CMYK.

Também trabalha com imagens? O Conversor de Imagens altera formatos entre JPG, PNG e WebP. Para codificar uma imagem pequena ou ícone para CSS, use o Base64.

Perguntas frequentes

Como converter HEX para RGB?
Uma cor HEX tem três pares de dígitos hexadecimais para vermelho, verde e azul. Converta cada par da base 16 para a base 10: em #FF8800, FF = 255, 88 = 136 e 00 = 0, então a cor é rgb(255, 136, 0). A abreviação de três dígitos, como #F80, primeiro duplica cada dígito.
Qual é a diferença entre HSL e HSV (HSB)?
Ambos descrevem uma cor por matiz (0–360°) e saturação, mas usam um terceiro valor diferente. Em HSL, 50% de luminosidade é a cor pura, 0% é preto e 100% é branco. Em HSV/HSB, 100% de valor ou brilho é a cor pura em saturação total, e 0% é preto. Aplicativos de design como Photoshop e Figma geralmente usam HSB em seus seletores de cores, enquanto o CSS usa HSL.
A conversão para CMYK é precisa para impressão?
Os valores CMYK são uma conversão matemática a partir do RGB, o que é útil como ponto de partida. A impressão real depende da impressora, da tinta e do papel, definidos por perfis de cores ICC. Para trabalhos de impressão profissionais, faça a conversão em seu software de design usando o perfil da sua impressora.
O que significam as taxas de contraste?
As Diretrizes de Acessibilidade para Conteúdo da Web (WCAG) medem o contraste entre texto e fundo de 1:1 a 21:1. O texto normal precisa de pelo menos 4.5:1 para passar no nível AA, e o texto grande (cerca de 24 px, ou 18.7 px em negrito) precisa de 3:1. O verificador mostra se a cor é aprovada em um fundo branco e em um fundo preto.
Quais formatos de entrada são suportados?
HEX com 3, 4, 6 ou 8 dígitos (com ou sem #), rgb() e rgba(), hsl() e hsla(), hsv() ou hsb(), cmyk(), três números simples como 255 136 0, e nomes de cores CSS como rebeccapurple. Tanto a sintaxe separada por vírgulas quanto a moderna separada por espaços funcionam, incluindo alfa como rgb(14 165 233 / 50%).

Ferramentas relacionadas

Conversor de ImagensConverta fotos e gráficos entre JPG, PNG, WebP e AVIF — em lote, sem precisar fazer upload.Conversor de Maiúsculas e MinúsculasAltere o texto para qualquer formato de caixa — de Formato Título a snake_case — e veja todos os formatos de uma vez.Codificar e Decodificar Base64Converta textos e arquivos para Base64 e vice-versa, com suporte total a UTF-8 e Base64URL.Gerador de Box ShadowAjuste sombras suaves, nítidas, em camadas ou internas com visualização em tempo real e copie o CSS.Simulador de DaltonismoVisualize suas imagens através dos olhos de alguém com deficiência de visão de cores para garantir que seus designs sejam acessíveis.Verificador de Contraste de CoresVerifique se o seu texto está legível — e obtenha a cor mais próxima que passa na WCAG.