Você sabia que as cores das telas de dispositivos eletrônicos (televisões, computadores, smartphones, tablets etc.) podem ser descritas por códigos? Criar um site ou escolher a cor perfeita para um logotipo envolve mexer com esses códigos, para garantir que a mesma tonalidade apareça em diferentes dispositivos.
Entre os códigos, o hexadecimal é um dos mais intrigantes. Trata-se de uma espécie de linguagem usada para criar e identificar cores, com precisão matemática, por designers e computadores. O sistema hexadecimal combina os algarismos de 0 a 9 com letras de A a F.
Com alguns cálculos simples, é possível fazer a conversão de um número decimal para hexadecimal e vice-versa. Os conhecimentos matemáticos necessários para tais conversões envolvem cálculos de potências e/ou divisões sucessivas por 16.
Que tal um exemplo a partir da exploração do sistema hexadecimal?
Alguns códigos de cores são baseados no sistema RGB (red, green and blue), que utiliza as cores primárias de luz (vermelho, verde e azul) para gerar uma infinidade de tonalidades. Cada cor é representada por seis dígitos no código hexadecimal, em que os dois primeiros indicam o vermelho, os dois do meio representam o verde e os dois últimos, o azul. Para identificar que o código se trata de uma cor, os seis dígitos vêm antecedidos por um símbolo de #. Um exemplo de código de cor hexadecimal seria #FF5733. Nesse código, temos um máximo de vermelho, uma dose moderada de verde e um toque de azul. Interessante, né? A questão é: como podemos identificar a intensidade de cada uma das cores primárias da luz a partir da escrita do seu código?
Vamos entender, então, como o código #FF5733 se traduz nas cores e intensidades citadas acima. Para isso, precisamos entender a conversão de número hexadecimal para o sistema decimal, escrito em base 10. Como mencionado anteriormente, o sistema hexadecimal utiliza 16 símbolos para representar valores que vão de 0 a 9 e, em seguida, de A a F, em que A equivale a 10, B a 11, C equivale a 12 e assim por diante, até F, que corresponde a 15 no sistema decimal. No código de cores, cada par de dígitos hexadecimais corresponde à intensidade de uma cor primária, na seguinte ordem: vermelho, verde e azul. A intensidade de cada cor, no sistema RBG, vai de 0 (significa nada dessa cor) a 255 (intensidade máxima da cor).
Voltemos ao código anterior. Vamos calcular a intensidade de cada uma das cores desse código:
Ao converter a letra F para o valor 15, conforme as equivalências no sistema hexadecimal, temos:
Cálculo da intensidade da cor vermelha: (15 x 161) + (15 x 160) = 255.
O par FF representa o vermelho. Em hexadecimal, FF é o número máximo, que equivale a 255 (duzentos e cinquenta e cinco) em decimal e indica uma intensidade máxima de vermelho.
Cálculo da intensidade da cor verde: (5 x 161) + (7 x 160) = 87.
O par 57 (lê-se “cinco sete”) representa o código da cor verde. Ao converter para decimal, 57 (cinco sete) equivale a 87 (oitenta e sete) e indica uma intensidade moderada de verde.
Cálculo da intensidade da cor azul: (3 x 161) + (3 x 160) = 51.
O par 33 (lê-se “três três”) representa o código do azul. Em decimal, 33 equivale a 51 (cinquenta e um) e indica uma menor intensidade de azul.
Assim, a cor cujo código é #FF5733 combina as intensidades das cores acima em uma tonalidade específica de laranja com predominância do vermelho (255), suavizada por um toque de verde (87) e uma dose sutil de azul (51). Veja, então, a cor resultante de #FF5733:
Agora, aqui vai uma curiosidade interessante: a mistura de cores funciona de maneira diferente na luz e na tinta. Quando falamos de luz, como no sistema RGB, a mistura é aditiva. Isso significa que quanto mais cores você adiciona, mais próximo do branco o resultado fica. Já na tinta, o sistema funciona de maneira subtrativa. Misturar todas as cores primárias de tinta tende a resultar em um tom escuro ou preto.
Por exemplo, nas tintas, se você misturar a vermelha com a verde, é provável que o resultado seja um marrom mais escuro e opaco.
Já no mundo das luzes, a combinação das intensidades máximas de vermelho e de verde resulta em um amarelo brilhante. Confira na imagem:
Essa diferença ocorre porque a luz adiciona brilho ao combinar cores, enquanto a tinta absorve partes do espectro de luz.
Além de algumas ferramentas online, softwares como Photoshop, Illustrator, CorelDRAW e até mesmo o Paint permitem que você explore combinações hexadecimais de cores. Imagine que você precisa criar um logotipo e necessita algumas cores especiais. Que tal criar uma paleta de cores personalizadas com utilização dos códigos hexadecimais?
- Abra um software como Paint, Photoshop ou qualquer ferramenta similar;
- Escolha uma cor inicial e identifique o código hexadecimal correspondente;
- A partir desse código, modifique, no programa, os valores dos pares de dígitos e mantenha a estrutura formada pelo símbolo “#” seguido por seis caracteres (números de 0 a 9 e letras de A a F). Por exemplo, para o código #FF5733, altere um dos pares de dígitos para ajustar a intensidade de vermelho, verde ou azul e crie variações de tom. Isso permitirá explorar como as combinações influenciam as tonalidades resultantes;
- Anote cada novo código hexadecimal e a cor gerada e crie, assim, sua paleta exclusiva de cores.
Você perceberá que, com pequenos ajustes nos números, é possível criar variações surpreendentes e descobrir, na prática, como ocorre a mistura de tons.
O código de cores hexadecimal é uma prova de que a tecnologia e a Matemática têm um lado criativo! Quem diria que números e letras poderiam pintar um mundo cheio de cores? Da próxima vez que você olhar para uma tela, lembre-se do incrível sistema que está por trás de tudo!
Referências bibliográficas
BONJORNO, José Roberto. Matemática e tecnologia: conexões e aplicações. São Paulo: Editora Moderna, 2020.
PEREIRA, João Madeiras et al. Introdução à Computação Gráfica. Lisboa: FCA – Editora de Informática, 2018.