Conversor RGB para HEX

Como converter RGB em HEX

Converter RGB em HEX (o "rgb to hex" das buscas) é passar cada canal de decimal para hexadecimal e juntar os três pares depois de um #. Na mão, divida o canal por 16: o quociente é o primeiro dígito e o resto é o segundo.

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

Quociente ou resto de 10 a 15 vira letra: 10 é A, 11 é B, 12 é C, 13 é D, 14 é E e 15 é F. Segundo exemplo, com um canal zerado:

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

Canal zero continua ocupando dois dígitos (00). O HEX com transparência, de 8 dígitos, tem uma seção própria mais abaixo. E quando os dois dígitos de cada par são iguais, dá para encurtar: rgb(255 0 0) vira #F00. A ferramenta mostra o HEX curto sempre que ele existe.

O zero à esquerda

O bug clássico de quem monta HEX à mão é o toString(16). Ele não completa com zero: o canal 15 vira f, e não 0f. Com um canal assim, o código perde um dígito e vira outra cor, sem dar erro:

(15).toString(16);                  // "f"
(15).toString(16).padStart(2, "0");  // "0f"

"#" + [15, 0, 0].map((c) => c.toString(16)).join("");
// "#f00"  (and not "#0f0000")

Repare que #f00 é um HEX curto válido, igual a #ff0000. O navegador aceita, só que a cor é outra. A correção é o padStart(2, '0'), que completa com zero à esquerda até ter dois dígitos.

Transparência em HEX

Para a transparência, multiplique o alfa (de 0 a 1) por 255, arredonde e converta o resultado para hexadecimal. O par vai no fim do código e forma o HEX de 8 dígitos. No campo, o alfa pode ser 0.5, .5 ou 50%: os três dão o mesmo resultado.

alpha = 0.5
0.5 × 255 = 127.5  →  128
128 = 8 × 16 + 0   →  80
rgb(82 113 255 / 50%)  →  #5271FF80

Por que 50% dá 80 e não 7F? Porque 0,5 × 255 é 127,5, e o arredondamento sobe para 128 (80). Quem trunca em vez de arredondar chega a 127 (7F). A diferença é de 1 em 255, invisível na tela, mas aparece se você comparar byte a byte o resultado de duas ferramentas.

No caminho de volta, o HEX de 8 dígitos vira alfa dividindo o último par por 255 (80 dá 0,5). O Conversor de HEX para RGB faz essa conta e mostra o rgba() pronto.

Tabela de opacidade em HEX

Os pares para colocar no fim do código, de 100% a 0%, de 5 em 5. A terceira coluna mostra o resultado em cima de #5271FF.

Para usar, acrescente o par ao HEX de seis dígitos: 40% de opacidade sobre #5271FF fica #5271FF66. Isso vale em background, color, border-color, box-shadow e até nas paradas de um linear-gradient.

Converter RGB em HEX em código

Em JavaScript, junte toString(16) com padStart(2, '0') para não perder o zero à esquerda:

const toHex = (value) =>
  Math.round(value).toString(16).padStart(2, "0");

function rgbToHex(r, g, b, a) {
  const alpha = a === undefined ? "" : toHex(a * 255);

  return `#${toHex(r)}${toHex(g)}${toHex(b)}${alpha}`.toUpperCase();
}

rgbToHex(82, 113, 255);       // "#5271FF"
rgbToHex(82, 113, 255, 0.5);  // "#5271FF80"
rgbToHex(15, 0, 0);           // "#0F0000"

Em Python, o f-string com :02X já completa com zero e deixa em maiúsculas. O hex(255) devolve '0xff', com prefixo e sem zero à esquerda, então o f-string costuma ser mais prático:

def rgb_to_hex(r: int, g: int, b: int) -> str:
    if not all(0 <= channel <= 255 for channel in (r, g, b)):
        raise ValueError("channel out of range 0-255")

    return f"#{r:02X}{g:02X}{b:02X}"

rgb_to_hex(82, 113, 255)  # '#5271FF'
rgb_to_hex(15, 0, 0)      # '#0F0000'

A armadilha é não validar a faixa de 0 a 255. Sem essa checagem, o canal 300 vira 12c, que tem três dígitos, e o código inteiro sai desalinhado:

(300).toString(16);   // "12c"
(-1).toString(16);    // "-1"

Se o valor vem de um campo de texto, converta com Number() e confira com Number.isInteger. A string "82" funciona, mas "8 2" vira NaN.

O que o CSS aceita em rgb()

A ferramenta lê os mesmos formatos que o rgb() do CSS, então dá para colar direto do seu stylesheet:

• Porcentagem: rgb(100% 0% 0%) é o mesmo que rgb(255 0 0).
• Decimais: rgb(82.4 113 255) é válido no CSS. Aqui o canal é arredondado para o inteiro mais próximo.
• Valor fora de 0-255: o CSS não dá erro e limita ao máximo ou ao mínimo, então rgb(300 0 0) vira rgb(255 0 0). A ferramenta, por outro lado, avisa, porque quase sempre é erro de digitação.
• Separadores: 82,113,255 e 82 113 255 funcionam, e um quarto número solto é lido como transparência de 0 a 1.

A sintaxe com espaço e barra para a transparência, e a diferença para o rgba() com vírgulas, estão explicadas no Conversor de HEX para RGB.

Mais ferramentas de cor

Para o caminho inverso, use o Conversor de HEX para RGB. Se você precisa de uma imagem de teste com cor de fundo e de texto em HEX, o Gerador de imagem placeholder aceita os códigos que você acabou de converter.