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

Para converter hex para RGB, divida o código em três pares de caracteres, um para o vermelho, um para o verde e um para o azul, e transforme cada par da base 16 num número comum entre 0 e 255. Em #7c3aed, os pares são 7c, 3a e ed, que viram 124, 58 e 237, então a cor é rgb(124 58 237). Nada na cor muda. Hex e RGB são duas grafias dos mesmos três números.

Como um código de cor hex é formado

Um código hex tem seis caracteres depois da cerquilha. Os dois primeiros são o canal vermelho, os dois do meio o verde e os dois últimos o azul. Cada canal comporta 256 valores, de 0 (nada daquela luz) a 255 (toda ela). A base 16 escreve qualquer um desses 256 valores em exatamente dois caracteres, e é por isso que o hex virou o jeito compacto de digitar cores na web. Para ver como esses códigos se relacionam entre si, veja códigos de cor hex explicados.

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

Como converter hex para RGB à mão

Cada par é um número de dois dígitos em base 16. O dígito da esquerda conta grupos de dezesseis e o da direita conta unidades. Multiplique o dígito da esquerda por 16, some o da direita e você tem o valor daquele canal.

1. 1

   Tire a cerquilha e divida em pares

   #7c3aed vira 7c, 3a e ed. São vermelho, verde e azul, nessa ordem.

2. 2

   Converta o par do vermelho

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

3. 3

   Converta o par do verde

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

4. 4

   Converta o par do azul

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

5. 5

   Escreva o resultado

   O CSS moderno aceita rgb(124 58 237). A forma antiga com vírgulas, rgb(124, 58, 237), continua funcionando em todo lugar.

Duas verificações rápidas evitam erros. 00 é sempre 0 e ff é sempre 255, então qualquer par que começa com uma letra de a a f vale 160 ou mais, e qualquer par que começa com 0 a 7 fica abaixo de 128. Se o seu resultado para ed saiu pequeno, você leu os dígitos na ordem errada.

Códigos abreviados e transparência

Um código de três dígitos é um atalho: duplique cada dígito para ter o código completo. #f60 significa #ff6600, que é rgb(255 102 0). #fff é branco e #000 é preto. Só cores cujos pares repetem o mesmo dígito podem ser escritas assim, então #7c3aed não tem forma abreviada.

Um código de oito dígitos acrescenta um quarto par para a opacidade. Ele é convertido do mesmo jeito, e depois você divide por 255 para obter uma fração. #7c3aed80 termina em 80, que é 128, e 128 ÷ 255 é cerca de 0,5, então 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 para você. A função abaixo aceita códigos de três, quatro, seis e oito dígitos, com ou sem a cerquilha, 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 para hex

O caminho de volta é a divisão. Divida o canal por 16: o quociente é o primeiro dígito e o resto é o segundo. Para 153, 153 ÷ 16 dá 9 com resto 9, então o par é 99. Para 51 dá 3 com resto 3, ou 33, e 102 dá 6 com resto 6, ou 66. Então rgb(51 102 153) é #336699. Em JavaScript, toString(16) faz isso, com um preenchimento para que 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 que guias de marca e arquivos de design o usam. O RGB é mais fácil de raciocinar quando você precisa mudar um canal ou acrescentar transparência no código. Nenhum dos dois é bom nas perguntas que designers realmente fazem, como “deixa isso um pouco mais claro” ou “acha uma versão mais suave deste azul”. Para isso, cores HSL e OKLCH descrevem as cores por matiz e luminosidade, então pequenos ajustes se comportam de forma previsível.

Mais uma diferença importa para impressão. Hex e RGB descrevem luz numa tela, então a impressora precisa traduzi-los em tinta, e cores muito vivas na tela podem ficar apagadas no papel. RGB vs CMYK explica o que esperar. Na tela, as cores convertidas são idênticas, e quando você precisa que uma cor desapareça aos poucos, as formas com alfa acima são o que você escreve; gradientes transparentes em CSS mostra isso na prática.

Antes de usar qualquer cor convertida em texto, confira com o fundo num verificador de contraste de cores. No Gradiently isso raramente é necessário: a Tinta automática escolhe texto claro ou escuro para cada linha a partir da paleta do próprio Mark, então as palavras se leem.