Come utilizzare il selettore di colori (contagocce)?

C'è uno strumento molto utile integrato nello strumento di sviluppo di Chrome, che ho appena scoperto. Non conosco nemmeno il suo nome e non riesco a trovarlo su Google. Direi che è uno strumento di ispezione pixel.

Trovo il seguente metodo come usarlo:

1a. Ispeziona un elemento html con il colore di sfondo.

1b. Definisci il colore di sfondo di un elemento.

Fare clic sul selettore di colori.
Sposta il mouse su qualsiasi elemento della pagina (non sullo strumento di sviluppo)

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

Le mie domande: qual è il nome di questo strumento? Come usarlo facilmente? Il più delle volte non mi interessa il colore, ma voglio ispezionare i pixel di un'icona. C'è un tasto di scelta rapida di questo strumento?

google-chrome-devtools

— Skalár Wag
fonte

Questo è utile per la copia e le visualizzazioni di livello superiore: chrome.google.com/webstore/detail/eyedropper-color-pick/…

— austin_ce

Ha risposto anche nei commenti qui sotto; puoi trovarlo negli strumenti di sviluppo (nella scheda Elementi, sotto quella nella scheda "Stili" fai clic su qualsiasi regola "colore", c'è un selettore di colori nel popup) Quello che sto cercando è un modo senza bisogno di un colore regola, come immaginare di voler scegliere un colore solo da un'immagine.

— mdikici

Risposte:

104

Per aprire il contagocce semplicemente:

Apri DevTools F12
Vai alla scheda Elementi
Nella barra laterale degli stili, fai clic su qualsiasi casella di anteprima del colore

La sua funzionalità principale consiste nell'ispezionare i valori del colore dei pixel facendo clic su di essi, anche se con le sue nuove funzionalità puoi anche vedere la tavolozza dei colori esistente della tua pagina o la tavolozza del material design facendo clic sull'icona delle due frecce in basso. Può essere molto utile durante la progettazione della tua pagina.

— Jaqen H'ghar
fonte

Attualmente sto utilizzando la versione 68.0.3440.106. Non è più possibile utilizzare la tavolozza dei colori per selezionare un colore

— caras

Chrome v72 qui, funziona proprio come descritto nella risposta.

— Dinei

Sono su v78 e non riesco a farlo funzionare; sono persino venuto qui per capire se stavo dimenticando qualche dettaglio.

— Herbert Van-Vliet

Si chiama semplicemente strumento contagocce. Non esiste un tasto di scelta rapida per esso di cui sono a conoscenza. L'unico modo in cui puoi usarlo ora è fare clic sulla casella di selezione dei colori nella barra laterale degli stili e quindi fare clic sulla pagina come hai già fatto.

— jaredwilli
fonte

ci deve essere un modo più semplice

— SuperUberDuper

@SuperUberDuper Bene, ora c'è. La mia risposta è di un paio d'anni. Al giorno d'oggi, puoi semplicemente fare clic sulla piccola casella del campione di colore accanto ai valori del colore nella barra laterale degli stili e quindi spostare il mouse sulla pagina per visualizzare lo strumento di selezione dei colori. Adesso è molto più facile.

— jaredwilli

ma prima devi avere una regola dei colori

— SuperUberDuper

@SuperUberDuper o usa un var ... --c: red, il modo più semplice per ottenere una proprietà color nel tuo pannello devtools.

— Brandito

puoi spiegare di più

— SuperUberDuper

Attualmente, lo strumento contagocce non funziona nella mia versione di Chrome (come descritto sopra), sebbene abbia funzionato per me in passato. Ho sentito che è in fase di aggiornamento nell'ultima versione di Chrome.

Tuttavia, sono in grado di catturare facilmente i colori in Firefox.

Apri la pagina in Firefox
Menu Hamburger -> Web Developer -> Eyedropper
Trascina lo strumento contagocce sull'immagine ... Clicca .
Il colore viene copiato negli appunti e lo strumento contagocce scompare.
Incolla il codice colore

Nel caso in cui non riesci a far funzionare lo strumento contagocce in Chrome, questo è un buon rimedio.
Trovo anche più facile l'accesso :-)

— SherylHohman
fonte

Pensavo che non funzionasse anche per me, ma a quanto pare c'è una limitazione in modo che funzioni solo quando i devtools sono ancorati nella finestra del browser.

— Poiana