Como o computador cria cores: a história do RGB, HEX e binário
#FF0000. #00FF00. #0000FF. Já deve ter encontrado esta notação em protótipos de design ou em código. Parece um código secreto, talvez um código de jogo. Na realidade, é o nome de uma cor.
De cima para baixo: vermelho, verde, azul. São os nomes que o computador utiliza para designar as cores. Vamos perceber de onde vem esta 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, formam todas as cores que vemos.
Utilizamos RGB todos os dias
Onde há um ecrã, quase sempre há RGB.
- Monitor / TV — cada pixel é formado por três pontos: vermelho, verde e azul
- Ecrã de smartphone — mesma estrutura, pixels mais pequenos
- LED de teclado para jogos — três LEDs R·G·B por tecla
- Iluminação de caixa de PC — a fita RGB é exatamente o sinal RGB
Se ampliar o ecrã o suficiente, verá: vermelho, verde e azul. Só isso. Milhões de pequenos pontos RGB juntam-se para formar a imagem que vê.
As cores são criadas por mistura
Cada canal RGB tem uma intensidade de 0 a 255.
RGB(255, 0, 0)— vermelho no máximo → vermelho puroRGB(0, 255, 0)— verde no máximo → verde puroRGB(255, 255, 0)— vermelho + verde → amareloRGB(0, 0, 0)— tudo desligado → pretoRGB(255, 255, 255)— tudo no máximo → branco
Pode parecer estranho que vermelho + verde resulte em amarelo, mas isto é síntese aditiva de luz. É diferente das tintas que misturava na escola (vermelho + verde = castanho). Com luz, quanto mais se adiciona, mais claro fica — e tudo junto torna-se branco.
Mova os três cursores e veja por si próprio.
O número de 8 dígitos à direita é a representação binária de cada canal. Ao mover o cursor, esse número também muda. Como 0s e 1s geram 256 valores diferentes é o próximo tema.
Por que de 0 a 255?
O computador trabalha apenas com 0 e 1. Cada posição que armazena 0 ou 1 chama-se bit. À medida que o número de bits aumenta, a quantidade de valores possíveis duplica a cada bit.
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, pelo que 1 byte por canal se tornou o padrão.
Ler 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.
Some os valores das posições marcadas com 1 e obtém o número em decimal.
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. É demasiado longo para escrever numa linha de CSS ou num campo de ferramenta de design todas as vezes. 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 algarismos que usamos normalmente vão só de 0 a 9 — são apenas 10. Os 6 restantes são emprestados do alfabeto.
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.
4 dígitos binários = 1 caractere hexadecimal. Quatro dígitos tornam-se um único caractere. Como cada canal RGB tem 8 bits, cabe exatamente em dois caracteres hexadecimais.
Como converter RGB para HEX
Vamos converter RGB(255, 87, 51).
A notação que tinha 14 caracteres fica com 7 caracteres.
Como deduzir a cor a partir do HEX
Olhando o HEX ao contrário, consegue ter uma ideia da cor.
#FF5733— R máximo (FF), G médio (57), B baixo (33) → laranja com vermelho forte#3576E0— R baixo (35), G médio (76), B forte (E0) → azul ligeiramente arroxeado#29A85A— R baixo (29), G forte (A8), B baixo (5A) → verde fresco
Se conseguir olhar para três dígitos e distinguir “é laranja ou azul?”, designers e programadores podem comunicar na mesma linguagem.
Resumo numa 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 estes três conceitos se ligam, 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 passo seguinte é transformar estes números na linguagem do designer. Pedidos como “um pouco mais claro”, “menos saturado” ou “o mesmo em papel” são difíceis de tratar apenas com RGB e HEX. Como HSL, CMYK e OKLCH resolvem isso está explicado em RGB não chega: notações de cor HSL, CMYK e OKLCH.