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

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

Um código hex são só três números escritos em base 16. Quando você enxerga 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, divida o código de seis dígitos em três pares e converta cada par da base 16 para um número entre 0 e 255.
- Cada par é calculado como o primeiro dígito vezes 16, mais o segundo dígito, sendo que 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 forma abreviada em que cada dígito é duplicado, então #f60 é a mesma cor que #ff6600.
- Hex e RGB descrevem exatamente as mesmas cores sRGB, então converter de um para o outro nunca muda a aparência da cor.

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

A base 16 conta de 0 a 9 e depois continua com letras. É a única coisa que você precisa 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 |

Maiúsculas e minúsculas tanto faz: #7C3AED e #7c3aed são a mesma cor.

## 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. **Tire a cerquilha e divida em pares** `#7c3aed` vira `7c`, `3a` e `ed`. São vermelho, verde e azul, nessa ordem.
2. **Converta o par do vermelho** `7c`: 7 × 16 = 112, e c é 12, então o vermelho é 112 + 12 = **124**.
3. **Converta o par do verde** `3a`: 3 × 16 = 48, e a é 10, então o verde é 48 + 10 = **58**.
4. **Converta o par do azul** `ed`: e é 14, 14 × 16 = 224, e d é 13, então o azul é 224 + 13 = **237**.
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.

- #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. Faça uma à mão e depois confira com o nome da amostra.

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

```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 aparecem idênticas na tela. Use a que a sua equipe lê mais rápido e mantenha a consistência.

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

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

Não precisa de biblioteca. A linha de validação impede que um erro de digitação vire preto sem ninguém perceber.

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

```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 o padStart, 13 viraria d em vez de 0d e o código ficaria com um caractere a menos.

## 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](https://gradiently.design/pt-br/guide/hsl-colors) e [OKLCH](https://gradiently.design/pt-br/guide/oklch-explained) descrevem as cores por matiz e luminosidade, então pequenos ajustes se comportam de forma previsível.

### Hex ou RGB servem para

- Guias de marca e entrega para desenvolvedores
- Copiar uma cor entre aplicativos
- Acrescentar transparência em CSS ou canvas
- Bater um valor exato de uma especificação

### Prefira HSL ou OKLCH para

- Clarear ou escurecer uma cor
- Montar tons e sombras para uma paleta
- Gradientes mais suaves entre matizes distantes
- Temas com variáveis CSS

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](https://gradiently.design/pt-br/guide/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](https://gradiently.design/pt-br/guide/css-gradient-transparent) mostra isso na prática.

Antes de usar qualquer cor convertida em texto, confira com o fundo num [verificador de contraste de cores](https://gradiently.design/pt-br/guide/color-contrast-accessibility). 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.

## FAQ

### Como converter hex para RGB?

Divida o código de seis dígitos em três pares e converta cada um da base 16: multiplique o primeiro dígito por 16 e some o segundo, sendo que de a a f valem de 10 a 15. #7c3aed vira 124, 58, 237.

### Quanto é #ffffff em RGB?

É rgb(255 255 255), branco puro. Todos os pares são ff, que vale 15 × 16 + 15 = 255.

### Como converter hex para RGBA?

Converta os três primeiros pares normalmente. Se o código tiver oito dígitos, converta também o último par e divida por 255 para obter o alfa, então 80 dá cerca de 0,5.

### Converter hex para RGB muda a cor?

Não. Os dois são notações para os mesmos valores sRGB, então a cor aparece idêntica de um jeito ou de outro.

### Como converter RGB de volta para hex?

Divida cada canal por 16: o quociente é o primeiro dígito hex e o resto é o segundo. Em JavaScript, use value.toString(16).padStart(2, '0').