Um código HEX junta três números de 8 bits em seis dígitos hexadecimais. Converter HEX para RGB significa dividir esses dígitos em pares e ler cada par como um número decimal entre 0 e 255 — exatamente os valores que CSS, Figma e editores de imagem esperam.
Como funciona a conversão de HEX para RGB
- Remove o # inicial e, se o código tiver apenas três dígitos, duplica cada um: #f53 torna-se #ff5533.
- Divide os seis dígitos em três pares — RR, GG e BB.
- Lê cada par como um número em base 16 e converte para base 10: FF vira 255, 57 vira 87, 33 vira 51.
- Escreve os três resultados como rgb(R, G, B).
Exemplo prático
Esta conversão é exata. HEX e RGB descrevem os mesmos valores sRGB em notações diferentes, por isso nada é arredondado ou perdido em nenhuma das direções.
HEX e RGB explicados
O que é HEX?
Um código HEX é um número hexadecimal de seis dígitos que armazena os canais vermelho, verde e azul de uma cor atrás de um # inicial. Cada par de dígitos representa um canal, de 00 (nenhum) a FF (cheio), o que dá os mesmos 16,7 milhões de cores do RGB numa notação muito mais curta. HEX é o padrão em CSS, ferramentas de design e guidelines de marca.
- Sintaxe:
- #RRGGBB
- Intervalo:
- 00–FF por canal
- Melhor para:
- CSS, entrega de design, guidelines de marca
O que é RGB?
RGB descreve uma cor como três canais de luz — vermelho, verde e azul — cada um de 0 a 255. Espelha como os ecrãs realmente funcionam: todos os três a 255 produzem branco, todos a 0 produzem preto. RGB é a escolha certa sempre que precisas de calcular com uma cor, e rgba() adiciona transparência por cima.
- Sintaxe:
- rgb(R, G, B)
- Intervalo:
- 0–255 por canal
- Melhor para:
- código, canvas, transparência com rgba()
Tabela de referência HEX para RGB
As cores CSS mais comuns, convertidas de HEX para RGB.
| Cor | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
| red | #FF0000 | rgb(255, 0, 0) |
| lime | #00FF00 | rgb(0, 255, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| orange | #FFA500 | rgb(255, 165, 0) |
| teal | #008080 | rgb(0, 128, 128) |
| purple | #800080 | rgb(128, 0, 128) |
| gray | #808080 | rgb(128, 128, 128) |