Como usar o seletor de cores (conta-gotas)?

Existe uma ferramenta muito útil construída na ferramenta de desenvolvimento do Chrome, que acabei de descobrir. Nem sei o nome dele, e não consigo encontrar no google. Eu diria que é uma ferramenta de inspeção de pixels.

Acho o seguinte método de como usá-lo:

1a. Inspecione um elemento html com a cor de fundo.

1b. Defina a cor de fundo de um elemento.

Clique no seletor de cores.
Mova o mouse sobre qualquer elemento da página (não na ferramenta dev)

Veja: http://skalar.darkware.hu/skalkaz/Chrome-Colorpicker.gif

Minhas perguntas: Qual é o nome desta ferramenta? Como usar isso facilmente? Na maioria das vezes, não me importo com a cor, mas quero inspecionar os pixels de um ícone. Existe uma tecla de atalho desta ferramenta?

google-chrome-devtools

— Skalár Wag
fonte

Este é útil para cópias e visualizações de nível superior: chrome.google.com/webstore/detail/eyedropper-color-pick/…

— austin_ce

Respondido nos comentários abaixo também; você pode encontrá-lo nas ferramentas de desenvolvimento (na guia Elementos, na guia "Estilos", clique em qualquer regra de "cor", há um seletor de cores no pop-up) O que estou procurando é um caminho sem a necessidade de uma cor regra, como imagine que você deseja escolher uma cor apenas de uma imagem.

— mdikici

Respostas:

104

Para abrir o conta-gotas simplesmente:

Abrir DevTools F12
Vá para a guia Elementos
Na barra lateral de Estilos, clique em qualquer caixa de visualização de cor

Sua principal funcionalidade é inspecionar os valores de cor de pixel clicando neles, embora com seus novos recursos você também possa ver a paleta de cores existente em sua página ou paleta de design de material clicando no ícone de duas setas na parte inferior. Pode ser muito útil ao projetar sua página.

— Jaqen H'ghar
fonte

Atualmente estou usando a versão 68.0.3440.106. Você não pode mais usar a paleta de cores para selecionar uma cor

— caras

O Chrome v72 aqui funciona exatamente como descrito na resposta.

— Dinei em

Estou no v78 e não consigo fazer isso funcionar; até vim aqui para descobrir se estava esquecendo algum detalhe.

— Herbert Van-Vliet

É chamado apenas de ferramenta conta-gotas. Pelo que estou ciente, não há nenhuma tecla de atalho para ele. A única maneira de usá-lo agora é clicando na caixa do seletor de cores na barra lateral de estilos e, a seguir, clicando na página como já fez.

— Jaredwilli
fonte

precisa haver uma maneira mais fácil

— SuperUberDuper

@SuperUberDuper Bem, agora existe. Minha resposta tem alguns anos. Hoje em dia, você pode simplesmente clicar na pequena caixa de amostra de cor ao lado dos valores de cor na barra lateral de estilos e mover o mouse sobre a página para ver a ferramenta de seleção de cores. É muito mais fácil agora.

— jaredwilli

mas você precisa ter uma regra de cor primeiro

— SuperUberDuper

@SuperUberDuper ou use uma var ... --c: red, maneira mais fácil de obter uma propriedade de cor em seu painel de devtools.

— Brandito de

você pode explicar mais

— SuperUberDuper

Atualmente, a ferramenta conta-gotas não está funcionando na minha versão do Chrome (conforme descrito acima), embora funcionasse para mim no passado. Ouvi dizer que ele está sendo atualizado na versão mais recente do Chrome.

No entanto, consigo capturar cores facilmente no Firefox.

Abra a página no Firefox
Menu Hambúrguer -> Desenvolvedor Web -> Conta-gotas
Arraste a ferramenta conta-gotas sobre a imagem ... Clique .
A cor é copiada para a área de transferência e a ferramenta conta-gotas desaparece.
Colar código de cor

Caso você não consiga fazer o conta-gotas funcionar no Chrome, esta é uma boa solução.
Também acho mais fácil acessar :-)

— SherylHohman
fonte

Achei que não estava funcionando para mim também, mas aparentemente há uma limitação para que ele funcione apenas quando o devtools está encaixado na janela do navegador.

— buzard