Conversor de cores
Converta cores entre HEX, RGB, HSL
Como usar Conversor de cores
Converta cores entre HEX, RGB, HSL Ferramenta gratuita online, sem registo, sem anúncios intrusivos. Use agora.
Para que serve um conversor de cores?
As cores no design digital existem em múltiplos formatos, cada um adequado a diferentes contextos. Converter entre eles é uma tarefa diária para designers web, desenvolvedores front-end e designers gráficos que trabalham com diferentes ferramentas e plataformas.
- Desenvolvimento CSS: Ferramentas de design exportam cores como HEX (#7B35F5), mas o CSS também aceita RGB (rgb(123,53,245)) e HSL (hsl(264,91%,58%)). Converta entre eles para combinar com a sintaxe CSS de sua preferência.
- Consistência de marca: Uma cor de marca definida em Pantone precisa ser expressa como HEX para web, CMYK para impressão e RGB para tela — cada um exige conversão precisa para garantir que a cor seja idêntica em todos os meios.
- Acessibilidade: HSL facilita o ajuste da luminosidade mantendo o tom constante — útil para criar variações de cor acessíveis com contraste suficiente para usuários com deficiência visual.
- Handoff design-código: Figma e Adobe XD exportam em HEX; alguns desenvolvedores preferem HSL pelo modelo intuitivo de matiz/saturação/luminosidade. Converta facilmente entre os formatos durante a implementação.
- Preparação para impressão: Cores de tela (RGB) devem ser convertidas para CMYK para impressão. RGB tem uma gama maior do que CMYK — algumas cores vivas na tela não podem ser reproduzidas com fidelidade na impressão física.
Resumo dos formatos: HEX (#RRGGBB) é conciso e universal para web. RGB (0-255 por canal) é o formato nativo de tela. HSL (matiz 0-360°, saturação 0-100%, luminosidade 0-100%) é o mais intuitivo para humanos ao criar e ajustar cores. CMYK (0-100% por canal) é para impressão profissional.
Frequently Asked Questions
Qual é a diferença entre RGB e RGBA?
RGBA adiciona um canal alfa (transparência) ao RGB: rgba(123,53,245,0.5) é roxo com 50% de transparência. O valor alfa varia de 0 (totalmente transparente) a 1 (totalmente opaco). Da mesma forma, HSLA adiciona alfa ao HSL. O HEX suporta notação de 8 dígitos para o alfa: #7B35F580 (onde 80 em hex = 50% de opacidade).
Por que RGB e CMYK representam gamas de cores diferentes?
RGB é aditivo — misturar luz vermelha, verde e azul produz branco (usado em telas). CMYK é subtrativo — misturar tinta ciano, magenta, amarela e preta absorve luz para produzir cores (usado em impressão). RGB pode representar cores mais vivas do que o CMYK consegue reproduzir em impressão. Cores neon brilhantes na tela frequentemente ficam mais apagadas quando impressas.
O que é HSL e por que é útil?
HSL (Matiz, Saturação, Luminosidade) foi projetado para ser intuitivo. Matiz é a cor (0°=vermelho, 120°=verde, 240°=azul, 360°=vermelho novamente). Saturação é a intensidade (0%=cinza, 100%=vivid). Luminosidade é o brilho (0%=preto, 50%=cor pura, 100%=branco). Para clarear ou escurecer uma cor sem alterar o tom, basta mudar o valor L.
Como converter HEX para RGB manualmente?
Divida o HEX de 6 dígitos em três pares e converta cada um de base 16 para base 10. #7B35F5: 7B=123 (vermelho), 35=53 (verde), F5=245 (azul) → rgb(123,53,245). Conversores online fazem isso instantaneamente, mas entender a conversão ajuda ao ler valores HEX diretamente no código.
O que são perfis de cor (sRGB, Adobe RGB, Display P3)?
Perfis de cor definem a gama de cores que um dispositivo pode exibir. sRGB é o padrão para web e a maioria dos monitores. Adobe RGB cobre aproximadamente 50% mais do espectro visível — usado em fotografia profissional. Display P3 (usado em dispositivos Apple) cobre cerca de 25% mais do que sRGB. Imagens em Adobe RGB parecem desbotadas em telas sRGB se não forem convertidas corretamente.
Conversor de cores vs seletor de cores vs gerador de paleta
Um conversor de cores traduz um valor de cor existente entre formatos. Um seletor de cores (DevTools do navegador, seletor de cores do SO) permite selecionar uma cor visualmente e exporta seu valor. Um gerador de paleta cria combinações de cores harmoniosas a partir de uma cor base usando regras de teoria das cores. Um verificador de contraste verifica se uma combinação de cores atende aos padrões de acessibilidade WCAG. Estas ferramentas se complementam — escolha uma cor, converta para o formato necessário, verifique o contraste e gere uma paleta.