HEX para RGB: como funcionam os códigos de cor (com exemplos)

Toda cor em uma tela é uma mistura de luz vermelha, verde e azul. Designers e desenvolvedores escrevem essa mistura em duas notações comuns: HEX (#3b82f6) e RGB (rgb(59, 130, 246)). As duas descrevem os mesmos três canais - só muda o sistema numérico. Este guia explica o que é um código de cor HEX, o que significa RGB, como converter HEX para RGB à mão (incluindo por que FF equivale a 255), exemplos resolvidos, alpha/RGBA e uma tabela rápida de cores comuns.

Resposta rápida

Uma cor HEX de seis dígitos se divide em três pares (RR, GG, BB). Converta cada par de hexadecimal (base 16) para decimal (0-255) e você tem o RGB. Exemplo: #FFFFFF → rgb(255, 255, 255). O HEX de oito dígitos (#RRGGBBAA) acrescenta um canal alpha para a opacidade. Use um conversor quando precisar de velocidade; aprenda a matemática quando precisar depurar CSS ou tokens de design.

O que é um código de cor HEX?

Os códigos de cor HEX (hexadecimais) usam dígitos em base 16: 0-9 e A-F, em que A = 10, B = 11, C = 12, D = 13, E = 14 e F = 15. Na web eles normalmente começam com # e aparecem em alguns tamanhos:

#RGB - forma abreviada: cada dígito é duplicado (#F0A → #FF00AA)
#RRGGBB - a forma padrão de seis dígitos (dois dígitos por canal)
#RRGGBBAA - oito dígitos: RGB mais alpha (opacidade)

Cada par de dígitos é um canal. Os dois primeiros dígitos são o vermelho, os dois seguintes o verde e os dois últimos o azul. Como dois dígitos hexadecimais representam 16 × 16 = 256 valores, cada canal vai de 00 (0) até FF (255) - o mesmo intervalo que o CSS usa em rgb().

O HEX é popular em ferramentas de design, manuais de marca e CSS porque é compacto e fácil de copiar. Maiúsculas ou minúsculas não fazem diferença: #3b82f6 e #3B82F6 são a mesma cor.

O que é RGB?

RGB é a sigla de red, green e blue (vermelho, verde e azul). No CSS você escreve rgb(r, g, b) ou a forma moderna separada por espaços, rgb(r g b), em que cada canal é um número inteiro de 0 a 255 (ou uma porcentagem). Misturar os canais na intensidade máxima gera branco; todos em zero geram preto; misturas desiguais geram todas as outras cores em uma tela sRGB.

rgb(255, 0, 0) - vermelho puro
rgb(0, 255, 0) - verde puro
rgb(0, 0, 255) - azul puro
rgb(255, 255, 255) - branco
rgb(0, 0, 0) - preto

O RGB costuma ser mais fácil de raciocinar quando você ajusta brilho ou opacidade no código. O HEX costuma ser mais fácil de colar a partir de um guia de estilo. Converter de um para o outro é só mudar a forma de escrever os mesmos três números.

Como converter HEX para RGB à mão

Divida os seis dígitos hexadecimais em três pares e depois converta cada par de base 16 para decimal. A fórmula para um valor hexadecimal de dois dígitos XY é:

Fórmula

valor = (primeiro dígito × 16) + segundo dígito. Lembre que A=10 … F=15. Então FF = (15 × 16) + 15 = 240 + 15 = 255. É por isso que #FF é a intensidade máxima de um canal.

Remova o # inicial, se houver.
Se você tem 3 dígitos (#RGB), expanda cada dígito duplicando-o (#F0A → #FF00AA).
Separe em RR, GG e BB.
Converta cada par com (alto × 16) + baixo.
Escreva rgb(R, G, B).

Exemplo resolvido: #FFFFFF

O branco é a verificação mais fácil. RR = FF, GG = FF, BB = FF. Cada FF vira 255, então #FFFFFF → rgb(255, 255, 255). O preto é o oposto: #000000 → rgb(0, 0, 0).

Exemplo resolvido: #1A2B3C

Vermelho 1A: (1 × 16) + 10 = 16 + 10 = 26
Verde 2B: (2 × 16) + 11 = 32 + 11 = 43
Azul 3C: (3 × 16) + 12 = 48 + 12 = 60
Resultado: #1A2B3C → rgb(26, 43, 60)

No caminho inverso (RGB para HEX), você limita cada canal a 0-255, divide por 16 para obter o nibble alto, usa o resto como nibble baixo e mapeia 10-15 de volta para A-F. Complete dígitos sozinhos com um zero à esquerda para que cada canal tenha dois caracteres (#0A1B2C, não #A1B2C).

Alpha, RGBA e HEX de oito dígitos

A opacidade é um quarto canal, chamado alpha. No CSS, rgba(r, g, b, a) usa a de 0 (totalmente transparente) a 1 (totalmente opaco), ou você pode usar a sintaxe moderna rgb(r g b / a). O HEX de oito dígitos codifica a mesma ideia como #RRGGBBAA, em que AA vai de 00 (transparente) até FF (opaco).

#FF000080 → vermelho com cerca de 50% de opacidade (128/255 ≈ 0,5) → rgba(255, 0, 0, 0.5)
#00000000 → preto totalmente transparente (muito usado como "sem preenchimento")
#3B82F6FF → o mesmo que #3B82F6 com opacidade total explícita

Nem todo navegador antigo ou exportação de design tratava o HEX de oito dígitos da mesma forma, mas o CSS moderno tem suporte. Quando você precisa de overlays translúcidos, sombras ou efeitos de vidro, RGBA (ou HEX com alpha) é a ferramenta certa - o HEX sólido de seis dígitos não consegue expressar transparência.

Tabela de cores HEX e RGB comuns

Vale memorizar essas cores do dia a dia para depurar CSS e casar tokens de marca:

#FFFFFF → rgb(255, 255, 255) - branco
#000000 → rgb(0, 0, 0) - preto
#FF0000 → rgb(255, 0, 0) - vermelho
#00FF00 → rgb(0, 255, 0) - verde-limão
#0000FF → rgb(0, 0, 255) - azul
#FFFF00 → rgb(255, 255, 0) - amarelo
#FFA500 → rgb(255, 165, 0) - laranja
#808080 → rgb(128, 128, 128) - cinza
#1A2B3C → rgb(26, 43, 60) - azul-acinzentado escuro (do exemplo acima)
#3B82F6 → rgb(59, 130, 246) - um azul "céu" comum em muitos kits de UI

Perguntas frequentes

HEX e RGB são a mesma coisa?

Eles codificam as mesmas intensidades de vermelho, verde e azul nas cores típicas da web. O HEX escreve esses valores em hexadecimal; o RGB escreve em decimal. Converter HEX para RGB (ou o contrário) não muda a cor - muda só a notação.

Por que FF equivale a 255?

F é 15 em hexadecimal. Dois dígitos significam (15 × 16) + 15 = 255, que é o valor máximo de um canal de 8 bits. É por isso que #FF0000 é vermelho na intensidade máxima e #FFFFFF é branco.

O que significa uma cor HEX de 3 dígitos?

A forma abreviada #RGB se expande repetindo cada dígito: #0F8 se torna #00FF88. É um jeito compacto de escrever cores em que os dois dígitos de cada canal são iguais (#00, #FF, #88 e assim por diante).

Qual é a diferença entre RGB e RGBA?

O RGBA acrescenta um canal alpha (opacidade). rgb(255, 0, 0) é vermelho sólido; rgba(255, 0, 0, 0.5) é o mesmo vermelho com 50% de opacidade. O HEX de oito dígitos (#RRGGBBAA) é o equivalente do RGBA em HEX.

Devo usar HEX ou RGB no CSS?

Os dois são válidos. Use HEX quando estiver copiando de um design system ou quiser um token curto. Use RGB/RGBA quando precisar de opacidade ou quando montar cores a partir de variáveis e cálculos. Muitos times guardam a cor da marca em HEX e derivam os canais de rgb() para truques modernos de opacidade no CSS (por exemplo, rgb(var(--brand-rgb) / 0.2)).

Como converter HEX para RGB rapidamente?

Para aprender de forma pontual, use o método (dígito × 16) + dígito descrito acima. No dia a dia, cole o código em um conversor de HEX para RGB para copiar rgb()/rgba(), ver uma amostra da cor e evitar erros de conta.

Conversor HEX para RGB gratuito

Cole qualquer cor HEX no Conversor HEX para RGB gratuito para obter rgb()/rgba() na hora - além do caminho inverso RGB → HEX, uma amostra ao vivo e botões de copiar. Ele roda inteiramente no seu navegador; nada é enviado.