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 e o sistema de cores RGB

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:

RGB deciamal
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). 

RGB hexadeciamal
#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?

Conteúdos:


Edigley Alexandre

Edigley Alexandre

Graduado em Matemática pelo DME na UERN em 2007, leciona Geometria, Matemática e Física. Blogueiro Part-Time desde 2007. Membro do Google+ Create em Português. Seu interesse é compartilhar conhecimento matemático interligado à Tecnologia da Informação e Comunicação, assim como artigos de opinião sobre Educação, Matemática e Educação Matemática.

Os comentários serão moderados pelo autor do blog. Respondo todas as segundas-feiras, terças-feiras e finais de semana.

É muito bom ler comentários, porém atente para algumas regras muito importantes antes de enviar a sua colaboração para este artigo.


Comente este artigo:

6 comentários:

  1. Olá, prof. Alexandre.
    Eu gostaria de saber se é possível inferir cores que sejam, digamos, diametralmente proporcionais. Isto é, um par de cores que seja uma a correspondente ideal da outra. Há, por exemplo, a meu ver, uma relação como esta que estou tentando explicar entre o verde e o vermelho mais intensos, já que uma utiliza o máximo da intensidade de uma cor que na outra é nula: 255,0,0; 0,255,0.
    Eu vejo, como outro exemplo, estes outros tons de vermelho e verde: 215,84,66 e 107,165,131, embora acho que elas “combinem” idealmente apenas no visual. O que eu gostaria de saber, portanto, é se existe uma maneira matemática de confirmar ou encontrar cores que sejam pares ideais. Mais especificamente, eu procuro a mixagem de vermelho que mais combine com este tom de verde: 143,188,139.

    ResponderExcluir
    Respostas
    1. Olá! Seria legal se identificasse. Só precisa de um e-mail e o seu nome.

      Quando a sua dúvida, desconheço qualquer tipo de algoritmo que estabeleça uma relação de cores proporcionais como você descreveu em sua dúvida. Me perdoe por isso.

      Um abraço!

      Excluir
  2. Grande matéria, professor, sanou uma dúvida que eu tinha sobre informática.

    Gostaria de perguntar se um "erro" que aparece quando leio suas postagens, uma expressão em vermelho [Math Processing Error], é porque falta algum programa no meu computador para ler as expressões numéricas do seu blog. Se for, poderia me dizer qual é?

    ResponderExcluir
    Respostas
    1. Olá, professora Manuka!

      Que bom que gostou do artigo. Quanto ao erro, deve ser porque a página não carregou corretamente. Quando esse erro aparece significa que as simbologias matemáticas que escrevo nas postagens não aparecerão.

      Dê um F5 (recarregar) sempre que esse erro aparecer. Isso não é comum, porém depende de alguns fatores, como conexão de internet por exemplo.

      Abraço!

      Excluir
    2. Obrigada pelo retorno, professor. Hoje, ao voltar a esta postagem, não visualizo mais o erro. Acredito que o problema era mesmo minha internet.

      Excluir
    3. Houve uma troca de servidores do programinha que exibe simbologia matemática no blog. Agora está tudo ok.

      Abraço!

      Excluir