byALF | 
segunda-feira, junho 11, 2018
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%)
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:16px;color:#ff0000">Aprendendo cores</p>
Obs.: Teste os códigos no nosso editor: http://squids.com.br/editor/
Instalando o ColorPick
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].
Para fazer alterações clique em [Opções].
Altere as preferências, embora a extensão já esteja ajustada da melhor forma… Clique em [Save Options] para salvar.
Por byALF
Leia também:
0 comentários:
Postar um comentário