Como converter códigos de cor HEX para RGB

HEX e RGB são duas formas de escrever exatamente as mesmas cores. Designers e desenvolvedores alternam entre eles constantemente: HEX em folhas de estilo CSS, RGB em animações JavaScript, HSL em ferramentas de design. Entender como eles se relacionam torna o trabalho com cores muito mais fácil. Um conversor lida com a aritmética mental para que voce possa se concentrar em obter a cor certa, não em divisão de base 16.

Como funcionam as cores HEX

Um código de cor HEX como #FF5733 é um número hexadecimal de 6 dígitos que representa os canais vermelho, verde e azul:

Cada canal varia de 00 (0, sem cor) a FF (255, intensidade total). Então #FF5733 significa vermelho total, algum verde, um pouco de azul, o que lhe dá um vermelho-laranja quente.

Como converter HEX em RGB

1. Digite seu código HEX: digite ou cole um código de cor como #FF5733 ou use o seletor de cores.
2. Veja os valores RGB: veja os valores equivalentes de vermelho, verde e azul (0-255 cada).
3. Copie em qualquer formato: pegue os valores como rgb(255, 87, 51), canais individuais ou outros formatos como HSL.

Uma breve história dos códigos de cor na Web

A cor nos primeiros navegadores da web (Mosaic 1993, Netscape 1994) usava apenas cores nomeadas: red, blue, green. A especificação HTML 3.2 (1997) introduziu códigos de cor hexadecimais via o atributo BGCOLOR, e CSS 1 (1996) os tornou universais. A escolha de HEX sobre decimal foi prática: um código HEX de 6 caracteres é mais curto que rgb(255, 87, 51) e mais fácil de copiar e colar de um seletor de cores.

O modelo de cor RGB em si é muito mais antigo. James Clerk Maxwell demonstrou em 1861 que qualquer cor visível ao olho humano pode ser criada misturando luz vermelha, verde e azul. Televisão (década de 1930) e monitores de computador (década de 1970) usaram esse princípio diretamente: cada pixel é tres subpixels (um vermelho, um verde, um azul) em diferentes brilhos.

O CSS moderno (a partir de 2010) adicionou muitos mais formatos de cor: hsl() (matiz, saturação, luminosidade), hwb() (matiz, brancura, negrura), lab() (perceptualmente uniforme), lch(), oklab(), oklch() e color() para espaços de cor arbitrários. Todos representam as mesmas cores que HEX/RGB, mas com modelos mentais diferentes. HEX persiste porque é denso, copiável e fácil de compartilhar.

Conversão manual: como fazer na sua cabeça

Voce não precisa de uma ferramenta para converter valores HEX simples. O truque é conhecer as potencias de 16:

• 0 = 0
• 5 = 5
• A = 10
• F = 15
• 10 (hex) = 16
• FF (hex) = 255

Para um par HEX como 5A: o primeiro dígito vezes 16 mais o segundo dígito. 5A = 5 × 16 + 10 = 90.

Para atalhos:

• 00 = 0
• 33 = 51 (um passo comum de 20% de cinza)
• 66 = 102
• 99 = 153
• CC = 204
• FF = 255

Os pares 33, 66, 99, CC (em qualquer combinação) produzem a clássica paleta «segura para web» de 216 cores dos anos 1990. Eles aparecem constantemente em moodboards de designers ainda hoje.

Códigos de cor comuns

HEX com alfa (HEX de 8 dígitos)

CSS 4 (2017) introduziu HEX de 8 dígitos com um canal alfa. #FF5733CC é rgb(255, 87, 51) com 80% de opacidade (CC em hex = 204, dividido por 255 = 0,80).

O suporte do navegador é universal em navegadores modernos (Chrome 62+, Firefox 49+, Safari 9.1+, Edge 79+). Para novos projetos, HEX de 8 dígitos é uma alternativa limpa para rgba(). Para projetos mais antigos, fique com rgba() para compatibilidade retroativa.

Um HEX curto de 4 dígitos também existe: #F80C é o mesmo que #FF8800CC. Mesmas regras de atalho do HEX de 3 dígitos.

Casos de uso para cada formato

Use HEX quando:

• Escrever valores de cor CSS em folhas de estilo
• Compartilhar uma única cor com designers ou em documentação
• Armazenar cores compactamente em arquivos JSON ou de dados
• Trabalhar com paletas de marca (empresas geralmente especificam cores de marca como HEX)

Use RGB quando:

• Animar cores em JavaScript (analisar os canais como números, interpolar, reformatar)
• Calcular taxas de contraste de cor (fórmulas WCAG operam em RGB)
• Precisar de transparencia parcial com rgba() para navegadores mais antigos
• Ler cor de canvas ou dados de imagem (a API Canvas retorna RGB)

Use HSL quando:

• Gerar uma paleta de matizes (manter saturação e luminosidade, variar matiz)
• Criar variantes de modo escuro (manter matiz, aumentar luminosidade)
• Fazer trabalho de teoria das cores (cores complementares estão a 180° de distancia em matiz)

Use OKLCH quando:

• Voce se importa com uniformidade perceptual (interpolar em OKLCH evita o «meio lamacento» que voce obtém em RGB)
• Construir um sistema de cores do zero em projetos 2024+

Armadilhas comuns

• Esquecer o prefixo #: CSS exige o hash. color: FF5733 é inválido; color: #FF5733 está correto.
• Misturar maiúsculas e minúsculas: #FF5733 e #ff5733 são a mesma cor mas estilisticamente inconsistentes. Escolha um (a maioria do código prefere minúsculas para HEX) e atenha-se a ele.
• Confundir HEX com hexadecimal em geral: códigos de cor hex são sempre 3, 4, 6 ou 8 dígitos. Outros comprimentos (5, 7) são inválidos. Programas podem truncar ou preencher silenciosamente.
• Ordem de bytes errada em HEX de 8 dígitos: algumas bibliotecas usam ARGB (#CCFF5733, alfa primeiro) em vez de RGBA (#FF5733CC, alfa por último). CSS usa RGBA. Adobe e algumas APIs Android usam ARGB.
• Assumir que RGB é sRGB: a maioria das cores HEX/RGB está no espaço de cor sRGB. Telas P3 (dispositivos Apple desde 2016) podem mostrar cores mais amplas, mas o HEX padrão não pode descreve-las. Use color(display-p3 ...) para essas.
• Arredondamento de cor ao converter ida e volta: HEX-para-RGB-para-HEX é sem perdas. HEX-para-HSL-para-HEX pode perder 1-2 níveis de precisão devido à matemática de ponto flutuante.

Dicas

• Use HEX em CSS: color: #FF5733 é mais limpo e mais comum que color: rgb(255, 87, 51) em folhas de estilo.
• Use RGB para transparencia: quando voce precisar de cores semi-transparentes, use rgba(255, 87, 51, 0.5). Não há maneira de adicionar alfa em HEX padrão (embora HEX de 8 dígitos exista, o suporte do navegador varia).
• Atalho de 3 dígitos: #F00 é o mesmo que #FF0000. Use quando cada par tiver dígitos identicos para economizar espaço.
• Seletor de cor é mais rápido: se voce está tentando encontrar a cor certa, use o seletor de cor visual em vez de adivinhar valores HEX. Copie o código quando estiver satisfeito com o resultado.
• Salve cores de marca como propriedades personalizadas CSS: --brand-primary: #FF5733 permite voce mudar o valor uma vez e atualizar em todos os lugares. Mais fácil do que pesquisar e substituir códigos HEX entre arquivos.
• Verifique o contraste após escolher: uma cor bonita é inútil se o texto sobre ela for ilegível. Combine este conversor com um verificador de contraste para verificar taxas WCAG AA (4.5:1) ou AAA (7:1).

Privacidade

O conversor HEX-para-RGB roda inteiramente no seu navegador. As cores que voce digita, suas paletas personalizadas e quaisquer valores salvos permanecem no seu dispositivo. Isso importa menos do que para ferramentas de conversão de arquivo (um código de cor não é pessoalmente sensível), mas importa por razões de confidencialidade de design: as cores com as quais voce está experimentando podem revelar direções de marca não anunciadas, trabalho de cliente sob NDA ou tematização de produto em desenvolvimento. A computação apenas em navegador tem zero exposição.