Conversor HEX para RGB

Como converter HEX em RGB

Converter HEX em RGB (o "hex to rgb" das buscas) é separar o código em pares e passar cada par de hexadecimal para decimal. O primeiro par é o vermelho, o segundo é o verde e o terceiro é o azul. Cada par vai de 00 a FF, que é de 0 a 255.

#5271FF  →  52  71  FF
52 = 5 × 16 + 2   = 82
71 = 7 × 16 + 1   = 113
FF = 15 × 16 + 15 = 255
rgb(82 113 255)

A conta de cada par é dígito da esquerda × 16 + dígito da direita. Os dígitos A a F valem de 10 a 15 (A é 10, B é 11, C é 12, D é 13, E é 14 e F é 15), e a Tabela ASCII mostra cada caractere com o código em decimal e em hexadecimal. Segundo exemplo, com um par zerado:

#FF8000  →  FF  80  00
FF = 255
80 = 8 × 16 + 0 = 128
00 = 0
rgb(255 128 0)

Como FF é o maior par possível, o maior canal é 255. E 00 sempre dá 0. Dá para estimar de cabeça: o primeiro dígito de cada par já dá o grosso do valor. Em 5271FF o vermelho é baixo (5), o verde é médio (7) e o azul está no máximo (F), então a cor é um azul forte.

HEX de 3 e 4 dígitos

O HEX curto repete cada dígito: #f00 é o mesmo que #ff0000 e #abc vira #aabbcc. Só dá para abreviar quando os dois dígitos de cada par são iguais, então #5271FF não tem versão curta.

#f00   →  #ff0000  →  rgb(255 0 0)
#abc   →  #aabbcc
#f008  →  #ff000088

Com 4 dígitos vale a mesma regra, e o último dígito é a transparência: #f008 é #ff000088. O formato é válido no CSS, mas código mais antigo pode não reconhecer. Confira antes de usar fora de um stylesheet.

HEX de 8 dígitos e transparência

No HEX de 8 dígitos, o último par é o canal alfa, que controla a opacidade: 00 é totalmente transparente e FF é totalmente opaco. Para usar no rgba(), converta o par para decimal e divida por 255.

#5271FF80  →  52  71  FF  80
80 = 8 × 16 + 0 = 128
128 ÷ 255 = 0.50196…  →  0.5
rgba(82, 113, 255, 0.5)
rgb(82 113 255 / 50%)

Por isso 80 vira 0,5 só de forma aproximada: 128 ÷ 255 dá 0,50196. A ferramenta arredonda em 2 casas e mostra 0.5, que é o que você escreveria no CSS.

rgb() e rgba() no CSS atual

A sintaxe atual do rgb() separa os canais por espaço e põe a transparência depois de uma barra: rgb(82 113 255 / 50%). A antiga usa vírgulas e o nome rgba(): rgba(82, 113, 255, 0.5). Hoje as duas funcionam com ou sem alfa. A ferramenta mostra as duas para você copiar a que o seu projeto usa.

color: rgb(82 113 255);
color: rgb(82 113 255 / 50%);
color: rgba(82, 113, 255, 0.5);

Os números de suporte vêm do MDN (dados do browser-compat-data, conferidos em 5 de novembro de 2026): a sintaxe com espaços funciona desde o Chrome 65, o Firefox 52 e o Safari 12.1, e o HEX de 4 e 8 dígitos desde o Chrome 62, o Firefox 49 e o Safari 10. As regras de sintaxe estão na especificação CSS Color 4, do W3C, e a documentação de uso fica em rgb() no MDN e hex-color no MDN.

Na prática, o HEX é mais curto para cor sólida e é o que os design tools exportam. O RGB com alfa deixa a transparência legível (50% no lugar de 80) e é mais fácil de calcular em JavaScript. A cor na tela é a mesma nos dois.

Converter HEX em RGB em código

Em JavaScript, parseInt(par, 16) converte cada par. A função abaixo aceita 3, 4, 6 e 8 dígitos, com ou sem #:

function hexToRgb(hex) {
  let digits = hex.trim().replace(/^#/, "");

  if (digits.length <= 4) {
    digits = [...digits].map((digit) => digit + digit).join("");
  }

  if (![6, 8].includes(digits.length) || /[^0-9a-f]/i.test(digits)) {
    return null;
  }

  const [r, g, b, a = 255] = digits
    .match(/../g)
    .map((pair) => parseInt(pair, 16));

  return { r, g, b, a: Math.round((a / 255) * 100) / 100 };
}

hexToRgb("#5271FF");   // { r: 82, g: 113, b: 255, a: 1 }
hexToRgb("#f008");     // { r: 255, g: 0, b: 0, a: 0.53 }

Em Python, int(par, 16) converte um par, e bytes.fromhex converte o código inteiro de uma vez:

def hex_to_rgb(value: str) -> tuple[int, ...]:
    digits = value.lstrip("#")

    if len(digits) in (3, 4):
        digits = "".join(digit * 2 for digit in digits)

    return tuple(bytes.fromhex(digits))

hex_to_rgb("#5271FF")   # (82, 113, 255)
hex_to_rgb("#5271FF80") # (82, 113, 255, 128)
int("52", 16)           # 82

Valide antes de converter. Sem checagem, parseInt('zz', 16) devolve NaN e o erro só aparece lá na frente, quando a cor vira rgb(NaN NaN NaN) no CSS.

Erros comuns ao colar HEX

Quando a conversão falha, quase sempre é um destes motivos:

• Dígitos a mais ou a menos. HEX de 5 ou 7 dígitos não existe, só valem 3, 4, 6 e 8. Costuma ser um dígito que sobrou ou sumiu no copiar e colar.
• Letra fora de A-F. #G00 não é HEX, e a letra O no lugar do zero (#FF0O00) é um caso clássico.
• Cor que muda de tom depois de convertida. O número está certo, mas o design tool trabalha com outro perfil de cor (como Display P3) e o navegador mostra em sRGB. A conversão em si não perde nada.

Cores básicas em HEX e RGB

As 16 cores básicas do CSS, com o HEX e o RGB de cada uma. Clique numa linha para carregar a cor na ferramenta.