RGB e códigos hex

Com 256 níveis para cada canal, vermelho, verde e azul, uma tela pode representar 256 × 256 × 256 = 16 777 216 cores, e cada uma delas é um ponto dentro de um cubo.

Três números, três eixos

No espaço de cor sRGB usado na web, uma cor é escrita com três valores de canal: vermelho, verde e azul. No código do dia a dia, cada canal é um número inteiro de 0 a 255, a faixa que cabe em oito bits. Um canal em 0 significa que aquela luz está apagada. Um canal em 255 significa que ela está totalmente acesa. Assim, rgb(255 0 0) é o vermelho mais forte que a tela pode mostrar, rgb(0 0 0) é preto e rgb(255 255 255) é branco.

Três números que percorrem cada um uma faixa formam uma caixa. Ponha o vermelho ao longo de uma aresta, o verde ao longo de outra e o azul ao longo da terceira, e cada cor tem um lugar dentro de um cubo. O modelo acima desenha esse cubo com 512 blocos pequenos, oito passos ao longo de cada aresta. O preto fica num canto. O branco fica no canto oposto. Os três cantos vizinhos ao preto são o vermelho, o verde e o azul puros. Os três cantos vizinhos ao branco são ciano, magenta e amarelo, cada um feito de dois canais no máximo. Ative os rótulos e siga as arestas do preto ao branco: todo caminho passa por uma cor primária e uma secundária.

A linha tracejada do preto ao branco é o eixo cinza. Todo ponto nela tem vermelho, verde e azul iguais, como rgb(128 128 128). Cores longe dessa linha são vivas. Cores perto dela são acinzentadas. É a primeira pista da ideia por trás do modelo HSL da próxima unidade: a distância ao eixo cinza mede o quanto algo é colorido.

Como ler um código hex

O CSS também permite escrever os mesmos três números em hexadecimal, depois de um sinal #. O hexadecimal conta de dezesseis em dezesseis, com os dígitos de 0 a 9 e as letras de a a f, em que a vale 10 e f vale 15. Dois dígitos hex cobrem 16 × 16 = 256 valores, exatamente um canal. Então um código de seis dígitos são três pares: vermelho, verde, azul. O CSS Color 4 observa que maiúsculas e minúsculas não importam, então #00ff00 e #00FF00 são a mesma cor.

Para ler um par, multiplique o primeiro dígito por 16 e some o segundo. Para c3, isso dá 12 × 16 + 3 = 195. Para ff, dá 15 × 16 + 15 = 255, o máximo. Para 80, dá 8 × 16 = 128, quase exatamente a metade. Um código de três dígitos como #f80 é uma abreviação: cada dígito é escrito duas vezes seguidas, então #f80 significa #ff8800. Digite um código na caixa Hex abaixo do modelo e o marcador salta para esse ponto do cubo.