Wie benutzt man einen Farbwähler (Pipette)?

Es gibt ein sehr nützliches Tool in Chrome Dev Tool, das ich gerade entdeckt habe. Ich kenne den Namen nicht einmal und kann ihn bei Google nicht finden. Ich würde sagen, es ist ein Pixel Inspector Tool.

Ich finde die folgende Methode, wie man es benutzt:

1a. Untersuchen Sie ein HTML-Element mit Hintergrundfarbe.

1b. Definieren Sie die Hintergrundfarbe eines Elements.

Klicken Sie auf den Farbwähler.
Bewegen Sie die Maus über ein Element auf der Seite (nicht über das Entwicklungswerkzeug).

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

Meine Fragen: Wie lautet dieser Werkzeugname? Wie benutzt man es einfach? Die meiste Zeit ist mir die Farbe egal, aber ich möchte die Pixel eines Symbols untersuchen. Gibt es einen Hotkey für dieses Tool?

google-chrome-devtools

— Skalár Wag
quelle

Dies ist nützlich für das Kopieren und übergeordnete Ansichten: chrome.google.com/webstore/detail/eyedropper-color-pick/…

— austin_ce

Beantwortet auch in den Kommentaren unten; Sie finden es in den Entwicklungswerkzeugen (auf der Registerkarte "Elemente", unter der Registerkarte "Stile" auf eine beliebige "Farb" -Regel klicken, befindet sich eine Farbauswahl im Popup). Was ich suche, ist ein Weg ohne Farbbedarf Regel, wie Sie sich vorstellen, möchten Sie eine Farbe nur aus einem Bild auswählen.

— Mdikici

Antworten:

103

So öffnen Sie die Pipette einfach:

Öffnen DevTools F12
Gehen Sie zur Registerkarte Elemente
Klicken Sie unter der Seitenleiste "Stile" auf ein Farbvorschau-Feld

Die Hauptfunktion besteht darin, die Pixelfarbwerte durch Klicken zu überprüfen. Mit den neuen Funktionen können Sie jedoch auch die vorhandene Farbpalette oder Materialdesignpalette Ihrer Seite anzeigen, indem Sie auf das Symbol mit den beiden Pfeilen unten klicken. Dies kann beim Entwerfen Ihrer Seite sehr praktisch sein.

— Jaqen H'ghar
quelle

Ich verwende derzeit die Version 68.0.3440.106. Sie können die Farbpalette nicht mehr verwenden, um eine Farbe auszuwählen

— caras

Chrome v72 funktioniert hier wie in der Antwort beschrieben.

— Dinei

Ich bin auf Version 78 und kann dies nicht zum Laufen bringen. Ich bin sogar hierher gekommen, um herauszufinden, ob ich einige Details vergessen habe.

— Herbert Van-Vliet

Es wird nur als Pipettenwerkzeug bezeichnet. Es gibt keine Tastenkombination dafür, die mir bekannt ist. Sie können es jetzt nur noch verwenden, indem Sie auf das Farbauswahlfeld in der Stil-Seitenleiste klicken und dann auf die Seite klicken, wie Sie es bereits getan haben.

— jaredwilli
quelle

Es muss einen einfacheren Weg geben

— SuperUberDuper

@ SuperUberDuper Nun, das gibt es jetzt. Meine Antwort ist ein paar Jahre alt. Heutzutage können Sie einfach auf das kleine Farbfeldfeld neben den Farbwerten in der Seitenleiste des Stils klicken und dann mit der Maus über die Seite fahren, um das Farbauswahlwerkzeug anzuzeigen. Es ist jetzt viel einfacher.

— Jaredwilli

Aber Sie müssen zuerst eine Farbregel haben

— SuperUberDuper

@SuperUberDuper oder verwenden Sie eine var ... --c: red, einfachste Möglichkeit, eine Farbeigenschaft in Ihr devtools-Bedienfeld zu übernehmen.

— Brandito

— Können

Derzeit funktioniert die Pipette in meiner Chrome-Version (wie oben beschrieben) nicht, obwohl sie in der Vergangenheit für mich funktioniert hat. Ich habe gehört, dass es in der neuesten Version von Chrome aktualisiert wird.

In Firefox kann ich jedoch problemlos Farben erfassen.

Seite in Firefox öffnen
Hamburger Menü -> Web Developer -> Pipette
Ziehen Sie die Pipette über das Bild ... Klicken Sie auf .
Die Farbe wird in Ihre Zwischenablage kopiert und das Pipettenwerkzeug verschwindet.
Farbcode einfügen

Falls Sie die Pipette in Chrome nicht zum Laufen bringen können, ist dies eine gute Lösung.
Ich finde es auch einfacher zuzugreifen :-)

— SherylHohman
quelle

Ich dachte, es hat auch bei mir nicht funktioniert, aber anscheinend gibt es eine Einschränkung, so dass es nur funktioniert, wenn devtools im Browserfenster angedockt sind.

— Buzard