A Matemática e o sistema de cores RGB

Neste artigo você entenderá a Matemática das cores em monitores de computadores e TVs para compor imagens em baixa e alta resolução (HD). Entenderá também como é composta as cores decimais, hexadecimais e qual o conteúdo matemático que podemos aplicar.

Desde a 5ª série (hoje 6º ano) aprendi com a Aldenira, minha professora de Artes no longínquo ano de 1995, que as cores primárias aditivas são o vermelho, verde e azul. Em inglês, Red, Green e Blue, formando a sigla RGB, com as letras iniciais dos nomes das cores em inglês. Elas são chamadas de cores primárias, pois não são derivadas de outras cores.

RGB não é apenas um sigla, e sim uma ordem de numeração para as cores, por exemplo R: 102, G: 187, B: 146.

Já as cores secundárias são aquelas derivadas da combinação (ou mistura) entre as cores vermelho, verde e azul, duas a duas na mesma proporção ou não. Como as cores são comprimentos de ondas de luz, os resultados com tintas não é tão preciso assim, porém são misturas bem próximas.

Neste artigo você entenderá a Matemática das cores em monitores de computadores e TVs para compor imagens em baixa e alta resolução (HD). Entenderá também como é composta as cores decimais, hexadecimais e qual o conteúdo matemático que podemos aplicar.

A Matemática das cores

A ordem de cada cor RGB é composta por um número inteiro que varia entre 0 e 255, pela conveniência de se guardar cada valor de cor em 1 byte (8 bits). Assim, o vermelho completamente intenso é representado por 255, 0, 0,  o que significa que o vermelho possui intensidade 255 da cor vermelha, e o número 0 indica ausência de verde e azul. Cada conjunto de três valores gera um código numérico decimal (de base 10). Daí podemos fazer algumas transformações matemáticas com números de base 10. 

A cor R:102, G:187, B:146 destacada no começo do artigo, é a cor padrão que utilizo para este blog. Esta cor é composta por 40% de vermelho (R), 73,3% verde (G) e 57,25% de azul (B).

Esquematizando a porcentagem de cor RGB para obter o verde padrão encontrado neste blog.

$${\color{Red} R: \cfrac{102}{255} \times 100 =  \cfrac{102 \times 100}{255} = \cfrac{10200}{255} = 40\% }$$
$${\color{Green} G: \cfrac{187}{255} \times 100 =  \cfrac{187 \times 100}{255} = \cfrac{18700}{255} = 73,3\%}$$
$${\color{Blue} B: \cfrac{146}{255} \times 100 =  \cfrac{146 \times 100}{255} = \cfrac{14600}{255} = 57,25\%}$$

O resultado:

R:102, G:187, B:146

Representação hexadecimal

A notação RGB decimal como descrita acima, pode se tornar um pouco extensa dependendo da sua utilização. Por exemplo, se for empregada em blogs e sites, um trecho em CSS pode ficar mais longo do que o normal. Do ponto de vista de quem edita, é bem cansativo organizá-las.

Uma solução convencional é a utilização da representação hexadecimal das cores (conjunto de 6 caracteres). Os números hexadecimais são precedidos pelo caractere (#). Para o código hexadecimal são utilizados os algarismos 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 e as letras A, B, C, D, E e F (podem ser minúsculas também). 

#66BB92

Com eles podemos formar 256 números compostos por um ou dois caracteres (do 00 ao 255). Assim o número 0 em decimal é igual a 0 em hexadecimal já o 10 em decimal é igual ao A em hexadecimal. O 125 em decimal equivale ao 7D em hexadecimal e por fim o número 255 em decimal equivale a FF em hexadecimal. Resumindo, as cores hexadecimais variam entre 00 a FF.

Exemplo:

O menor valor em RGB decimal (0, 0, 0), em hexadecimal é #000000 e representa o preto. Os dois primeiros zeros representam a intensidade de cor vermelha; os dois zeros do meio, a intensidade de cor verde; e os dois últimos, a intensidade de cor azul).

O maior valor em RGB (255, 255, 255), em hexadecimal é #FFFFFF e representa o branco. Os dois primeiros caracteres representam a intensidade da cor vermelha; os dois caracteres centrais, a intensidade da cor verde; e os dois últimos, a intensidade da cor azul).

Existem outros formatos para codificar as cores, como CMYK, RGB percent, HSL, HSV (ou HSB), etc.

E os conteúdos matemáticos?

Alguns cálculos matemáticos já foram realizados até agora. Não percebeu? Potenciação (de base 10 e base 16) e um pouco de arranjos simples (Análise Combinatória). Este é um ótimo exercício para treinar a habilidade em fazer conversões da base decimal ou para outra base qualquer. E ao mesmo tempo uma aplicação matemática que pode ser trabalhada em sala de aula.

Um bom web designer deve dominar bem estes conceitos e aplicações em seu trabalho diário.

Sugestão de tarefa para alunos

Peça ao seus alunos que analisem a cor hexadecimal #aacc23 e descubram o código em base decimal. E encontre também o código na base 16 da cor expressa na base decimal por 35, 170, 204.

Para encerrar, deixo um "desafio" para você. Ao se arranjarem as 256 quantidades possíveis das três cores primárias, é possível criar quantas cores diferentes?