Cores na Web - utilizando a escala de cinza

Vamos criar uma função simples em JavaScript para converter uma imagem colorida para uma escala de cinza. Para isso, precisamos entender primeiro como funciona o sistema aditivo cromático RGB na Web.

Todas as imagens dos dispositivos eletrônicos (monitores, TVs, câmeras) são compostas por pixels. Cada pixel é representado neste modelo cromático como a soma de três cores: Vermelho (Red), Verde (Green) e Azul (Blue); a intensidade destas cores é representada por valores entre 0 (ausência) a 255 (intensidade máxima).

A cor vermelha, por exemplo, é representada neste modelo por 255, 0 ,0, verde por 0, 255, 0 e a preta por 0, 0, 0.

Para produzir a escala de cinza de uma imagem é necessário fazer a média dos valores e atribuir o valor resultante nos três valores do novo pixel.

Por exemplo, vamos calcular para um tom de magenta conforme figura abaixo:

R = 255, G = 73 e B = 239.