Hex para RGB: converter códigos de cor à mão ou em código

Para converter hex em RGB, divide o código em três pares de carateres, um para vermelho, um para verde e um para azul, e transforma cada par de base 16 num número normal entre 0 e 255. Para #7c3aed, os pares são 7c, 3a e ed, que passam a 124, 58 e 237, e por isso a cor é rgb(124 58 237). Nada na cor muda. Hex e RGB são duas grafias dos mesmos três números.

Como se constrói um código de cor hex

Um código hex tem seis carateres depois do cardinal. Os dois primeiros são o canal vermelho, os dois do meio são o verde e os dois últimos são o azul. Cada canal pode ter 256 valores, de 0 (nada dessa luz) a 255 (toda ela). A base 16 consegue escrever qualquer um desses 256 valores em exatamente dois carateres, e é por isso que o hex se tornou a forma compacta de escrever cores na web. Para o quadro mais amplo de como estes códigos se relacionam, vê códigos de cor hex explicados.

A base 16 conta de 0 a 9 e depois continua com letras. É a única coisa que precisas de decorar:

Como converter hex em RGB à mão

Cada par é um número de dois dígitos em base 16. O dígito da esquerda conta dezasseis e o da direita conta unidades. Multiplica o dígito da esquerda por 16, soma o da direita e tens o valor desse canal.

1. 1

   Tira o cardinal e divide em pares

   #7c3aed passa a 7c, 3a e ed. São o vermelho, o verde e o azul, por essa ordem.

2. 2

   Converte o par vermelho

   7c: 7 × 16 = 112, e c é 12, por isso o vermelho é 112 + 12 = 124.

3. 3

   Converte o par verde

   3a: 3 × 16 = 48, e a é 10, por isso o verde é 48 + 10 = 58.

4. 4

   Converte o par azul

   ed: e é 14, 14 × 16 = 224, e d é 13, por isso o azul é 224 + 13 = 237.

5. 5

   Escreve o resultado

   O CSS moderno aceita rgb(124 58 237). A forma antiga com vírgulas rgb(124, 58, 237) continua a funcionar em todo o lado.

Duas verificações rápidas mantêm-te honesto. 00 é sempre 0 e ff é sempre 255, por isso qualquer par que comece por uma letra de a a f vale 160 ou mais, e qualquer par que comece por 0 a 7 fica abaixo de 128. Se a tua resposta para ed sair pequena, leste os dígitos ao contrário.

Códigos abreviados e alfa

Um código de três dígitos é um atalho: duplica cada dígito para obter o código completo. #f60 significa #ff6600, que é rgb(255 102 0). #fff é branco e #000 é preto. Só as cores cujos pares repetem um dígito se podem escrever assim, por isso #7c3aed não tem forma curta.

Um código de oito dígitos junta um quarto par para a opacidade. Converte-se da mesma forma, e depois divide-se por 255 para obter uma fração. #7c3aed80 termina em 80, que é 128, e 128 ÷ 255 dá cerca de 0,5, por isso equivale a rgb(124 58 237 / 50%). Um código de quatro dígitos como #f608 é a versão abreviada da mesma ideia.

.card {
  /* the same violet written four ways */
  color: #7c3aed;
  color: rgb(124 58 237);
  color: rgb(124, 58, 237);

  /* half transparent */
  background: #7c3aed80;
  background: rgb(124 58 237 / 50%);
}

Hex para RGB em JavaScript

Em código, parseInt com base 16 faz a conversão por ti. A função abaixo aceita códigos de três, quatro, seis e oito dígitos, com ou sem cardinal, e devolve os canais mais um alfa entre 0 e 1.

function hexToRgb(hex) {
  let h = hex.replace(/^#/, '');
  if (h.length === 3 || h.length === 4) {
    h = h.split('').map((c) => c + c).join('');
  }
  if (!/^[0-9a-f]{6}([0-9a-f]{2})?$/i.test(h)) {
    throw new Error('Not a hex colour: ' + hex);
  }
  const n = (i) => parseInt(h.slice(i, i + 2), 16);
  return {
    r: n(0),
    g: n(2),
    b: n(4),
    a: h.length === 8 ? Math.round((n(6) / 255) * 100) / 100 : 1,
  };
}

hexToRgb('#7c3aed');   // { r: 124, g: 58, b: 237, a: 1 }
hexToRgb('f60');       // { r: 255, g: 102, b: 0, a: 1 }
hexToRgb('#7c3aed80'); // { r: 124, g: 58, b: 237, a: 0.5 }

Como converter RGB em hex

Voltar atrás é dividir. Divide o canal por 16: o número inteiro é o primeiro dígito e o resto é o segundo. Para 153, 153 ÷ 16 dá 9 e resto 9, por isso o par é 99. Para 51 dá 3 e resto 3, ou seja 33, e 102 dá 6 e resto 6, ou 66. Assim rgb(51 102 153) é #336699. Em JavaScript, toString(16) faz isso, com um preenchimento para que os dígitos únicos mantenham o zero à esquerda:

const rgbToHex = (r, g, b) =>
  '#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');

rgbToHex(51, 102, 153); // '#336699'
rgbToHex(13, 148, 136); // '#0d9488'

Quando usar hex, RGB ou outra coisa

O hex é compacto e fácil de colar entre ferramentas, e por isso os guias de marca e os ficheiros de design o usam. O RGB é mais fácil de raciocinar quando precisas de mudar um canal ou juntar transparência em código. Nenhum é bom nas perguntas que os designers realmente fazem, como “faz isto um pouco mais claro” ou “encontra uma versão mais suave deste azul”. Para essas, cor HSL e OKLCH descrevem as cores por matiz e luminosidade, para que pequenas edições se comportem de forma previsível.

Mais uma distinção importa para a impressão. Hex e RGB descrevem luz num ecrã, por isso uma impressora tem de os traduzir em tinta, e as cores de ecrã muito vivas podem ficar baças no papel. RGB vs CMYK explica o que esperar. No ecrã, as cores convertidas são idênticas e, quando precisas de uma cor que se desvaneça, as formas com alfa acima são o que escreves; gradientes transparentes em CSS mostra-as em ação.

Antes de usares qualquer cor convertida em texto, confirma-a contra o fundo com um verificador de contraste de cor. No Gradiently raramente precisas: a tinta automática escolhe tipo claro ou escuro para cada linha a partir da paleta do próprio Mark, para que as palavras se leiam.