Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1484305732
Vida do cache: 1485601729
Status: 1
Mensagem: Licença válida
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Aprendendo CSS e HTML Guest Post

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:
cores RGB e hexadecimais

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:
Print branco

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.

 



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

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.

Sobre o autor | Website

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.

11 Comentários

  1. Janderson disse:

    Show,me ajudando muito,estou fazendo aulas de HTML. Bem expliocado.

  2. Jana disse:

    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.

    • Yara G. disse:

      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 😀

  3. alezandri disse:

    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 😉

    • schreiyarai ? disse:

      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

  4. Mentalista disse:

    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!

    • schreiyarai ? disse:

      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 😀

      • Mentalista disse:

        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!

  5. Jun disse:

    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.

    • Vanessa disse:

      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.

    • schreiyarai ? disse:

      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

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.