Converter HEX em RGB
HEX para RGB separa uma cor hex em seus três canais decimais. Cada par de dígitos hex é um canal escrito em base 16, então #FF8800 é rgb(255 136 0). Um hex de quatro ou oito dígitos carrega um quarto par para o alpha, que sai como um valor de 0–1 em rgba(). A conversão é exata nos dois sentidos — nenhuma cor se perde, porque as duas notações descrevem os mesmos três bytes.
Digite uma cor à esquerda. São aceitos valores hexadecimais com ou sem cerquilha, rgb(), hsl(), oklch() e nomes de cores CSS.
Como funciona o Converter HEX em RGB?
Uma cor hex são três bytes escritos em base 16. Cada byte é um canal — vermelho, verde, azul — e guarda um valor de 0 a 255, que são exatamente dois dígitos hex, porque 16² é 256. Essa é toda a conversão: ler dois caracteres e interpretá-los em base 16.
Lendo um dígito hex
Os dígitos vão de 0–9 e depois a–f, em que a é 10 e f é 15. O dígito da esquerda é a quantidade de dezesseis e o da direita é o resto, então 88 é 8×16 + 8 = 136 e ff é 15×16 + 15 = 255. Maiúsculas e minúsculas não importam: #FF8800 e #ff8800 são a mesma cor, e o CSS nunca fez essa distinção.
Hex de três dígitos, e por que não é um arredondamento
#f80 é a forma abreviada de #ff8800 — cada dígito é dobrado, não completado com um zero. Isso importa: dobrar leva f a ff = 255, o máximo verdadeiro, enquanto completar com zero daria f0 = 240 e toda cor abreviada sairia um pouco mais escura. A forma abreviada só consegue expressar as 4.096 cores cujos pares de canal por acaso são dobrados, e é por isso que ela sobrevive em valores rápidos como #fff e desaparece de qualquer coisa projetada.
O quarto par é o alpha
O CSS Color 4 adicionou hex de 4 e 8 dígitos, em que o último par é a opacidade na mesma escala 0–255. #ff880080 é rgb(255 136 0 / 0.5), porque 0x80 é 128, e 128/255 é 0.502. A leve imprecisão é inerente: o alpha em CSS é uma fração e o hex só consegue guardar 256 degraus dela, então um valor escrito como 0.5 em rgba() vai e volta pelo hex como 0.502.
Qual sintaxe escrever
O CSS moderno separa os canais com espaços e o alpha com uma barra — rgb(255 136 0 / 50%) — e o rgb() agora aceita alpha diretamente, então o rgba() é um alias legado mantido por compatibilidade. A forma com vírgulas ainda funciona em todos os navegadores e vai continuar funcionando; não há descontinuação nem motivo para reescrever uma folha de estilo por causa disso. As duas formas são geradas aqui, para você colar a que seu código já usa.
Uma cor hex
#ff8800
Seus canais RGB
rgb(255 136 0) ff → 255 (15 × 16 + 15) 88 → 136 (8 × 16 + 8) 00 → 0 (0 × 16 + 0)
Quais opções e casos-limite o Converter HEX em RGB suporta?
| Parâmetro | Tipo | Padrão | Comportamento e casos-limite |
|---|---|---|---|
| #rgb | 3 dígitos | abreviado | Cada dígito é duplicado: #f80 é #ff8800. Apenas 4.096 cores podem ser escritas desta forma. |
| #rgba | 4 dígitos | abreviado | A mesma duplicação, com um quarto dígito para o alfa. #f808 é #ff880088. |
| #rrggbb | 6 dígitos | padrão | Um byte por canal, 0–255 cada. 16,7 milhões de cores. |
| #rrggbbaa | 8 dígitos | CSS Color 4 | Alfa como um quarto byte. Suportado em todos os lugares atuais; volta para opaco em navegadores muito antigos em vez de ser ignorado. |
| Maiúsculas e minúsculas | — | ignorado | #FF8800 e #ff8800 são idênticos. O caso minúsculo é a convenção comum. |
| rgb(r g b) | moderno | espaços | A sintaxe atual. O alfa vai após uma barra: rgb(255 136 0 / 50%). |
| rgba(r,g,b,a) | legado | vírgulas | Ainda válido em todos os lugares e não obsoleto. rgb() e rgba() são agora a mesma função. |
| Percentuais | 0–100% | permitido | rgb(100% 53.3% 0%) é a mesma cor. Percentuais são resolvidos em relação a 255, não a 100. |
Perguntas frequentes
Como converto hex para RGB manualmente?
Separe os seis dígitos em três pares e leia cada par em base 16: o dígito da esquerda é quantos dezesseis, o da direita é o resto. Então 88 é 8×16 + 8 = 136. As letras continuam a contagem — a é 10, b é 11, até o f, que é 15 — então ff é 15×16 + 15 = 255. Três pares, três números, e essa é toda a conversão.
#f80 é o mesmo que #ff8800?
Sim. O hex de três dígitos dobra cada dígito em vez de completá-lo com um zero, então #f80 se expande para #ff8800. É a dobra que faz #fff significar branco puro; se fosse completado com zero, #fff seria #f0f0f0 e toda abreviação sairia um pouco mais escura.
Como funciona o alpha em um hex de 8 dígitos?
Os dois últimos dígitos são a opacidade na mesma escala 0–255 dos canais de cor, então #ff880080 é 0x80 = 128, o que dá 128/255 = 0.502 de alpha. Como o hex só tem 256 degraus, um alpha escrito como 0.5 em rgba() volta como 0.502 pelo hex. Essa diferença é invisível na tela e aparece se você comparar strings.
Devo usar rgb() ou rgba()?
rgb() — ele aceita alpha agora, então rgba() é um alias legado da mesma função. Nenhum dos dois foi descontinuado e ambos funcionam em todo lugar, então não há motivo para reescrever código existente. Para código novo, rgb(255 136 0 / 50%) é a sintaxe atual.
Por que minha ferramenta de design mostra números RGB diferentes para o mesmo hex?
Quase sempre é um perfil de cor. Hex é um valor em um espaço de cores, e se o documento está marcado como Display P3 ou Adobe RGB em vez de sRGB, os mesmos três bytes descrevem uma cor diferente, e a ferramenta pode mostrar o equivalente sRGB em vez dos números crus. Esta página trata hex como sRGB, que é o que um navegador faz com ele em CSS.
Como uso um valor RGB em uma propriedade personalizada do CSS?
Guarde os três canais sem o wrapper rgb() — --brand: 240 84 30; — e depois escreva color: rgb(var(--brand)) para a cor sólida e background: rgb(var(--brand) / 0.12) para um tom translúcido dela. Uma variável então serve para a cor e todas as suas transparências, e é por isso que sistemas de design guardam canais em vez de strings de cor prontas.