$show=label-post-search-page

Camisetas de Exatas - @camisetasdeexatas

$type=slider$meta=no$readmore=no$date=no$snippet=no$title=no$label=no$height=540$show=home

A Matemática e o sistema de cores RGB

COMPARTILHE:

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?

COMENTÁRIOS

Comentaristas: 10
  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
  3. Olá, conhece alguma maneira algébrica de calcular as cores em rgb?
    Exemplo: pegar o 255,0,0 + 0,255,0 e descobrir numericamente qual cor daria?
    Tive essa ideia há alguns dias e gostaria de estudar melhor sobre isso.

    ResponderExcluir
    Respostas
    1. Olá, Jorge!

      Creio que sim, porém também não parei para estudar sobre.

      Um abraço!

      Excluir
  4. Olá.... desculpe minha ignorância...mas o que as cores tem a ver com a matemática? na educação infantil diz que ao trabalhar as cores se está trabalhando a matemática, mas não entendo o porque

    ResponderExcluir
    Respostas
    1. Olá, Rosana!

      A forma mais básica de abordar a sua pergunta foi descrita neste post. Tem outras considerações que poderiam ser feitas, mas envolveria conteúdos de Física, como espectro de luz visível e etc.

      Um abraço!

      Excluir



$show=post

$show=post

Mesa Digitalizadora barata e ideal para professores
Nome

android,27,aplicações matemáticas,123,Aprender Matemática,39,Artigo Convidado,50,Biologia,1,blog,52,Blogger,5,Camisetas de exatas,11,Carl Sagan Day,1,chatgpt,2,chrome,9,cinema,12,Concursos,3,Curiosidades matemáticas,104,curso online,10,Desafios matemáticos,44,destaque,5,determinantes,3,Dia do Estudante,1,Dia do Professor,10,Diario Escolar Digital,5,Dica de economia,4,dica de livro,32,Dica para professor,54,divulgação,61,E-book,4,Editorial,21,educação,109,ENEM,1,ensino,144,Entrevista,8,eventos,19,excel,24,extensões,11,Facebook,8,feira do livro,4,firefox,2,frações,6,funções,14,geogebra,83,GifsMatemáticos,5,google,46,história da matemática,41,humor,58,IMO,2,InternetJusta,1,iOS,18,iPad,7,iPhone,3,jogos,31,Katex,1,Latex,22,LibreOffice,14,linux,50,Livro GeoGebra,6,Mapa Mental,1,Matemática e profissões,21,Matemático do dia,27,Materiais GeoGebra,31,Mathjax,2,Netflix,7,Noticias,132,OBMEP,1,One Strange Rock,1,Papel milimetrado,5,Papel Quadriculado,1,Pi Day,16,piadas matemáticas,13,PodCast,4,política,3,premiações,7,professor,6,promoção,13,Quiz,22,Resenhas de Livros,1,Resposta Desafios,1,Sebastião Vieira,22,software,18,Software Livre,50,Tabuada,5,TCC,18,Telegram,7,texmaths,5,TIC,35,Top artigos,4,ubuntu,15,Videos,105,wallpapers matemáticos,23,Widgets,26,windows,41,wolfram alpha,31,Youtube,21,
ltr
item
Prof. Edigley Alexandre - O blog para professores e estudantes de Matemática: A Matemática e o sistema de cores RGB
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.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI1T3y55bh-MGFy1jiJ8L4mOgM_-Ubc89fJe6XYMxtmGZ0g2ASQAZk0p7AsyctHvGEIKeip2F9kOiIsxYieeFRfdQj4Om_nowYjnypVGKCvTHrHAOXqX9Yk2bp9Sk1mDOkvelIp76rbNw/s1600/a-matematica-sistema-cores-RGB.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI1T3y55bh-MGFy1jiJ8L4mOgM_-Ubc89fJe6XYMxtmGZ0g2ASQAZk0p7AsyctHvGEIKeip2F9kOiIsxYieeFRfdQj4Om_nowYjnypVGKCvTHrHAOXqX9Yk2bp9Sk1mDOkvelIp76rbNw/s72-c/a-matematica-sistema-cores-RGB.png
Prof. Edigley Alexandre - O blog para professores e estudantes de Matemática
https://www.prof-edigleyalexandre.com/2014/02/a-matematica-e-o-sistema-de-cores-rgb.html
https://www.prof-edigleyalexandre.com/
https://www.prof-edigleyalexandre.com/
https://www.prof-edigleyalexandre.com/2014/02/a-matematica-e-o-sistema-de-cores-rgb.html
true
125900602153146940
UTF-8
Carregar mais posts Não foram encontrados posts VER TODOS Leia mais Responder Cancelar resposta Delete Por Início PÁGINAS POSTS VER TODOS RECOMENDADOS PARA VOCÊ CATEGORIA ARQUIVO PESQUISE TODOS OS POSTS Não foi encontrada nenhuma correspondência de postagem com sua solicitação VOLTAR Domingo Segunda Terça Quarta Quinta Sexta Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir ESTE CONTEÚDO PREMIUM ESTÁ BLOQUEADO PASSO 1: Compartilhar em uma rede social PASSO 2: Clique no link da sua rede social Copiar todo o código Selecioinar todo o código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar