Visual Dicas

terça-feira, 12 de junho de 2018

Visual Dicas

Como capturar cores da tela usando o Chrome

Posted: 11 Jun 2018 01:34 PM PDT

rainbowtools

Escrito originalmente em 23/11/2011 - Atualizado em 11/06/2018

Extensão ColorPick para o Chrome

No artigo 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:

Nome pré definido –> red
Valores RGB (red,green,blue) –> rbg(255,0,0)
Valores Hexadecimais (#RRGGBB) –> #FF0000
Valores hsl -> hsl(0,100%,50%)

stes 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 –> Aprendendo cores

Exemplo CSS –> Aprendendo cores

Obs.: Teste os códigos no nosso editor: http://squids.com.br/editor/

Instalando o ColorPick

Entre no navegador Chrome e acesse o link: Color Pick

Clique no botão [+ USAR NO CHROME].

Clique agora no botão [Adicionar extensão].

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

Usando a extensão ColorPick

Clique no link da extensão na barra de ferramentas do Chrome (canto direito da tela).

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…

Obs.: Se você desejar mudar a posição da caixa de cores, clique no link [Pop-out].

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] ou tecle [ESC].

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 [Remover do Chrome].