Conversão de HEX para RGB: Guia completo de códigos de cor

Seja construindo um site, criando um logotipo ou depurando estilos CSS, entender como converter entre os formatos de cor HEX e RGB é uma habilidade essencial para desenvolvedores web e designers. Esses dois sistemas são a base da representação digital de cores, e saber como se relacionam torna seu trabalho mais rápido e preciso.

Neste guia, você vai aprender exatamente o que são HEX e RGB, como converter entre eles manualmente e quando usar cada formato. Você também pode usar nosso Conversor de Cores para alternar entre os formatos instantaneamente.

O que é HEX?

HEX significa hexadecimal — um sistema de numeração de base 16 usado para representar cores no desenvolvimento web. Um código de cor HEX é um código de seis dígitos precedido por um símbolo de cerquilha (#), onde cada par de dígitos representa a intensidade de vermelho, verde e azul.

#RRVVAA

• RR — Componente vermelho (00 a FF em hexadecimal, 0 a 255 em decimal)
• VV — Componente verde (00 a FF em hexadecimal, 0 a 255 em decimal)
• AA — Componente azul (00 a FF em hexadecimal, 0 a 255 em decimal)

Por exemplo, #ff5733 significa vermelho = FF (255), verde = 57 (87), azul = 33 (51).

O HEX suporta uma notação abreviada quando ambos os dígitos de cada par são idênticos: #f00 equivale a #ff0000 (vermelho puro).

O que é RGB?

RGB significa Red, Green, Blue (Vermelho, Verde, Azul) — o modelo de cor aditivo usado por telas e monitores digitais. Cada cor é definida por três valores que vão de 0 a 255:

rgb(R, G, B)

• R — Intensidade do vermelho (0–255)
• G — Intensidade do verde (0–255)
• B — Intensidade do azul (0–255)

Por exemplo, rgb(255, 87, 51) produz o mesmo laranja quente que #ff5733.

O RGB é intuitivo porque corresponde diretamente à forma como as telas produzem cores: combinando luz vermelha, verde e azul em diferentes intensidades.

HEX vs RGB: Comparação

Característica	HEX	RGB
Formato	#RRVVAA	rgb(R, G, B)
Sistema numérico	Base 16 (hexadecimal)	Base 10 (decimal)
Faixa de valores	00–FF por canal	0–255 por canal
Notação abreviada	Sim (#f00 = #ff0000)	Não
Uso no CSS	color: #ff5733;	color: rgb(255, 87, 51);
Suporte alfa	#RRVVAAAA (8 dígitos)	rgba(R, G, B, A)
Legibilidade	Compacto, comum em ferramentas de design	Mais fácil de entender à primeira vista

Ambos os formatos produzem cores idênticas — a diferença está apenas na forma como os valores são escritos.

Como converter HEX para RGB: Passo a passo

Converter um código de cor hexadecimal para RGB envolve três passos simples:

1. Separar o código HEX em três pares de dois dígitos (após remover o #).
2. Converter cada par de hexadecimal para decimal.
3. Combinar os três valores decimais em rgb(R, G, B).

Exemplo: Converter #3498db para RGB

1. Separar: 34, 98, db
2. Converter cada par:
   • 34 → (3 × 16) + 4 = 52
   • 98 → (9 × 16) + 8 = 152
   • db → (13 × 16) + 11 = 219
3. Resultado: rgb(52, 152, 219) — um azul brilhante.

A fórmula de conversão

A fórmula matemática para converter um par hexadecimal de dois dígitos para decimal é:

decimal = (primeiro_dígito × 16) + segundo_dígito

Os dígitos hexadecimais usam 0–9 e A–F, onde:

• A = 10, B = 11, C = 12, D = 13, E = 14, F = 15

Exemplos detalhados

Exemplo 1: #ff0000 (Vermelho)

• FF → (15 × 16) + 15 = 255
• 00 → 0
• 00 → 0
• Resultado: rgb(255, 0, 0)

Exemplo 2: #00ff00 (Verde)

• 00 → 0
• FF → 255
• 00 → 0
• Resultado: rgb(0, 255, 0)

Exemplo 3: #1a2b3c (Verde-azulado escuro)

• 1A → (1 × 16) + 10 = 26
• 2B → (2 × 16) + 11 = 43
• 3C → (3 × 16) + 12 = 60
• Resultado: rgb(26, 43, 60)

Exemplo 4: #abcdef (Azul-acinzentado claro)

• AB → (10 × 16) + 11 = 171
• CD → (12 × 16) + 13 = 205
• EF → (14 × 16) + 15 = 239
• Resultado: rgb(171, 205, 239)

RGB para HEX: A conversão inversa

Para converter RGB de volta para HEX, você inverte o processo:

1. Converter cada valor decimal (0–255) em seu equivalente hexadecimal de dois dígitos.
2. Concatenar os três pares hexadecimais com um prefixo #.

Fórmula

par_hex = decimal_para_hex(valor)

Divida o número decimal por 16. O quociente é o primeiro dígito hexadecimal, e o resto é o segundo.

Exemplo: Converter rgb(52, 152, 219) para HEX

• 52 ÷ 16 = 3 resto 4 → 34
• 152 ÷ 16 = 9 resto 8 → 98
• 219 ÷ 16 = 13 resto 11 → db
• Resultado: #3498db

Valores de cores comuns

Aqui está uma tabela de referência de cores populares em ambos os formatos:

Cor	HEX	RGB
Vermelho	#ff0000	rgb(255, 0, 0)
Verde	#00ff00	rgb(0, 255, 0)
Azul	#0000ff	rgb(0, 0, 255)
Branco	#ffffff	rgb(255, 255, 255)
Preto	#000000	rgb(0, 0, 0)
Amarelo	#ffff00	rgb(255, 255, 0)
Ciano	#00ffff	rgb(0, 255, 255)
Magenta	#ff00ff	rgb(255, 0, 255)
Laranja	#ff8c00	rgb(255, 140, 0)
Roxo	#800080	rgb(128, 0, 128)
Cinza	#808080	rgb(128, 128, 128)
Coral	#ff7f50	rgb(255, 127, 80)

Casos de uso no desenvolvimento web

Estilos CSS

Ambos os formatos funcionam diretamente no CSS:

/* Formato HEX */
.header { background-color: #3498db; }

/* Formato RGB */
.header { background-color: rgb(52, 152, 219); }

/* Com transparência */
.overlay { background-color: rgba(52, 152, 219, 0.5); }
.overlay { background-color: #3498db80; }

Estilos HTML em linha

<div style="color: #e74c3c;">Mensagem de erro</div>
<div style="color: rgb(231, 76, 60);">Mensagem de erro</div>

Cores dinâmicas em JavaScript

// Gerar uma cor aleatória
const randomHex = '#' + Math.floor(Math.random()*16777215).toString(16);

// Converter HEX para RGB em JavaScript
function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return { r, g, b };
}

Ferramentas de design

Ferramentas como Figma, Adobe Photoshop e Canva exibem cores em HEX por padrão, mas permitem alternar para RGB. Ao copiar valores de cor dessas ferramentas, você pode precisar converter entre formatos para seu código.

Para conversões rápidas, o Conversor de Cores processa formatos HEX, RGB e HSL instantaneamente. Se você precisa converter entre outros sistemas numéricos, o Conversor de Base Numérica também é útil.

Experimente nosso conversor de cores gratuito

Precisa converter cores rapidamente? Nosso Conversor de Cores suporta os formatos HEX, RGB e HSL com uma prévia de cor ao vivo. Basta colar seu valor de cor e obter todos os formatos instantaneamente — sem cadastro.

Você também pode explorar nosso Conversor de Unidades para outras conversões do dia a dia.

Conclusão

HEX e RGB são duas faces da mesma moeda — ambos descrevem exatamente as mesmas cores usando sistemas numéricos diferentes. HEX usa base 16 para uma notação compacta, enquanto RGB usa valores decimais familiares. Entender a conversão entre eles ajuda você a trabalhar de forma mais eficiente no CSS, JavaScript e ferramentas de design.

Para se aprofundar em como as cores são modeladas digitalmente, confira nosso guia sobre O que é espaço de cor?.

FAQ

A conversão de HEX para RGB tem perda?

Não. HEX e RGB representam exatamente os mesmos valores em sistemas numéricos diferentes. A conversão entre eles é perfeitamente reversível, sem nenhuma perda de dados.

O HEX pode representar mais cores que o RGB?

Não. Ambos os formatos podem representar exatamente 16.777.216 cores (256 × 256 × 256). Eles cobrem o mesmo espaço de cor — apenas escritos de forma diferente.

Por que desenvolvedores web preferem HEX?

HEX é mais compacto (#f00 vs rgb(255, 0, 0)) e tem sido o formato tradicional em HTML e CSS. Muitos designers também o acham mais fácil de copiar das ferramentas de design.

Como converto um HEX de 3 dígitos para RGB?

Expanda cada dígito duplicando-o: #f00 se torna #ff0000, depois converta normalmente. Então #f00 → rgb(255, 0, 0).

O RGB suporta transparência?

Sim — use rgba(R, G, B, A) onde A é o canal alfa de 0 (totalmente transparente) a 1 (totalmente opaco). O HEX também suporta transparência com códigos de 8 dígitos: #RRVVAAAA.

Qual é o código HEX do branco?

O branco é #ffffff em HEX, que equivale a rgb(255, 255, 255) — todos os canais na intensidade máxima.

Posso usar HEX em propriedades personalizadas do CSS?

Sim. Valores HEX funcionam em variáveis CSS como qualquer outro valor:

:root { --primary: #3498db; }

Qual é a diferença entre HEX e HSL?

HEX e RGB definem cores pela intensidade de cada canal, enquanto HSL (Matiz, Saturação, Luminosidade) define cores por suas propriedades visuais. HSL costuma ser mais intuitivo para ajustar cores — por exemplo, tornar algo mais claro ou mais saturado. Use nosso Conversor de Cores para alternar entre os três formatos.