Postado por Nícholas André | 2 - março - 2010 | 3 Comentários

image

Se você é um Web Designer, Desenvolvedor WEB, trabalha com edição de imagens ou simplesmente edita suas fotos em seu programa favorito de edição de imagens, já deve ter se deparado várias vezes com códigos hexadecimais de cores como #FFFFFF ou #000000. Se você acha que esses códigos são mera padronização e são definidos ao acaso, descubra que as coisas não funcionam bem assim. Pra tudo há uma explicação.

As cores são representadas através de uma notação chamada RGB ( R- Red, G- Green, B- Blue). Note que no eu programa de edição de imagens você tem 3 campos preenchidos com valores que vão de 0 a 255, como na imagem abaixo:Esse conjunto de três valorem especificam a cor e com eles é possível especificar milhares de cores com o padrão RGB. O que a notação hexadecimal faz é abreviar a escrita dessas cores (sim você escreve menos ao usar a notação hexadecimal).

Você pode observar a mesma cor representada em hexadecimal na figura abaixo

E pra que serve o #?

O "#" serve apenas para especificar o formato hexadecimal no HTML ou CSS, já que para definir uma cor em formato hexadecimal em cascatas e em HTML é necessária essa identificação com o #.

Agora vamos a parte que interessa.

A notação hexadecimal é composta de 6 caracteres ( sem o # ) os 2 primeiros caracteres equivalem ao valor do "vermelho", no nosso exemplo o valor do "vermelho" é 254, basta converter esse valor para hexadecimal, para efeito de teste abra sua calculadora no modo científico. No Ubuntu abra a calculadora seguindo estes passos:

Aplicativos -> Acessórios -> Calculadora

em seguida mude para o modo programável através de:

Ver -> Modo programável ou utilize o atalho CTRL + P

Digite 254 como mostra a figura

Em seguida mude a calculadora para o modo "Hex" – que é o modo Hexadecimal, automaticamente o valor é convertido para o equivalente em hexadecimal:

Agora compare o resultado com os 2 primeiros caracteres da cor em hexadecimal! isso mesmo são iguais. Isso porque os 2 primeiros caracteres equivalem à cor vermelha, os 2 do meio equivalem ao verde e os 2 últimos equivalem ao azul. Para ter a cor completa basta converter os valores de todas as cores e você terá a notação hexadecimal da sua cor.

No nosso caso os valores de verde e azul são 0 logo em hexadecimal é 00 para cada cor. A nossa cor em hexadecimal é #FE0000.

Simples não? comente o que achou :)

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

3 comentários até agora...

  1. Alex Ferreira disse:

    Interessante.

    Mal uso isso (na verdade nem uso), mas agora quando eu ver as cores nesse formato vou ter uma idéia de que cor mais ou menos se trata.

    Se os 2 primeiros caracteres forem os mais altos da escala hexadecimal eu ja vou saber que tem um tom avermelhado.

    Se tiver os dois do meio mais acentuados ja vou saber que tem um tom forte de verde…

    E os dois últimos os tons de azul…

    Dá pra ter uma idéia de como é a cor sem ter que recorrer a um software e digitar manualmente a cor.

  2. juliana disse:

    quando mexo com HTML eu sempre uso essa tabela e gostei da explicação