HEX para RGB: O Guia Completo de Conversão

Cada cor que você vê numa tela é fundamentalmente três números: vermelho, verde e azul. A questão é apenas como esses números são escritos. A notação HEX os compacta numa string de seis caracteres familiar a designers e desenvolvedores. A notação RGB os descompacta em três valores explícitos usados em funções CSS, tokens de design e pipelines de dados.

Este guia cobre o quadro completo — a matemática por trás da codificação hexadecimal, o modelo RGB, uma conversão manual passo a passo e as regras práticas para escolher entre HEX e RGB em fluxos de trabalho reais de CSS e design.

Como funciona a codificação hexadecimal

O hexadecimal é um sistema de numeração na base 16 usando dígitos 0–9 e letras A–F, onde A=10, B=11, C=12, D=13, E=14, F=15. Um par de dois caracteres hex pode representar valores de 00 (0 em decimal) a FF (255 em decimal). Esse é exatamente o intervalo necessário para um único canal de cor. Um código HEX de seis caracteres como #3A7BD5 é três pares: 3A (vermelho), 7B (verde), D5 (azul). O prefixo # é uma convenção CSS. Códigos abreviados como #FFF se expandem para #FFFFFF — cada dígito é duplicado.

O modelo de cor RGB

RGB significa Vermelho, Verde, Azul — os três canais primários da mistura de cores aditiva usada por cada display digital. Cada canal vai de 0 (nenhum) a 255 (máximo). rgb(0, 0, 0) é preto puro; rgb(255, 255, 255) é branco puro. O modelo é aditivo: misturar vermelho e verde máximos produz amarelo (rgb(255, 255, 0)). Isso é oposto à mistura subtrativa usada em pintura ou impressão. CSS também aceita a sintaxe moderna sem vírgulas: color: rgb(58 123 213).

Conversão manual passo a passo

Para converter #3A7BD5 em RGB: divida nos pares 3A, 7B, D5. Converta cada par de hex para decimal. Para 3A: 3 × 16 + 10 = 58. Para 7B: 7 × 16 + 11 = 123. Para D5: 13 × 16 + 5 = 213. Resultado: rgb(58, 123, 213). Para a operação inversa, divida cada valor decimal por 16, tome o quociente como primeiro dígito hex e o resto como segundo.

#3A7BD5

R = 3A → 3×16 + 10 = 58
G = 7B → 7×16 + 11 = 123
B = D5 → 13×16 + 5 = 213

Resultado: rgb(58, 123, 213)

HEX vs RGB em CSS: quando usar cada um

HEX é compacto e universalmente suportado. Use-o para valores de cor estáticos em CSS, sistemas de design e onde a brevidade importa. RGB é preferível quando você precisa manipular a cor em JavaScript ou com calc() em CSS. As propriedades personalizadas do CSS funcionam igualmente bem com ambos: --brand: #3A7BD5 ou --brand: rgb(58 123 213).

Canal alfa: HEX8 vs rgba()

A transparência é adicionada de forma diferente em cada formato. Em HEX, adicione mais dois dígitos hex para o alfa: #3A7BD5FF é totalmente opaco, #3A7BD580 é 50% transparente. Em CSS, rgba() foi a abordagem tradicional: rgba(58, 123, 213, 0.5). O CSS moderno também permite que rgb() aceite um alfa opcional: rgb(58 123 213 / 0.5). HEX8 é suportado em todos os navegadores modernos, mas pode ser menos legível.

Casos de uso práticos

Os tokens de design geralmente armazenam cores em HEX para portabilidade entre ferramentas (Figma, Storybook, Style Dictionary). As variáveis CSS podem conter qualquer formato. Ao passar cores para a Canvas API ou shaders WebGL, são necessários valores RGB — a string HEX deve ser analisada primeiro com parseInt("3A", 16). Para animações CSS com color-mix() ou transições @property, o formato rgb() ou hsl() oferece aos navegadores maior flexibilidade de interpolação.

Perguntas Frequentes