Conversor de Hex para RGB

Last updated: 2026-09-09

Conversor de Hex para RGB — Conversor online gratuito de hex para rgb. Insira a cor hex para obter resultados instantâneos.
Dados
Resultado
Insira os valores e clique em Calcular
Exemplos comuns — Clique para preencher
Cor hexadecimal
Grama fresca #7CFC00
Azul profundo do oceano #000080
Laranja pôr do sol #FF4500
Lavanda suave #E6E6FA

TL;DR: Para converter uma cor hexadecimal em RGB, divida o código hex de seis dígitos (por exemplo, #FF8800) em três pares (FF, 88, 00) e, em seguida, converta cada par da base 16 (hexadecimal) para a base 10 (decimal) para obter os valores de Vermelho, Verde e Azul (255, 136, 0).

O que é o Conversor de Hex para RGB?

O Conversor de Hex para RGB é uma ferramenta online gratuita que traduz um código de cor hexadecimal — o formato padrão usado em design web e CSS — em seus valores RGB (Vermelho, Verde, Azul) equivalentes. Embora códigos hex como #4285F4 sejam compactos e amigáveis para máquinas, muitas ferramentas de design, editores de imagem e bibliotecas de visualização de dados exigem tripletos RGB (por exemplo, rgb(66, 133, 244)). Este conversor preenche essa lacuna instantaneamente, permitindo copiar os valores numéricos exatos sem cálculos manuais.

Quem precisa disso? Desenvolvedores web, designers de UI/UX, artistas digitais e profissionais de marketing que extraem cores de marca de um site (que geralmente usa hex) e depois precisam inserir essas mesmas cores em ferramentas como Photoshop, Figma ou Matplotlib do Python. Também é crucial ao escrever scripts de verificação de contraste ARIA ou quando uma variável CSS falha e você precisa depurar os valores dos canais RGB subjacentes. Em vez de abrir um seletor de cores ou fazer aritmética mental propensa a erros, você cola o código hex e recebe três inteiros limpos entre 0 e 255.

Como Usar a Calculadora

Usar o conversor é um processo de duas etapas, mas a entrada deve estar formatada corretamente:

  1. Insira a cor hex: Digite ou cole seu valor hex no campo de entrada — por exemplo, #1E90FF. O campo aceita valores com ou sem o caractere # inicial. Ele não aceita abreviações de três dígitos como #09C; você deve fornecer o código completo de seis dígitos.
  2. Clique no botão "Converter": Após enviar, a ferramenta calcula instantaneamente os valores decimais para Vermelho, Verde e Azul.
  3. Leia a saída: Os resultados são exibidos como três valores RGB separados — geralmente apresentados como R: 30, G: 144, B: 255. Algumas versões também mostram a string CSS combinada rgb(30, 144, 255) para copiar e colar diretamente.

É isso — sem configurações extras, sem controles deslizantes. A lógica central é determinística, então a mesma entrada sempre produz a mesma saída.

Fórmula e Método de Cálculo

A conversão é pura aritmética de base 16 para base 10. Um código de cor hex representa os componentes vermelho, verde e azul usando dois dígitos hexadecimais (0–9 e A–F) cada. A fórmula para um único canal é:

(PrimeiroDígito × 16) + SegundoDígito

Onde "PrimeiroDígito" e "SegundoDígito" são os valores decimais dos caracteres hex: 0–9 permanecem como estão, A=10, B=11, C=12, D=13, E=14 e F=15.

Exemplo Prático: Convertendo #3C8D2A

Vamos decompor um código real passo a passo.

  1. Divida o código hex: #3C8D2A se torna três pares: Vermelho = 3C, Verde = 8D, Azul = 2A.
  2. Converta o Vermelho (3C): O primeiro dígito é 3 (valor 3), o segundo dígito é C (valor 12). Usando a fórmula: (3 × 16) + 12 = 48 + 12 = 60.
  3. Converta o Verde (8D): O primeiro dígito é 8 (valor 8), o segundo dígito é D (valor 13). Cálculo: (8 × 16) + 13 = 128 + 13 = 141.
  4. Converta o Azul (2A): O primeiro dígito é 2 (valor 2), o segundo dígito é A (valor 10). Cálculo: (2 × 16) + 10 = 32 + 10 = 42.
  5. Combine os resultados: O tripleto RGB final é rgb(60, 141, 42).

Observe que o "#" inicial é ignorado — é apenas um marcador, não parte do valor numérico.

Exemplos Práticos

Aqui estão três cenários realistas mostrando diferentes tipos de entrada e o que a saída significa no contexto.

Entrada Hex Detalhamento do Cálculo Saída RGB Uso / Significado
#FFFFFF FF = (15×16)+15 = 255; FF = 255; FF = 255 rgb(255, 255, 255) Branco puro. Valor máximo para cada canal. Usado como fundo de página ou texto claro em temas escuros.
#008000 00 = 0; 80 = (8×16)+0 = 128; 00 = 0 rgb(0, 128, 0) Verde "oficial" em HTML. Intensidade média — útil para indicadores de status (mensagens de sucesso).
#B22222 B2 = (11×16)+2 = 178; 22 = (2×16)+2 = 34; 22 = 34 rgb(178, 34, 34) Vermelho tijolo (firebrick). Vermelho alto, verde/azul baixos. Usado para alertas de erro ou CTAs urgentes porque se destaca.

Cada um desses exemplos confirma que o valor RGB mais alto possível é 255 (de FF), e o mais baixo é 0 (de 00). A conversão nunca ultrapassa esses limites.

Dicas para Resultados Precisos

Mesmo que a matemática seja simples, alguns erros podem arruinar uma conversão perfeita. Siga estas dicas com base nos requisitos específicos de entrada da calculadora:

  • Sempre use seis dígitos: O conversor não expande hex abreviado como #F80 para #FF8800. Você deve inserir o código completo de seis caracteres. Um código de três dígitos é inválido e produzirá um erro ou um valor incorreto.
  • Verifique o símbolo de hash inicial: Embora a calculadora aceite #1E90FF e 1E90FF de forma intercambiável, um espaço solto ou um símbolo diferente (como dois pontos) quebrará a análise. Copie o código diretamente do seu arquivo CSS para evitar erros de transcrição.
  • Não arredonde resultados intermediários: Este conversor trabalha apenas com inteiros — não há frações em hex. Mas se você estiver verificando manualmente o resultado, nunca arredonde a conversão do primeiro dígito separadamente. Por exemplo, para FE, não arredonde 15 para 16; o valor é exatamente (15×16)+14 = 254.
  • Verifique o intervalo válido (0–255): Todo código hex válido de seis dígitos mapeia para exatamente um inteiro entre 0 e 255 por canal. Se você vir uma saída como 256 ou −1, sua entrada estava malformada (por exemplo, usou caracteres como G ou Z, ou tinha apenas um dígito).
  • Cuidado com maiúsculas vs. minúsculas: Dígitos hex não diferenciam maiúsculas de minúsculas (ff é igual a FF), mas o conversor tratará ambos de forma idêntica. Apenas não misture um l minúsculo (letra L) com o dígito 1 — eles não são iguais.
  • Não inclua valores alfa: A ferramenta converte apenas RGB, não RGBA. Se você tiver um código hex com um par extra para transparência (por exemplo, #80FF0000), a calculadora ignorará os dois últimos dígitos ou retornará um erro. Use um conversor RGBA dedicado para isso.

Perguntas Frequentes

1. Como converto um código hex sem o símbolo #, como "A0B1C2"?

Basta colar os seis caracteres diretamente no campo de entrada. O conversor remove automaticamente o # se presente, mas também funciona sem ele. Para A0B1C2, a ferramenta o divide em A0, B1 e C2, e então calcula: A0 = (10×16)+0 = 160, B1 = (11×16)+1 = 177, C2 = (12×16)+2 = 194. A saída é rgb(160, 177, 194). A única regra estrita é que você deve ter exatamente seis dígitos hexadecimais após qualquer # opcional.

2. Qual é a diferença entre hex (#FF0000) e RGB (255, 0, 0)?

Matematicamente, nenhuma — são duas notações para exatamente a mesma cor. O sistema hex usa base 16 para comprimir os números, enquanto RGB usa inteiros decimais. #FF0000 é traduzido para rgb(255, 0, 0) porque FF = (15×16)+15 = 255. A diferença prática é a compatibilidade: CSS, HTML e SVG aceitam ambos. No entanto, alguns sistemas mais antigos ou APIs (como certos métodos canvas em JavaScript ou registros de hardware) só aceitam inteiros RGB. Este conversor existe para produzir o tripleto inteiro exato que você precisa sem calcular potências de 16 manualmente.

3. O conversor pode lidar com hex curto como #FFF ou #123?

Não, não pode. A ferramenta é projetada estritamente para códigos de seis dígitos. A abreviação de três dígitos (#FFF) é uma conveniência do CSS onde cada dígito é duplicado (então #FFF se torna #FFFFFF). Se você inserir #FFF, o conversor o rejeitará como inválido porque precisa de uma estrutura completa de três pares. Para usar a calculadora, você deve expandi-lo manualmente: #FFF → #FFFFFF → rgb(255, 255, 255). Da mesma forma, #123 → #112233 → rgb(17, 34, 51). Esta é uma escolha de design deliberada para evitar ambiguidade — a ferramenta não assume que você quer duplicação.