Conversor de Cores

Conversor de Cores - Converta Entre Formatos de Cores

Um poderoso conversor de cores que converte entre formatos HEX, RGB, HSL e CMYK. Apresenta seletor de cores com visualização ao vivo, copiar cores para área de transferência e detecção de brilho de cor. Perfeito para desenvolvedores web, designers e qualquer pessoa trabalhando com cores.

Como converto HEX para RGB ou RGB para HEX?

Cole um valor HEX (com ou sem o # inicial) no campo HEX, ou digite três números nos campos R, G, B, e cada outro formato é atualizado no instante em que sua entrada for válida. A matemática é direta: HEX é apenas RGB em base 16, então #FF5733 se divide em pares FF/57/33 que equivalem a 255/87/51 em decimal. No caminho inverso, cada canal RGB se divide por 16 para dar um dígito hex e o resto dá o próximo; a ferramenta cuida das duas conversões e da notação abreviada de 3 dígitos (#F57 expande para #FF5577). Use HEX ao escrever CSS à mão, RGB ao manipular cores em JavaScript ou para canal alfa (rgba(255,87,51,0.8) para 80% de opacidade, que HEX não expressa de forma limpa até chegar à sintaxe de 8 dígitos #FF5733CC).

Quando usar HSL em vez de HEX ou RGB?

HSL é o formato que mapeia como designers humanos pensam em cor: escolha um matiz do arco-íris, depois quão vivo (saturação) e quão claro (luminosidade) você quer. Use HSL quando precisar derivar variações de uma única cor — para fazer um estado hover 10% mais escuro, mantenha o mesmo H e S e diminua L em 10%; o resultado é automaticamente o mesmo matiz. Fazer isso em HEX ou RGB requer malabarismo nos três canais e geralmente desloca o matiz acidentalmente. HSL também é a espinha dorsal das rampas de cor de design systems (Tailwind, Material, Radix), das custom properties CSS para temas, e de qualquer animação que faça fade entre cores relacionadas. CSS moderno suporta hsl() diretamente sem conversão: color: hsl(9 100% 60%);.

Por que meus valores CMYK parecem mais apagados que a versão RGB na tela?

RGB é um modelo de cor aditivo usado por dispositivos emissores de luz (monitores, telefones, projetores), onde somar os três canais ao máximo produz branco puro. CMYK é um modelo subtrativo usado por tinta sobre papel, onde somar as quatro tintas subtrai luz para produzir quase preto. Os espaços de cor visíveis se sobrepõem mas não são idênticos: um azul vibrante de tela ou um verde neon não pode ser reproduzido por nenhuma combinação de tintas CMYK, então a conversão matemática corta para a faixa imprimível e os resultados parecem abafados. É física fundamental, não bug. Para trabalho profissional de impressão, projete diretamente em CMYK desde o início em software como Adobe InDesign ou Affinity Publisher usando um perfil de cor ICC ajustado à sua impressora; nunca confie em uma prévia CMYK automática na tela como final.

Como o brilho da cor é calculado e por que importa?

A ferramenta usa a fórmula de brilho perceptual 0.299 × R + 0.587 × G + 0.114 × B, que pondera cada canal RGB pelo quanto o olho humano responde a ele. O verde domina porque células cone na retina são mais sensíveis a comprimentos de onda do espectro médio; vermelho é intermediário; azul contribui menos para o brilho percebido. O resultado é um número de 0 (preto puro) a 255 (branco puro). Importa porque o mesmo valor numérico de canal parece diferente entre matizes — verde puro (0,255,0) parece muito mais brilhante que azul puro (0,0,255) em magnitudes RGB idênticas. Por isso as regras automáticas de detecção claro/escuro (acima de 128 = claro, abaixo = escuro) são baseadas em brilho perceptual em vez de fazer média dos canais brutos.

Qual a diferença entre códigos HEX de 3 e 6 dígitos?

Um HEX de 3 dígitos como #F57 é notação abreviada do valor de 6 dígitos #FF5577, com cada dígito duplicado. Funciona porque cada par de dígitos hex idênticos representa o mesmo byte (FF = 255, 77 = 119), então a abreviação reduz pares repetidos a dígitos únicos. A abreviação alcança apenas 4.096 cores (16^3) frente aos 16,7 milhões disponíveis na notação de 6 dígitos, então é boa para primárias web-safe sólidas e cinzas puros (#000, #FFF, #888) mas não consegue representar a maioria das cores de marca sutis. Use abreviação para manter folhas de estilo pequenas compactas e notação de 6 dígitos em todo o resto. CSS também aceita abreviação de 4 dígitos (#F57C = #FF5577CC) e notação de 8 dígitos (#FF5577CC) para cores com alfa, que a ferramenta também pode produzir.

Por que meu HEX exato de marca renderiza ligeiramente diferente entre dispositivos?

Navegadores renderizam cor no espaço sRGB por padrão, mas os pixels reais que você vê dependem da calibração do seu monitor, tecnologia do painel (IPS vs OLED vs TN antigo), ajuste de brilho, luz ambiente, e se o SO aplica um perfil de gamut amplo como Display P3. Dois monitores olhando o mesmo #1A73E8 podem mostrar azuis sutilmente diferentes, e a mesma tela pode mudar ao longo do dia conforme modos noturnos de tom quente ativam. Para consistência de marca, defina tokens de cor uma vez em HEX ou HSL, documente com nomes semânticos, e confie que a variação é limitada — sRGB ainda cobre cerca de 35% do espectro visível e é o denominador comum universal. Para cores que precisam combinar entre impressão e tela, use a saída CMYK aqui como ponto de partida e faça uma prova de impressão antes de se comprometer.

Posso representar transparência ou canal alfa em HEX?

Sim, navegadores modernos suportam HEX de 8 dígitos (#RRGGBBAA) onde os dois últimos dígitos hex codificam um canal alfa de 00 (totalmente transparente) a FF (totalmente opaco). Por exemplo #FF5733CC é a mesma cor que #FF5733 a cerca de 80% de opacidade (CC = 204 / 255). A abreviação de 4 dígitos #F57C expande do mesmo modo. Entretanto, a sintaxe antiga rgba() (rgba(255, 87, 51, 0.8)) permanece mais legível, mais amplamente suportada em clientes de email legados, e mais fácil de manipular via JavaScript ou custom properties CSS porque o alfa é um campo decimal separado. Use HEX de 8 dígitos quando quiser um token único autocontido; use rgba() quando o alfa varie independentemente da cor base, por exemplo ao fazer fade de uma cor de marca em uma transição hover.

Quão precisa é a conversão RGB para HSL e que casos extremos observar?

A conversão é matematicamente sem perdas em ambas direções — cada trio (R, G, B) mapeia para exatamente um trio (H, S, L) — mas dois casos extremos produzem resultados não intuitivos. Cores em escala de cinza puras (onde R = G = B) têm matiz indefinido porque não há canal dominante; esta ferramenta reporta H = 0 por convenção, mas você não pode usar esse valor de matiz para gerar esquemas de harmonia (qualquer harmonia a partir de uma base cinza permanece cinza). Segundo, cores muito escuras ou muito claras perdem precisão de matiz quando armazenadas como porcentagens inteiras: uma cor em L = 2% com saturação alta pode arredondar para o mesmo valor HSL que uma com saturação baixa, então o round-trip RGB → HSL → RGB pode desviar uma ou duas unidades RGB. Para design tokens, armazene o HEX original e trate HSL como derivação, não fonte de verdade.

Recursos Principais

• Converter entre HEX, RGB, HSL e CMYK
• Seletor de cores interativo
• Visualização ao vivo da cor
• Copiar qualquer formato de cor para área de transferência
• Detecção de brilho (claro/escuro)
• Suporte para formatos HEX #RGB e #RRGGBB
• Conversão em tempo real enquanto digita
• Calculadora de brilho de cor
• 100% processamento no lado do cliente
• Sem comunicação com servidor
• Funciona offline
• Suporte para modo escuro
• Interface amigável para dispositivos móveis