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

Encontre no blog...

23/11/2011

Como capturar cores da tela usando o Chrome

rainbowtoolsExtensão Color Pick para o Chrome

No artigo anterior (Como capturar cores na tela usando o Firefox) mostramos uma extensão muito útil para capturar  cores das páginas da web  usando o Firefox. Devido aos pedidos que recebi por e-mail, vamos apresentar neste artigo uma extensão similar usada no Google Chrome.

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 o Color Pick

 Entre no navegador Chrome e acesse o link: Color Pick

Clique no botão [+ USAR NO CHROME] e depois em [instalar].

image

Aguarde alguns instantes e você verá o ícone da extensão na barra de ferramentas do Chrome…

image

Usando a extensão Color Pick

Clique no link da extensão (mostrado na figura anterior). Passe o cursor do mouse pela tela até encontrar a cor desejada.

Observe que a caixa de cores do Color Pick vai mostrando o código hexadecimal, rgb e hsl da cor identificada pelo cursor do mouse na tela.

O ícone da extensão vai se alterando mostrando sempre a última cor capturada…

image

Para mudar a posição da caixa de cores, clique no link [Pop-out], e para escondê-la clique em [Hide].

Encontrado a cor ideal, de um clique com o mouse e pronto: cor capturada. Agora você pode copiar o código hexadecimal da cor para área de transferência usando [Ctrl+C].

Para fechar e sair do modo Color Pick clique em [X].

image

Desativando a extensão

Se você não gostou da extensão ou não deseja mais usar o Color Pick, basta acessar o ícone com o botão direito do mouse e selecionar [Desativar]. Para excluir a extensão definitivamente, selecione [Desinstalar]. (É claro que depois você poderá instalar a extensão novamente).

image

Para fazer alterações clique em [Opções] e altere as preferências, embora a extensão já esteja ajustada da melhor forma…

image Por byALF 


Leia também:

Conheça 7 extensões do Chrome que vão ajudar você a deixar o YouTube bem melhor

Aprenda a instalar Extensões no Chrome

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