Aprendendo CSS e HTML Guest Post Yara Georgia
Entendendo a relação entre cores RGB e hexadecimais
Esse artigo é um guest post escrito por Yara G.
Algum tempo atrás, a Nessa postou aqui no MB um tutorial de como personalizar os comentários no novo sistema do blogger. E, 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.
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.
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
#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.
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:
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 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.
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
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.
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
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.
Yara Georgia
Yara é colaboradora no Mundo Blogger. Paulistana extraditada pela universidade, proudly Sistemas de Informação. Programadora por aspiração. Webdesigner por conveniência. Poliglota por excesso de miolos. Pseudocontadora por paraquedismo, compositora por insônia e escritora por compulsão. Fundadora/autora/editora/relações públicas/CEO no blog Schrei in Deutsch.
Show,me ajudando muito,estou fazendo aulas de HTML. Bem expliocado.
Eu achei simplesmente sensacional esse artigo. É exatamente o que eu procurava e explica com um facilidade incrível de se entender. Parabéns pela didatica. Só gostaria de saber se foi pesquisado em alguma base teórica de outro lugar ou se foi a autora mesmo que tinha conhecimento e explicou. Gostaria de usa-lo em minha monografia. Agradeço e aguardo a resposta.
Oi, Jana. Puxa, obrigada! 😀 Fico feliz que tenha encontrado no meu artigo o que vc procurava e que tenha gostado da forma de explanação.
Então, eu tenho uma base teórica sim. Aprendi isso num livro, segue a referência: NIEDERST, Jennifer. Aprendendo WebDesign. Não lembro local nem editora; a edição que eu li era de 2003, mas decerto já tem uma mais atualizada…
Obrigada pelo comentário, espero que ajude 😀
Bom! Simplesmente fantástico!
Este é um daqueles artigos que nos esclarece sobre algo que utilizamos durante anos, e nunca nos questionamos do porquê de ser assim ou da outra forma.
Ora aqui está a resposta ao que não perguntei, e que já devia de ter perguntado faz tempo 😉
HAHAHA justamente por isso o sentimento de iluminação quando descobri essas paradas. É um detalhe que passa despercebido, né? A gente acaba aprendendo que é assim e acabou, e muito bem colocado, não questiona. Quem nunca usou aquele tripleto hexadecimal pra colocar cor em alguma coisa porque não sabia de onde o código saía?
A princípio, hexadecimal parece ser um negócio sem o menor sentido, e depois de entender essa relação, dá para manipulá-lo e ir inserindo cores diretamente no CSS por inferência, e ajustar o código da cor até ele ficar ao seu gosto sem a necessidade de recorrer a uma tabela mastigada.
Ou então, quando você está brincando num editor de imagem, tira uma cor da hora e quer usar exatamente aquele tom num blog, sabendo da existência de uma relação entre o sistema RGB e o hexadecimal, você tira de letra – e não fica se mordendo procurando uma cor parecida numa tabela e pensando consigo “nunca mais vou conseguir aquela cor perfeita”. Mas esse último exemplo é coisa para pessoas neuroticamente perfeccionistas, como eu. HAHA
Olá,
Estou criando um blog na plataforma Blogger e estou querendo colocar como plano de fundo imagens em slide! Já procurei muito como fazer e não acho ninguém q me dê uma luz! Será q você pode me passar o código HTML para isso? Se possível me orientar na edição!
Um exemplo pra você ter uma ideia do que estou querendo é o background desse site aqui: http://vegas.jaysalvat.com/
Obrigado pela atenção!
Oi!
Bom, para começar, isso não é HTML, é jQuery. Eu já tentei fazer isso num blog meu também, mas não tive sucesso. O problema em jQuery é que, não raro, se você já tem algum outro plugin que também usa jQuery, um deles para de funcionar – ou os dois, já aconteceu comigo. Sem contar que deixa a página mais pesada…
Enfim, o que eu posso te sugerir é usar o Innerfade, também um plugin de jQuery (eu o uso no schreiindeutsch.net), que pode dar o mesmo efeito, só que fazendo uns macetes. Como plano de fundo, não recomendo muito; porque, mesmo que você use imagens enormes, não tem como ajustá-las perfeitamente no monitor de todas as pessoas que visitarem o seu blog, o que pode resultar numa aparência bem feia.
Posso fazer um tutorial ensinando a usar o Innerfade e mandar como outro Guest Post aqui no MB, só não sei quando vou ter tempo para isso.
De todo modo, manipular imagens de background é uma coisa bem complicada. Há cinco anos mexo com blogs e a única forma realmente eficiente de fazer isso funcionando direito, foi com o Innerfade; vi no site da Florence + the Machine (florenceandthemachine.net), mas não tive tempo de dissecar o código-fonte inteiro de cabo a rabo para descobrir exatamente como é feito. Detalhe que lá é usada uma imagem pequena que se repete por toda a página; como slide, do jeito que você quer, eu infelizmente não vou saber ajudar sem fazer uso de gambiarra.
– A autora do artigo 😀
Td bem eu tb já desencanei da ideia do slide pq por ser um blog profissional acho q vai ficar cansativo para os leitores, mas mesmo assim obrigado pela atenção!
Ah, consegui descobrir que, não sei de que forma, essa fonte do título do post na própria página dele, que se muda, também muda quando eu troco a cor da fonte do TEXTO do post! o_o E não sei como resolver isso, se pode ser nas Variable Definitions… Quanto ao tamanho e ao negrito, realmente não sei de onde saiu, mas ao menos consegui descobrir alguma parte… Me ajuda Clau, por favor! =/ Obrigada.
Lamento, mas eu não tenho como te ajudar, pois deve ser algo relacionado ao seu template e para tentar descobrir, teria que ser feita uma análise mais minuciosa, e infelizmente eu não disponho de tempo para isso. De qualquer forma, agradeço pelo comentário.
Não sou a Clau/Nessa, mas acho que eu adivinho: na página interna do post, o título dele fica formatado do mesmo jeito que o texto, só que em negrito e o tamanho diferente.
Aposto que você usa o template Viagem! Já lidei com isso. Se for, eis o que vc deve fazer:
Procure no HTML do seu template o seguinte: h3.post-title a {
Note que tem duas linhas de CSS que chamam as Variable Definitions que você citou.
Logo acima desse bloco de CSS, tem uma bem parecida: h3.post-title {
Tudo o que você tem que fazer é copiar as duas linhas de código que estão abaixo de h3.post-title a { e colá-las também abaixo de h3.post-title {
Ou simplesmente insira h3.post-title, (com essa vírgula) no início da linha h3.post-title a {
Faça o que for mais fácil para você de entender, eu resolvi o problema desse jeito ^^
– A autora do artigo