PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Publicidade:

Encontre no blog...

18/11/2011

Como capturar cores na tela usando o Firefox

rainbowtools

Extensão para capturar cores

Sabe aquele site super bacana, com uma combinação de cores invejável e você não consegue decifrá-las? Calma, neste artigo vamos mostrar uma extensão para o Firefox  fundamental para quem está iniciando no mundo do “web designer”. Mesmo para nós blogueiros mortais, que não somos especialistas em programação, muitas vezes nos deparamos códigos que utilizam cores e precisamos delas…

image

Noções de códigos de cores na web

Para quem ainda não conhece,  as cores na web são definidas geralmente em 3 formatos: nome pré-definido, valores RGB e valores Hexadecimal.

Obs: Também existem outros formatos como:  RGBA, HSL, HSLA, RYB,  CMYK, etc., porém, os 3 formatos Nome, RGB e Hex são os mais comuns para uso em programas HTML e CSS…

No exemplo abaixo, vamos mostrar quais os 3 formatos mais comuns para a definição da cor vermelha:

  1. Nome pré definido –> red
  2. Valores RGB (red,green,blue) –> rbg(255,0,0)
  3. Valores Hexadecimais (#RRGGBB) –> #FF0000

image

Estes valores quando alterados, vão definindo as cores e tons, totalizando 16.777.216 (ou 256³) de combinações no sistema RGB.

Mas onde aparecem estes códigos? Para quem trabalha com layout de sites, ou mesmos nós blogueiros, já nos deparamos muitas vezes com eles: HTML e CSS. Veja alguns exemplos abaixo:

Exemplo HTML –> <p><font size=”3” color=”red”>Aprendendo cores</font></p>

Exemplo CSS –> <p style=”font-size:12px;color:#ff0000">Aprendendo cores</p>

image

Instalando a extensão no Firefox

Entre no navegador Firefox e acesse o link: Rainbow Color Tools 1.4

Clique no botão [+ Add to Firefox].

image

Clique em [Instalar agora].

image Reinicie o Firefox

image Observe que o ícone de um arco-íris aparecerá no canto direito superior

image

Usando Rainbow Color Tools

Abra a o menu clicando na setinha ao lado do ícone. Selecione o comando desejado: Inspector, Picker ou Website Analyzer. Para fazer alterações nos padrões da extensão, selecione Settings.

Inspector: Identifica a cor quando você passa o cursor sobre a tela. Como padrão, o Inspector mostra a cor definida por um valor HEXADECIMAL. Para alterar o valor padrão selecione [Settings] . Para abrir o Inspector, você também poderá usar a tecla de atalho [Ctrl+Alt+I].

image

Achou a cor ideal, basta então dar um clique com o mouse para ele capturar a cor e copiar o código para a área de transferência. Depois é só colar em editor de texto qualquer, assim: #BB99BB. Para programadores e web designers esta extensão é realmente uma maravilha…

Picker: Esta é uma ferramenta também muitíssima útil. Nela você poderá selecionar qualquer cor ou tom e identificar os valores Hexadecimal, RGB ou HSV.

Também é possível você digitar um parâmetro de uma cor em Hexadecimal, por exemplo, e verificar os valores correspondentes RGB ou HSV, além de observar a cor também, que será mostrada no quadrado á direita do painel de cores…

image Com o picker você também poderá usar o cursor para identificar a cor da tela, clicando no [+] que aparece no canto direito superior…

Depois de um clique sobre a cor desejada na tela. Pronto, a cor já está capturada. Clique em [Copy] para copiar o código na área de transferência.

image Para fazer simulações em algum site que você está construindo, use o botão quadrado tracejado (ao lado do botão +)

image Selecione uma cor que você quer simular, clique no botão quadrado e selecione uma área da tela que você quer visualizar…

image

Pronto, agora você pode simular com várias cores este elemento que você definiu. Achou a cor ideal, clique em [Copy] e adicione na sua programação… (Antes que alguém me pergunte, este comando não altera o site, é apenas uma simulação na tela. É só atualizar com [F5] que volta tudo ao normal).

Website Anlyzer: Este comando mostra o padrão de cores principais de um site

image Observe que passando o mouse sobre as cores, você tem a opção de copiar o código e verificar a porcentagem de presença da cor no site…Ótimo para designers…

image


Nota do autor: aproveita e passa lá no Blog Squids, vai…


0 comentários:

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More