Pular para o conteúdo
Guide Apr 5, 2026 · 6 min read

Como o computador cria cores: a história do RGB, HEX e binário

#FF0000. #00FF00. #0000FF. Você já deve ter encontrado essa notação em protótipos de design ou em código. Parece um código secreto, talvez um código de jogo. Na verdade, é o nome de uma cor.

#FF0000
#00FF00
#0000FF

De cima para baixo: vermelho, verde, azul. São os nomes que o computador usa para chamar as cores. Vamos entender de onde vem essa notação.

RGB — as três letras que criam cores

Red, Green, Blue. As três cores primárias da luz. Misturadas em diferentes proporções, elas formam todas as cores que vemos.

Usamos RGB todos os dias

Onde há uma tela, quase sempre há RGB.

  • Monitor / TV — cada pixel é formado por três pontos: vermelho, verde e azul
  • Tela de smartphone — mesma estrutura, pixels menores
  • LED de teclado gamer — três LEDs R·G·B por tecla
  • Iluminação do gabinete de PC — a fita RGB é exatamente o sinal RGB

Se você ampliar a tela o suficiente, vai ver: vermelho, verde e azul. Só isso. Milhões de pequenos pontos RGB se juntam para formar a imagem que você vê.

Cores são criadas pela mistura

Cada canal RGB tem uma intensidade de 0 a 255.

  • RGB(255, 0, 0) — vermelho no máximo → vermelho puro
  • RGB(0, 255, 0) — verde no máximo → verde puro
  • RGB(255, 255, 0) — vermelho + verde → amarelo
  • RGB(0, 0, 0) — tudo desligado → preto
  • RGB(255, 255, 255) — tudo no máximo → branco

Pode parecer estranho que vermelho + verde resulte em amarelo, mas isso é síntese aditiva de luz. É diferente das tintas que você misturava na escola (vermelho + verde = marrom). Com luz, quanto mais você adiciona, mais claro fica — e tudo junto vira branco.

Mova os três sliders e veja por si mesmo.

#FF5733
RGB · 255 · 87 · 51
R 255 11111111
G 87 01010111
B 51 00110011

O número de 8 dígitos à direita é a representação binária de cada canal. Quando você move o slider, esse número muda junto. Como 0s e 1s geram 256 valores diferentes é o próximo assunto.

Por que de 0 a 255?

O computador trabalha apenas com 0 e 1. Cada posição que armazena 0 ou 1 é chamada de bit. À medida que o número de bits aumenta, a quantidade de valores possíveis dobra a cada bit.

0/1
1 bit
= 2 valores
0/10/1
2 bits
= 4 valores
0/10/10/10/1
4 bits
= 16 valores
0/10/10/10/1 0/10/10/10/1
8 bits
= 256 valores ← 1 canal RGB

8 bits = 1 byte. Uma cor tem três canais RGB, totalizando 3 bytes = 24 bits. Com 24 bits, é possível representar cerca de 16,7 milhões de cores — passos suficientes para o olho humano distinguir, então 1 byte por canal virou o padrão.

Lendo binário diretamente

Cada posição tem um valor fixo. Da esquerda para a direita: 128, 64, 32, 16, 8, 4, 2, 1 — potências de 2.

1282⁷
642⁶
322⁵
162⁴
82³
42²
22¹
12⁰

Some os valores das posições marcadas com 1 e você obtém o número em decimal.

Exemplo 1
0128
064
032
016
18
04
12
01
8 + 2 = 10
Exemplo 2
1128
164
132
116
08
04
02
01
128 + 64 + 32 + 16 = 240
Exemplo 3 — todos os 8 dígitos em 1
1128
164
132
116
18
14
12
11
128 + 64 + 32 + 16 + 8 + 4 + 2 + 1 = 255

Por isso o valor máximo de 8 bits é 255. É exatamente por isso que o intervalo de cada canal RGB vai de 0 a 255.

HEX — os mesmos números, de forma mais curta

RGB(255, 255, 255). São 16 caracteres. É longo para escrever em uma linha de CSS ou em um campo de ferramenta de design toda vez. Por isso surgiu uma forma mais curta de escrever os mesmos números.

O que é hexadecimal

Hexadecimal é um sistema numérico que representa de 0 a 15 com um único caractere. Porém, os dígitos que usamos normalmente vão só de 0 a 9 — são apenas 10. Os 6 restantes são emprestados do alfabeto.

0→0
1→1
2→2
3→3
4→4
5→5
6→6
7→7
8→8
9→9
10→A
11→B
12→C
13→D
14→E
15→F

São três regras simples:

  • 0–9 continuam iguais
  • A partir de 10, começa com A
  • F é o valor máximo de um único caractere (= 15)

Por que hexadecimal?

4 dígitos binários (0000 a 1111) representam exatamente 16 valores.

0000→0
0001→1
0010→2
0011→3
0100→4
0101→5
0110→6
0111→7
1000→8
1001→9
1010→A
1011→B
1100→C
1101→D
1110→E
1111→F

4 dígitos binários = 1 caractere hexadecimal. Quatro dígitos se tornam um único caractere. Como cada canal RGB tem 8 bits, ele cabe exatamente em dois caracteres hexadecimais.

Como converter RGB para HEX

Vamos converter RGB(255, 87, 51).

01
Converter o valor R para hexadecimal
255→FF
02
Converter o valor G para hexadecimal
87→57
03
Converter o valor B para hexadecimal
51→33
04
Adicionar # na frente e ordenar R·G·B
#FF5733

A notação que tinha 14 caracteres vira 7 caracteres.

Como deduzir a cor a partir do HEX

Olhando o HEX ao contrário, dá para ter uma ideia da cor.

  • #FF5733 — R máximo (FF), G médio (57), B baixo (33) → laranja com forte vermelho
  • #3576E0 — R baixo (35), G médio (76), B forte (E0) → azul levemente arroxeado
  • #29A85A — R baixo (29), G forte (A8), B baixo (5A) → verde fresco

Se você consegue olhar para três dígitos e distinguir “é laranja ou azul?”, designers e desenvolvedores podem se comunicar na mesma linguagem.

Resumo em uma linha

  • RGB — três canais: vermelho, verde e azul, cada um de 0 a 255
  • Binário de 8 bits — o que está por trás dos 256 valores de cada canal
  • HEX — a mesma notação numérica escrita de forma mais curta, em dois caracteres

Quando esses três conceitos se conectam, o código de cor deixa de parecer língua estrangeira. Os três números do RGB são exatamente os seis caracteres do HEX.

O próximo passo é transformar esses números na linguagem do designer. Pedidos como “um pouco mais claro”, “menos saturado” ou “o mesmo no papel” são difíceis de lidar só com RGB e HEX. Como HSL, CMYK e OKLCH resolvem isso está explicado em RGB não é suficiente: notações de cor HSL, CMYK e OKLCH.