Conversor HEX para RGB

Como funciona a conversão HEX para RGB

As cores HEX usam uma string hexadecimal de seis dígitos (#RRGGBB) onde cada par representa os canais vermelho, verde e azul. Os valores vão de 00 (0) a FF (255).

O RGB usa três números decimais (0 a 255) para cada canal. Por exemplo, #2b7190 se decompõe em R:43, G:111, B:142.

Perguntas frequentes

Como converter HEX em RGB manualmente ?

Divida o código hex em três pares (por ex. #FF8800 → FF, 88, 00), depois converta cada par da base 16 para a base 10 : FF = 255, 88 = 136, 00 = 0. O resultado é rgb(255, 136, 0).

E os códigos HEX de 3 dígitos ?

O HEX de 3 dígitos é um atalho onde cada dígito é duplicado : #F80 = #FF8800. Este conversor trata os dois formatos automaticamente.

Quando usar HEX ou RGB ?

O HEX é mais compacto e popular em CSS. O RGB é preferível quando você precisa manipular os canais individualmente em código ou usar rgba() para a transparência.

O que a notação hexadecimal realmente é

Uma cor hexadecimal é uma representação em base 16 de uma cor RGB de 24 bits. Seis dígitos após o #, três pares: vermelho, verde, azul. Cada par é um número de 00 a ff: um byte (8 bits) por canal, três canais, 24 bits no total. Isso é exatamente o suficiente para codificar qualquer uma de 2²⁴ = 16.777.216 cores distintas. A gama de «cor verdadeira» / «milhões de cores» que tem sido a referência das telas de consumo desde o final dos anos 1990.

O sinal de cerquilha não faz parte do valor, é um prefixo sintático que diz ao analisador de CSS «o que vem a seguir é uma cor hexadecimal, não um nome de variável». Sem ele, uma string como ff0000 poderia ser ambígua para o lexer. Os dígitos de 0 a 9 mantêm seu significado decimal; as letras de A a F (sem distinção de maiúsculas e minúsculas no CSS) representam de 10 a 15 em decimal. Então f é 15, e ff é 15 × 16 + 15 = 255.

A matemática, com exemplos resolvidos

Cada par hexadecimal de dois dígitos se mapeia para um decimal de 0 a 255 pela fórmula (high_digit × 16) + low_digit, em que cada dígito é interpretado de 0 a 15 (de A=10 até F=15):

• FF → (15 × 16) + 15 = 255
• 88 → (8 × 16) + 8 = 136
• 00 → 0
• 2B → (2 × 16) + 11 = 43 (o canal vermelho da amostra padrão #2b7190 acima)
• 71 → (7 × 16) + 1 = 113
• 90 → (9 × 16) + 0 = 144

Em JavaScript, a análise inteira cabe em duas linhas. const n = parseInt(hex.slice(1), 16); seguido de const [r, g, b] = [(n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff];: esse é, em essência, o código fundamental de todo conversor de hexadecimal para RGB na web. O sentido inverso é '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0').

Abreviações de 3, 4 e 8 dígitos

O CSS permite formas abreviadas quando os canais são simétricos:

• 3 dígitos (#RGB), cada dígito é duplicado para formar o código equivalente de 6 dígitos. #F00 → #FF0000; #FFF → #FFFFFF; #369 → #336699. A forma é cômoda para cores «redondas» amigáveis a designers, mas só consegue expressar 4.096 valores únicos, não 16,7 milhões, não há abreviação para #778899 porque os pares são diferentes.
• 8 dígitos (#RRGGBBAA) igual ao de 6 dígitos mais um par alfa. 00 = totalmente transparente, FF = totalmente opaco, 80 ≈ 50% de opacidade. Funcionalmente idêntico a rgba(255, 0, 0, 0.5), mas mais compacto.
• 4 dígitos (#RGBA), abreviação por duplicação da forma de 8 dígitos. #F00A → #FF0000AA.

A abreviação de 3 dígitos já existia no CSS Level 1 (1996). As formas alfa de 4 e 8 dígitos vieram muito depois, no CSS Color Module Level 4, com ampla disponibilidade entre navegadores desde meados de 2015.

As cores nomeadas e a história do rebeccapurple

Antes de o hexadecimal se tornar o idioma padrão da web, as cores nomeadas eram a norma. O HTML 4.01 (dezembro de 1999) especificou 16 cores nomeadas, black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua: baseadas nas 16 cores padrão da paleta VGA do Windows. O CSS 2.1 acrescentou orange como a décima sétima. O CSS Color Module Level 3 então adotou formalmente cerca de 130 nomes adicionais do arquivo rgb.txt do X11 (que o Mosaic e o Netscape inicial herdaram de suas raízes no X Window System), elevando o total para aproximadamente 147-148, dependendo de como você conta apelidos como cyan/aqua e gray/grey.

O CSS Color Module Level 4 acrescentou mais uma, com uma história por trás. Rebecca Meyer era a filha de seis anos de Eric A. Meyer, uma das primeiras autoridades em CSS e participante do W3C. Ela morreu de câncer no cérebro em 7 de junho de 2014, no seu sexto aniversário. Eric escreveu no seu blog na mesma semana: «Ela chegou aos seis. Por quase doze horas, ela teve seis anos.» Um membro da comunidade propôs acrescentar a cor favorita dela, um roxo berinjela profundo, hexadecimal #663399: como beccapurple; Eric aceitou com uma condição: tinha de ser rebeccapurple, não beccapurple, porque a própria Rebecca havia anunciado recentemente que agora era grande demais para o apelido infantil. O CSS Working Group aprovou a mudança em 22 de junho de 2014, duas semanas após a morte dela. O WebKit e outros motores de navegador lançaram o suporte em questão de dias. É a única cor do CSS batizada em homenagem a uma pessoa, um memorial silencioso em todos os navegadores modernos.

sRGB: o espaço de cor implícito de todo código hexadecimal

Quando você escreve #FF5733 no CSS, não está apenas especificando um número, está especificando-o no espaço de cor sRGB. Isso é implícito; o navegador vai interpretar seu valor hexadecimal como sRGB, a menos que você use uma das funções color() mais recentes para especificar o contrário.

O sRGB foi proposto conjuntamente pela Hewlett-Packard e pela Microsoft em 1996 e adotado como IEC 61966-2-1:1999, um espaço de cor único e independente de dispositivo, projetado em torno da curva de resposta do monitor CRT típico da época. Ele compartilha suas cromaticidades primárias com o ITU-R BT.709 (o padrão de HDTV) no ponto branco D65 (6500 K). O W3C definiu explicitamente o sRGB como o espaço de cor padrão para a web; todos os códigos hexadecimais, todos os valores rgb(), todas as imagens JPEG clássicas e PNG sem rótulo são interpretados como sRGB.

Limitação honesta: o sRGB cobre cerca de 35,9% do diagrama de cores visíveis CIE 1931. Há cores que existem na natureza, podem ser exibidas por telas OLED modernas de celular, mas não podem ser especificadas em notação hexadecimal: verdes esmeralda saturados, vívidos tons de pôr do sol vermelho-alaranjado, tintas fluorescentes. O CSS Color Module Level 4 introduziu novos espaços para elas, acessíveis pela função color(): Display P3 (usado pelas telas da Apple desde o iPhone 7 e o iMac do final de 2015, cerca de 25% mais amplo que o sRGB) e Rec. 2020 (o padrão de transmissão 4K/8K, cerca de 75% do CIE 1931). Em dispositivos mais antigos, que só têm sRGB, o navegador recorre a uma alternativa de forma elegante.

Alternativas modernas: HSL, HWB, OKLCH

O hexadecimal é compacto, mas não é amigável para humanos: você não consegue olhar para #3DE7C9 e adivinhar o matiz. O CSS foi acrescentando progressivamente notações funcionais que correspondem a como os humanos pensam sobre cor:

• HSL: matiz, saturação, luminosidade. O matiz é um ângulo de 0 a 360°. Introduzido no CSS Color Module Level 3 (2011). Controles deslizantes intuitivos, mas a luminosidade não é perceptualmente uniforme: o amarelo em L=50% parece muito mais brilhante que o azul na mesma luminosidade.
• HWB: matiz, brancura, negrura. Mais fácil para o modelo mental de um pintor («um azul com um pouco de branco e um toque de preto»). Mesma gama que o HSL.
• LCH / Lab: perceptualmente uniforme; mudanças numéricas iguais correspondem a mudanças percebidas iguais. Suporta a ampla gama P3+.
• OKLCH: o mais novo integrante, introduzido por Björn Ottosson em dezembro de 2020. Corrige a distorção de matiz e os problemas de gradiente em cores escuras do CIELAB. Números de luminosidade iguais parecem igualmente brilhantes em todos os matizes. A interpolação linear no OKLCH produz gradientes visualmente suaves, sem os pontos médios cinza-lamacentos que você obtém de linear-gradient(red, green) em sRGB. O Tailwind CSS v4.0 (janeiro de 2025) migrou toda a sua paleta de cores padrão de rgb() para oklch(). O suporte dos navegadores tem sido amplo desde cerca de 2023.

O OKLCH é a direção de longo prazo para a cor no CSS, mas os códigos hexadecimais continuarão sendo a língua franca das ferramentas de design, das especificações de marca e dos trechos copiados e colados: são curtos, seguros para copiar e colar em qualquer meio de texto, e universalmente compreendidos.

A origem do RGB aditivo em 1861

O modelo RGB remonta à teoria tricromática da visão de Young-Helmholtz (início do século XIX), que propôs que o olho humano tem três tipos de receptores de cor correspondentes ao vermelho, ao verde e ao azul. James Clerk Maxwell demonstrou isso experimentalmente em 17 de maio de 1861 na Royal Institution, em Londres. Ele projetou três fotografias em preto e branco de uma fita de tartã (uma feita através de um filtro vermelho, uma verde, uma azul) por meio de três projetores equipados com os mesmos filtros coloridos; a imagem recombinada na tela mostrou a fita aproximadamente em cores plenas. Isso é geralmente creditado como a primeira fotografia colorida. O mesmo princípio do RGB aditivo move todas as telas CRT, LCD, OLED e de plasma já fabricadas: cada pixel é uma tríade de subpixels vermelho, verde e azul de brilho variável independentemente, e a sua retina os mistura em uma cor percebida.

Mais perguntas

O hexadecimal diferencia maiúsculas de minúsculas?

Não. #abcdef e #ABCDEF são idênticos para o analisador. A especificação do CSS é explícita: os valores de cor hexadecimais não diferenciam maiúsculas de minúsculas. Maiúsculas e minúsculas misturadas, como #FfAa00, também são válidas, embora incomuns em código de produção. (Não confundir com os fragmentos de URL, em que a cerquilha inicial é um conceito sintático totalmente diferente.)

Por que tirar a média de dois códigos hexadecimais produz um cinza lamacento?

Porque os valores hexadecimais são codificados em gama (a função de transferência sRGB é aplicada), e tirar a média no espaço de gama não é o mesmo que tirar a média em luz linear. O exemplo clássico é o linear-gradient(red, green) produzindo um ponto médio verde-oliva lamacento: a matemática está correta no espaço codificado em gama, mas visualmente errada. As funções de cor modernas, como o OKLCH, resolvem isso interpolando em um espaço perceptualmente uniforme, e é por isso que produzem gradientes mais suaves.

Por que não existe um código hexadecimal para cores «neon» ou «fluorescentes»?

Porque a notação hexadecimal é implicitamente sRGB, e o sRGB cobre apenas cerca de 36% das cores que o olho humano consegue ver. Muitas cores vívidas (verdes esmeralda saturados, vermelho-alaranjados intensos, tintas fluorescentes) existem na natureza e podem ser exibidas em telas modernas de ampla gama, mas ficam fora do cubo sRGB. Para alcançá-las, você precisa de color(display-p3 …), color(rec2020 …) ou oklch() com altos valores de croma. Essas cores não têm equivalente hexadecimal.

O que era a «paleta segura para a web»?

No final dos anos 1990, quando muitos monitores eram limitados a 256 cores, os designers se restringiam a uma paleta de 216, a interseção das paletas de sistema do Windows e do Mac OS. As 216 vinham de um cubo 6×6×6: cada um de R, G e B assumia apenas os valores 00, 33, 66, 99, CC, FF. Lynda Weinman a popularizou no seu livro de 1996, Designing Web Graphics. Tornou-se obsoleta por volta de 2000, quando a cor de 24 bits chegou ao hardware de consumo. Hoje é pura curiosidade histórica, ocasionalmente ainda visível em códigos hexadecimais antigos como #CC0033 ou #993366.

Algo é enviado a um servidor?

Não. A conversão de hexadecimal para RGB são duas linhas de aritmética em JavaScript de função pura. A conversão roda localmente; nada sobre a cor que você insere é enviado para lugar nenhum; a página funciona offline depois de carregada.

Ferramentas relacionadas