O que é a conversão de HEX para RGB e porque é que precisamos dela
Um código hexadecimal como #4f46e5 e uma tripla RGB como (79, 70, 229) descrevem exactamente a mesma cor num ecrã. A diferença está no formato: o HEX é uma notação compacta baseada em base 16, enquanto o RGB apresenta três números inteiros entre 0 e 255, um para cada canal (vermelho, verde, azul). Esta página faz a ponte entre os dois, convertendo qualquer código hexadecimal válido de seis ou três dígitos nos seus valores RGB correspondentes, sem margem para aproximações.
O que distingue esta ferramenta de um conversor genérico é que ela não se limita a apresentar o resultado — ela aplica a transformação matemática exacta entre os dois sistemas numéricos. Enquanto muitos conversores online tratam HEX e RGB como caixas pretas, aqui cada par de dígitos hexadecimais é multiplicado pelas potências de 16, gerando valores inteiros de 0 a 255. Não há arredondamentos, cortes de gama ou interpretações ambíguas. Isto é particularmente importante quando se trabalha com código: um erro de um dígito pode alterar completamente a cor, e saber o que está a acontecer matematicamente ajuda a depurar e a prever resultados.
Os monitores usam o modelo aditivo RGB, onde cada pixel é composto por três subpixeis que emitem luz vermelha, verde e azul. A intensidade de cada subpixel é controlada por um número de 8 bits, ou seja, 256 valores possíveis (de 0, totalmente apagado, a 255, totalmente aceso). Um código HEX como #4f46e5 é apenas a forma hexadecimal de escrever esses três números de 8 bits, usando dois dígitos hexadecimais por canal. O valor 4f em hexadecimal corresponde a 4×16 + 15 = 79 em decimal; 46 dá 70; e5 dá 229. É esta correspondência biunívoca que a página explora.
Como funciona matematicamente a conversão de base 16 para base 10
A conversão assenta na definição do sistema hexadecimal, que usa os dígitos 0-9 e as letras A-F (maiúsculas ou minúsculas) para representar valores de 0 a 15. Cada par de dígitos hexadecimais corresponde a um canal RGB. O primeiro dígito do par representa as dezenas em base 16 (valor multiplicado por 16), e o segundo dígito representa as unidades.
Por exemplo, para o código #4f46e5:
- Canal vermelho:
4f=4 × 16 + 15=64 + 15=79 - Canal verde:
46=4 × 16 + 6=64 + 6=70 - Canal azul:
e5=14 × 16 + 5=224 + 5=229
O resultado é a tripla RGB (79, 70, 229). Se o código hexadecimal for fornecido sem o prefixo # (por exemplo, 4f46e5), a página aceita-o na mesma. O prefixo é opcional, mas recomendado por convenção em CSS.
Se o código for uma abreviatura de três dígitos, como #abc, a página expande-o automaticamente para seis dígitos duplicando cada caractere: #abc torna-se #aabbcc. Depois aplica a mesma conversão:
aa=10×16 + 10=170bb=11×16 + 11=187cc=12×16 + 12=204
Assim, #abc equivale a rgb(170, 187, 204). O utilizador nunca precisa de fazer esta expansão mentalmente; a página encarrega-se disso.
Tratamento de códigos abreviados e o prefixo
A página foi desenhada para aceitar os dois formatos mais comuns de HEX: o formato completo de seis dígitos (#RRGGBB) e o formato abreviado de três dígitos (#RGB). O formato abreviado é uma herança dos primeiros dias da web, quando os ecrãs suportavam apenas 256 cores e a notação compacta era suficiente. Hoje continua a ser usada por conveniência, especialmente para cores como #fff (branco) ou #000 (preto). A expansão automática para seis dígitos segue a regra de duplicação: cada dígito é replicado, porque cada canal de 8 bits precisa de dois dígitos hexadecimais para representar valores de 0 a 255. Um único dígito hexadecimal só representa valores de 0 a 15, o que não é suficiente para a gama completa de 256 níveis.
A página não processa códigos de oito dígitos, que incluiriam um canal alfa (transparência). O foco é exclusivamente a conversão HEX para RGB sem transparência. Se um utilizador introduzir algo como #4f46e5ff, a ferramenta responde com a mensagem de erro: "Enter a hex color like #4f46e5 or #abc." (em inglês, pois é o texto standard da interface). Isto evita confusões: a página não tenta adivinhar se o utilizador quer ignorar o canal alfa ou convertê-lo para RGBA.
Regras e casos extremos na entrada
Qualquer campo de cor na página pode ser editado; quando um valor é alterado, todos os outros formatos (HEX, RGB, HSL, HSV, CMYK, LAB) são actualizados instantaneamente. Isto significa que se o utilizador digitar um valor RGB inválido (por exemplo, números fora de 0-255), os restantes campos reflectirão essa alteração — mas apenas se o valor for interpretável. A validação específica para o campo HEX é rigorosa.
Os códigos HEX devem corresponder exactamente a uma das seguintes formas:
- Seis caracteres alfanuméricos (0-9, A-F, a-f), opcionalmente precedidos de
#. - Três caracteres alfanuméricos, opcionalmente precedidos de
#, que serão expandidos.
Qualquer outra combinação — incluindo espaços, caracteres especiais, letras fora do intervalo A-F, ou comprimentos diferentes de 3 ou 6 caracteres (excluindo o #) — gera a mensagem de erro. Isto impede que o utilizador introduza códigos de 4 dígitos (que às vezes aparecem em certas ferramentas de desenho vectorial) ou valores com reticências.
O seletor de cor integrado também fornece entradas válidas. Quando o utilizador escolhe uma cor visualmente, o campo HEX é preenchido com o código correspondente (sempre de seis dígitos) e todos os outros formatos são recalculados. Isto é útil para quem prefere selecionar a cor graficamente em vez de escrever um código.
A conversão é feita inteiramente no navegador do utilizador — não há envio de dados para servidores. Isto significa que cores sensíveis (como as de um projeto confidencial) nunca saem do computador. A página funciona mesmo offline, se o ficheiro HTML estiver guardado localmente.
Aplicações práticas para programadores e designers
Os programadores front-end encontram frequentemente situações em que precisam de valores RGB numéricos. Por exemplo, ao usar a API Canvas para desenhar gráficos, o método fillStyle aceita uma string rgb(r, g, b), mas também pode receber valores separados se se usar context.fillStyle = 'rgb(79,70,229)'. Ter a tripla numérica à mão evita erros de digitação. Outro caso é o uso de funções de cor em JavaScript, como chroma.js ou color, que muitas vezes esperam arrays ``.
Os designers que recebem especificações de cor em HEX a partir de guias de marca (brand guidelines) e precisam de introduzir esses valores em software como Photoshop, Sketch ou Figma — que por vezes preferem sliders RGB ou campos numéricos — podem copiar directamente os três números. O mesmo se aplica a ferramentas de acessibilidade que calculam rácios de contraste com base na luminância relativa, uma métrica que deriva directamente dos valores lineares de RGB.
Para quem está a aprender a relação entre os dois sistemas, a página funciona como um laboratório de exploração. Experimentar variações de #ff0000 (vermelho puro) e ver o RGB (255,0,0) ajuda a interiorizar que FF é 255, 00 é 0. Analogamente, #00ff00 (verde) e #0000ff (azul) mostram como cada par de dígitos controla um canal independente. Esta compreensão é essencial para dominar a mistura aditiva de cores.
FAQ
P: A página aceita códigos com letras maiúsculas e minúsculas?
R: Sim, tanto #4F46E5 como #4f46e5 são igualmente válidos. O sistema hexadecimal não diferencia maiúsculas de minúsculas.
P: O que acontece se eu introduzir um código de três dígitos com o prefixo #?
R: O código é expandido automaticamente para seis dígitos duplicando cada caractere. Por exemplo, #f90 torna-se #ff9900 e depois é convertido para rgb(255, 153, 0).
P: Porque é que não posso usar oito dígitos, por exemplo para definir transparência? R: Esta página foi concebida exclusivamente para conversão HEX para RGB sem canal alfa. Códigos de oito dígitos (HEX com alpha) pertencem a uma ferramenta diferente. Se tentar, verá a mensagem de erro padrão.
P: Os valores RGB são sempre inteiros entre 0 e 255? R: Sim, porque a conversão de hexadecimal para decimal é exacta: cada par de dígitos hexadecimais representa exactamente um número entre 0 e 255. Não há frações nem arredondamentos.
P: Como faço para converter um valor RGB de volta para HEX? R: Esta página não oferece a conversão inversa (RGB para HEX) num único sentido, mas ao editar qualquer campo (incluindo RGB), todos os outros são actualizados. Basta escrever os três números RGB no campo respectivo que o campo HEX será preenchido automaticamente.
P: O que significa o erro “Enter a hex color like #4f46e5 or #abc.”?
R: Significa que o texto que introduziu no campo HEX não corresponde a um código hexadecimal válido. Verifique se tem exactamente seis ou três caracteres (excluindo o #), usando apenas dígitos 0-9 e letras A-F.