Como converter RGB para HEX (e HEX para RGB)

A conversão é direta quando se entende que os dois formatos dizem a mesma coisa: quanto de vermelho, verde e azul, em uma escala de 0 a 255.

A conversão na mão

Cada par de dígitos hexadecimais representa um canal, de 00 (nada) a FF (255, o máximo). Converter é passar cada número decimal para base 16 e juntar.

rgb(124, 58, 237) vira #7C3AED porque 124 em hexadecimal é 7C, 58 é 3A e 237 é ED.

Em JavaScript

javascript

const paraHex = (r, g, b) =>
  "#" + [r, g, b].map((n) => n.toString(16).padStart(2, "0")).join("").toUpperCase();

paraHex(124, 58, 237);  // "#7C3AED"

function hexParaRgb(hex) {
  const limpo = hex.replace("#", "");
  // Formato curto: #7CE equivale a #77CCEE
  const completo = limpo.length === 3
    ? limpo.split("").map((c) => c + c).join("")
    : limpo;
  return {
    r: parseInt(completo.slice(0, 2), 16),
    g: parseInt(completo.slice(2, 4), 16),
    b: parseInt(completo.slice(4, 6), 16),
  };
}

Em Python

python

def para_hex(r, g, b):
    return "#{:02X}{:02X}{:02X}".format(r, g, b)

def hex_para_rgb(valor):
    limpo = valor.lstrip("#")
    if len(limpo) == 3:
        limpo = "".join(c * 2 for c in limpo)
    return tuple(int(limpo[i:i + 2], 16) for i in (0, 2, 4))

para_hex(124, 58, 237)      # '#7C3AED'
hex_para_rgb("#7C3AED")     # (124, 58, 237)

Transparência

O HEX de 8 dígitos acrescenta o canal alfa nos dois últimos: 00 é totalmente transparente e FF é opaco. Em CSS, o equivalente é rgba, em que o alfa vai de 0 a 1.

css

/* as três linhas produzem a mesma cor com 50% de opacidade */
color: #7C3AED80;
color: rgba(124, 58, 237, 0.5);
color: rgb(124 58 237 / 50%);

Formatos além do RGB

HSL: matiz, saturação e luminosidade — mais intuitivo para gerar variações
HWB: matiz com proporções de branco e preto
OKLCH: perceptualmente uniforme, o melhor para clarear e escurecer sem mudar a percepção de cor
Todos existem em CSS moderno; HEX e RGB continuam sendo os mais compatíveis

Perguntas frequentes

O que significa #FFF com três dígitos?: É a forma curta: cada dígito é duplicado. #FFF equivale a #FFFFFF, e #7CE a #77CCEE. Só funciona quando os dois dígitos de cada canal são iguais.
Por que usar OKLCH em vez de HSL?: Porque em HSL duas cores com a mesma luminosidade podem parecer bem diferentes aos olhos. OKLCH é perceptualmente uniforme, então gerar variações de tom produz resultado consistente entre matizes.

Resolva na prática

Guias relacionados

Como converter timestamp Unix para data (e o erro de fuso)

Em JavaScript

javascript

const paraHex = (r, g, b) =>
  "#" + [r, g, b].map((n) => n.toString(16).padStart(2, "0")).join("").toUpperCase();

paraHex(124, 58, 237);  // "#7C3AED"

function hexParaRgb(hex) {
  const limpo = hex.replace("#", "");
  // Formato curto: #7CE equivale a #77CCEE
  const completo = limpo.length === 3
    ? limpo.split("").map((c) => c + c).join("")
    : limpo;
  return {
    r: parseInt(completo.slice(0, 2), 16),
    g: parseInt(completo.slice(2, 4), 16),
    b: parseInt(completo.slice(4, 6), 16),
  };
}

Em Python

python

def para_hex(r, g, b):
    return "#{:02X}{:02X}{:02X}".format(r, g, b)

def hex_para_rgb(valor):
    limpo = valor.lstrip("#")
    if len(limpo) == 3:
        limpo = "".join(c * 2 for c in limpo)
    return tuple(int(limpo[i:i + 2], 16) for i in (0, 2, 4))

para_hex(124, 58, 237)      # '#7C3AED'
hex_para_rgb("#7C3AED")     # (124, 58, 237)

Transparência

O HEX de 8 dígitos acrescenta o canal alfa nos dois últimos: 00 é totalmente transparente e FF é opaco. Em CSS, o equivalente é rgba, em que o alfa vai de 0 a 1.

css

/* as três linhas produzem a mesma cor com 50% de opacidade */
color: #7C3AED80;
color: rgba(124, 58, 237, 0.5);
color: rgb(124 58 237 / 50%);

Perguntas frequentes

O que significa #FFF com três dígitos?

É a forma curta: cada dígito é duplicado. #FFF equivale a #FFFFFF, e #7CE a #77CCEE. Só funciona quando os dois dígitos de cada canal são iguais.

Por que usar OKLCH em vez de HSL?

Porque em HSL duas cores com a mesma luminosidade podem parecer bem diferentes aos olhos. OKLCH é perceptualmente uniforme, então gerar variações de tom produz resultado consistente entre matizes.