terça-feira, 12 de junho de 2018

Visual Dicas

Visual Dicas

Link to 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:

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

image

    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 –> <p><font size="3" color="red">Aprendendo cores</font></p>

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

    image

    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].

    image

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

    image

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

    image

    Usando a extensão ColorPick 

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

    image

    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

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

    image

    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].

    image

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

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

    image

    Para fazer alterações clique em [Opções].

    image

    Altere as preferências, embora a extensão já esteja ajustada da melhor forma… Clique em [Save Options] para salvar.

    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

    Nenhum comentário:

    Postar um comentário

    Os comentários são muito bem vindos e importantes, pois enriquecem o conteúdo dos artigos.

    Afilia-se na NetAffiliation

    Ganhe dinheiro com os Programas de Afiliados