Nesse tutorial, havia uma imagem de background que “se misturava” com a borda dos comentários para dar a impressão de que a setinha apontando para o avatar de quem comentou faz parte do container. A instrução correspondente à imagem era que ela tinha que ter exatamente a mesma cor da borda. Ao que eu fui seguir o tutorial para personalizar os comentários nos meus blogs, soube exatamente o que fazer.
Usar a mesma imagem e mesma cor de borda? Nada disso, seria muita falta de criatividade. Apenas fazer um cálculo para fazer com que a cor da minha borda (definida em hexadecimal) fosse a mesma da minha imagem (definida pelo editor de imagem em RGB). Como eu fiz isso é o que vou explicar agora.
Usar a mesma imagem e mesma cor de borda? Nada disso, seria muita falta de criatividade. Apenas fazer um cálculo para fazer com que a cor da minha borda (definida em hexadecimal) fosse a mesma da minha imagem (definida pelo editor de imagem em RGB). Como eu fiz isso é o que vou explicar agora.
Já estamos acostumados a usar valores hexadecimais para configurar as cores nos blogs, e quem mexe com edição de imagem já deve ter notado que as configurações de cores são ajustadas por valores RGB. Agora, como vamos configurar a mesma cor de dois modos diferentes? Há uma relação entre um e outro? Há sim!
Cores RGB e hexadecimais
Vamos falar primeiro de RGB.
Cores RGB
Se você configurar uma cor preta no editor, observe os valores que aparecem nas caixinhas “vermelho”, “verde” e “azul”, destacadas no print abaixo:
Estão zeradas, pois não há nenhuma incidência de luz sobre nenhuma das três cores para formar o preto. Agora, coloque no branco. Os valores nas mesmas caixinhas será 255:
O branco, ao contrário, usa toda a luz das três cores. Trocando em miúdos, está aí a explicação da ausência de cor no preto e a mistura de todas as cores no branco.
255 é o valor máximo que uma cor terá. Pode tentar colocar manualmente um valor maior na caixinha, ela volta a ser 255. O motivo disso é o fato de cada informação de cor estar guardada em um byte (que, por sua vez, tem 8 bits). O que isso significa na prática é o número de combinações possíveis: se você pode escolher entre uma intensidade de 0 a 255 de vermelho, de 0 a 255 de verde e de 0 a 255 de azul, sempre do mais escuro (0) ao mais intenso (255), serão 256³ possibilidades diferentes de cores (advindas de combinações de tom, saturação e brilho), mesmo que não sejam tão facilmente distinguíveis. O resultado dessa conta é mais de 16 milhões, para ser exata, 16.777.216.
Voltando às cores. Se você colocar 255 em “vermelho” e 0 nas outras duas, a cor será vermelho puro. Se fizer o mesmo com 255 apenas no “verde”, virá o verde. Com o azul, idem.
255 é o valor máximo que uma cor terá. Pode tentar colocar manualmente um valor maior na caixinha, ela volta a ser 255. O motivo disso é o fato de cada informação de cor estar guardada em um byte (que, por sua vez, tem 8 bits). O que isso significa na prática é o número de combinações possíveis: se você pode escolher entre uma intensidade de 0 a 255 de vermelho, de 0 a 255 de verde e de 0 a 255 de azul, sempre do mais escuro (0) ao mais intenso (255), serão 256³ possibilidades diferentes de cores (advindas de combinações de tom, saturação e brilho), mesmo que não sejam tão facilmente distinguíveis. O resultado dessa conta é mais de 16 milhões, para ser exata, 16.777.216.
Voltando às cores. Se você colocar 255 em “vermelho” e 0 nas outras duas, a cor será vermelho puro. Se fizer o mesmo com 255 apenas no “verde”, virá o verde. Com o azul, idem.
Cor Hexadecimal
Agora vamos tratar de hexadecimal.
Sabemos que ‘hexa’ significa seis e ‘decimal’ é o sistema de contagem com base 10. Logo, ‘hexadecimal’ nada mais é do que sistema de contagem com base 16. Como assim? Decimal é fácil, temos os algarismos de 0 a 9 e mandamos bala. Mas 16? Mistura-se 11 com 12 com 13, como se desarticula isso? Com letras. Já que não temos mais algarismos naturais depois do 9, usa-se letras para representar os próximos. Assim, 10 é correspondido por A, 11 é correspondido por B, 12 por C, 13 por D, 14 por E e 15 por F. O décimo sexto no caso já está lá no 0. A lógica é: quanto mais próximo do 0, mais escuro e quanto ‘maior’ a letra, mais intenso.
Agora vamos visualizar o seguinte: o código da cor preta é #000000 e o da cor branca é #ffffff.
Agora vamos desmembrar esses elementos. O sistema hexadecimal também usa RGB, só que mais implícito. Como sabido, precisamos de seis caracteres seguidos por # para formar o código de uma cor. E cada dois caracteres desses são um desses valores. Ou seja:
#FF FF FF
Sabemos que ‘hexa’ significa seis e ‘decimal’ é o sistema de contagem com base 10. Logo, ‘hexadecimal’ nada mais é do que sistema de contagem com base 16. Como assim? Decimal é fácil, temos os algarismos de 0 a 9 e mandamos bala. Mas 16? Mistura-se 11 com 12 com 13, como se desarticula isso? Com letras. Já que não temos mais algarismos naturais depois do 9, usa-se letras para representar os próximos. Assim, 10 é correspondido por A, 11 é correspondido por B, 12 por C, 13 por D, 14 por E e 15 por F. O décimo sexto no caso já está lá no 0. A lógica é: quanto mais próximo do 0, mais escuro e quanto ‘maior’ a letra, mais intenso.
Agora vamos visualizar o seguinte: o código da cor preta é #000000 e o da cor branca é #ffffff.
Agora vamos desmembrar esses elementos. O sistema hexadecimal também usa RGB, só que mais implícito. Como sabido, precisamos de seis caracteres seguidos por # para formar o código de uma cor. E cada dois caracteres desses são um desses valores. Ou seja:
#FF FF FF
#00 00 00
Tanto que temos também:
#ff0000 #00ff00 #0000ff
Já sendo possível por aqui relacionar perfeitamente o RGB com valores de 0 a 255. Logo, combinando os números de 0 ao f (que representa o 15), podemos especificar as mesmas 256³ combinações de tom, saturação e brilho.
Mas RGB é fácil, basta colocar um valor de 0 a 255 para cada cor. Agora, com a entrada das letras, a coisa muda de figura.
Mas RGB é fácil, basta colocar um valor de 0 a 255 para cada cor. Agora, com a entrada das letras, a coisa muda de figura.
Como funciona o cálculo do código hexadecimal?
Cada dois caracteres simboliza um valor. Então temos 256 valores entre 00 e ff. Mas ao que interessa: o primeiro caractere simboliza o 16 e o segundo, o que sobrar. Isso nada mais é do que uma divisão: quantas vezes 16 há em 0? Nenhuma. Quanto menos de 16 há em 0? Zero.
Vamos exemplificar matematicamente:
Cada dois caracteres simboliza um valor. Então temos 256 valores entre 00 e ff. Mas ao que interessa: o primeiro caractere simboliza o 16 e o segundo, o que sobrar. Isso nada mais é do que uma divisão: quantas vezes 16 há em 0? Nenhuma. Quanto menos de 16 há em 0? Zero.
Vamos exemplificar matematicamente:
Vou usar uma convenção onde: dividendo:divisor=quociente%resto.
Temos o preto:
Preto é R = 0, G = 0 e B = 0.
Então vamos fazer a divisão desses valores por 16.
0:16=0%0 – Ou 0 dividido por 16 é igual a 0 com resto 0.
Temos o preto:
Preto é R = 0, G = 0 e B = 0.
Então vamos fazer a divisão desses valores por 16.
0:16=0%0 – Ou 0 dividido por 16 é igual a 0 com resto 0.
Temos o branco. Branco é R = 255, G = 255 e B = 255.
A conta é a mesma.
255:16=15%15 – Ou 255 dividido por 16 é igual a 15 com resto 15.
A conta é a mesma.
255:16=15%15 – Ou 255 dividido por 16 é igual a 15 com resto 15.
Agora vamos converter isso. Os valores que vamos usar para extrair o código hexadecimal são o quociente e o resto. Logo, se no preto o quociente é 0 e o resto é 0, os caracteres serão 0 e 0. E como os valores são os mesmos tanto para R quanto para G e B, basta fazer esse cálculo uma única vez e temos o código completo: #000000.
A mesma coisa vale para o branco: quociente é 15 e o resto também.
Como em hexadecimal 15 é f, extraímos #ffffff pelo mesmo princípio.
Se os valores das três cores tanto em RGB quanto em hexadecimal for o mesmo, o resultado será sempre um tom de cinza.
Por outro lado, se nós tivéssemos valores diferentes para R, G e B, essa divisão teria de ser feita com cada um deles, por exemplo:
RGB(77,208,159)
A conta fica:
R – 77:16=4%13
G – 208:16=13%0
B – 159:16=9%15
A conversão fica:
R – 4d (13=d)
G – d0 (13=d)
B – 9f (15=f)
E o código da cor fica:
#4dd09f
A mesma coisa vale para o branco: quociente é 15 e o resto também.
Como em hexadecimal 15 é f, extraímos #ffffff pelo mesmo princípio.
Se os valores das três cores tanto em RGB quanto em hexadecimal for o mesmo, o resultado será sempre um tom de cinza.
Por outro lado, se nós tivéssemos valores diferentes para R, G e B, essa divisão teria de ser feita com cada um deles, por exemplo:
RGB(77,208,159)
A conta fica:
R – 77:16=4%13
G – 208:16=13%0
B – 159:16=9%15
A conversão fica:
R – 4d (13=d)
G – d0 (13=d)
B – 9f (15=f)
E o código da cor fica:
#4dd09f
Tá, mas do que isso vai me servir?
O caso do tutorial que eu citei no início do artigo já é um bom exemplo por si só: Saber a relação entre cores RGB e Hexadecimais, vai ajudar muito a personalização, misturar elementos do HTML com imagens. No meu caso, eu pretendia usar as bordas da cor #191970, então, para a imagem da seta, me bastou converter o 19 hexadecimal para 25 decimal e o 70 hexadecimal para 112 e eis a minha cor no meu editor de imagem.
O caso do tutorial que eu citei no início do artigo já é um bom exemplo por si só: Saber a relação entre cores RGB e Hexadecimais, vai ajudar muito a personalização, misturar elementos do HTML com imagens. No meu caso, eu pretendia usar as bordas da cor #191970, então, para a imagem da seta, me bastou converter o 19 hexadecimal para 25 decimal e o 70 hexadecimal para 112 e eis a minha cor no meu editor de imagem.
Para te ajudar a procurar uma cor hexadecimal ou RGB e convertê-la, eis aqui uma tabela com códigos de centenas delas mastigadinhas:
» Tabela de cores web
» Tabela de cores web
Na tabela, o código Java é o mesmo que RGB e o código HTML é o hexadecimal.
Confessando uma coisa, me senti iluminada por saber essa relação RGB-hexadecimal e fazer as minhas personalizações tão facilmente, mas pensei no pessoal que não tem a menor noção do que um tem a ver com o outro e, possivelmente, mas acabou usando as bordas do mesmo jeito do tutorial para também aproveitar a mesma imagem por que não sabia como obteria exatamente a mesma cor se o sistema de especificação é diferente; ou tentou fazer igual e acabou desistindo porque não conseguiu. Foi por isso que resolvi criar este tutorial e publicar aqui no Mundo Blogger.
Espero que o artigo lhes seja útil, ou no mínimo agregue conhecimento na vasta área de Webdesign.
0 comentários: