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

[Canonical HTML page](https://gradiently.design/pt-pt/guide/hex-to-rgb)

Um código hex são apenas três números escritos em base 16. Quando vês os pares, converter à mão leva segundos, e a versão em código tem quatro linhas.

## The short version

- Para converter hex em RGB, divide o código de seis dígitos em três pares e converte cada par de base 16 para um número entre 0 e 255.
- Cada par calcula-se como o primeiro dígito vezes 16, mais o segundo dígito, onde as letras de a a f valem de 10 a 15.
- O código hex #7c3aed é rgb(124 58 237): 7c é 124, 3a é 58 e ed é 237.
- Um código hex de três dígitos é uma abreviatura em que cada dígito se duplica, por isso #f60 é a mesma cor que #ff6600.
- Hex e RGB descrevem exatamente as mesmas cores sRGB, por isso converter entre eles nunca muda o aspeto de uma cor.

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](https://gradiently.design/pt-pt/guide/color-codes-explained).

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

| Dígito hex | Valor | Dígito hex | Valor |
| --- | --- | --- | --- |
| 0 a 9 | 0 a 9 | c | 12 |
| a | 10 | d | 13 |
| b | 11 | e | 14 |
| f | 15 | ff (um par) | 255 |

As letras não distinguem maiúsculas de minúsculas: #7C3AED e #7c3aed são a mesma cor.

## 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. **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. **Converte o par vermelho** `7c`: 7 × 16 = 112, e c é 12, por isso o vermelho é 112 + 12 = **124**.
3. **Converte o par verde** `3a`: 3 × 16 = 48, e a é 10, por isso o verde é 48 + 10 = **58**.
4. **Converte o par azul** `ed`: e é 14, 14 × 16 = 224, e d é 13, por isso o azul é 224 + 13 = **237**.
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.

- #7c3aed = 124 58 237: #7c3aed
- #336699 = 51 102 153: #336699
- #ff6600 = 255 102 0: #ff6600
- #0d9488 = 13 148 136: #0d9488
- #1e293b = 30 41 59: #1e293b

Cinco conversões resolvidas. Experimenta uma à mão e depois confirma com o nome da amostra.

## 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.

```css
.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%);
}
```

Todas as linhas de cada grupo são renderizadas de forma idêntica. Usa a que a tua equipa lê mais depressa e mantém a consistência.

## 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.

```js
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 }
```

Sem precisar de bibliotecas. A linha de validação impede que um erro de escrita se torne silenciosamente preto.

## 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:

```js
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'
```

Sem padStart, 13 passaria a d em vez de 0d e o código ficaria com um carater a menos.

## 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](https://gradiently.design/pt-pt/guide/hsl-colors) e [OKLCH](https://gradiently.design/pt-pt/guide/oklch-explained) descrevem as cores por matiz e luminosidade, para que pequenas edições se comportem de forma previsível.

### Hex ou RGB servem para

- Guias de marca e entrega a programadores
- Copiar uma cor entre aplicações
- Juntar transparência em CSS ou canvas
- Igualar um valor exato de uma especificação

### Recorre a HSL ou OKLCH para

- Tornar uma cor mais clara ou mais escura
- Construir tons claros e escuros para uma paleta
- Gradientes mais suaves entre matizes distantes
- Temas com variáveis CSS

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](https://gradiently.design/pt-pt/guide/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](https://gradiently.design/pt-pt/guide/css-gradient-transparent) 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](https://gradiently.design/pt-pt/guide/color-contrast-accessibility). 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.

## FAQ

### Como se converte hex em RGB?

Divide o código de seis dígitos em três pares e converte cada um de base 16: multiplica o primeiro dígito por 16 e soma o segundo, com a a f a valerem de 10 a 15. #7c3aed passa a 124, 58, 237.

### O que é #ffffff em RGB?

É rgb(255 255 255), branco puro. Cada par é ff, que é 15 × 16 + 15 = 255.

### Como converto hex em RGBA?

Converte os três primeiros pares como habitual. Se o código tiver oito dígitos, converte também o último par e divide-o por 255 para obter o alfa, de modo que 80 dá cerca de 0,5.

### Converter hex em RGB muda a cor?

Não. Ambos são notações dos mesmos valores sRGB, por isso a cor é renderizada de forma idêntica nos dois casos.

### Como converto RGB de volta em hex?

Divide cada canal por 16: o número inteiro é o primeiro dígito hex e o resto o segundo. Em JavaScript usa value.toString(16).padStart(2, '0').