Wie verwende ich den Google Chrome-Farbwähler?

Google Chrome ist in Chrome DevTools integriert, einer Sammlung von Webentwickler-Tools. Unter allen verfügbaren Tools ist der in Chrome verfügbare Farbwähler praktisch.

Aber wie greifen Sie darauf zu? Wie benutzt man es? Welche Funktionen werden zusammen mit dem Tool angeboten?

In diesem Artikel werden wir dieses Tool und seine Funktionen erkunden.

Wie starte ich den Chrome-Farbwähler?

Sie können über eine Tastenkombination oder GUI (Graphical User Interface) auf das Chrome-Tool zur Farbauswahl zugreifen.

Presse Strg + Umschalt + I bei Verwendung der Tastatur um die DevTools zu erhalten und dann zum Farbwähler zu gehen. Wenn Sie einen Mac verwenden, müssen Sie drücken, Befehl + Option + I..

Mit der Maus müssen Sie einen Rechtsklick ausführen und dann auf „Inspect” zum Navigierenate über die DevTools.

Sie können auch einstellen Chrome DevTools um bei jedem neuen Tab automatisch zu öffnen. So können Sie schnell auf die Farbauswahl für jede Registerkarte Ihres b zugreifenrowser.

Um dies zu erreichen, müssen Sie eine neue Instanz von Chrome über die Befehlszeile starten und dabei das folgende Flag übergeben:

--auto-open-devtools-for-tabs

So sieht es aus, wenn Chrome mit automatisch geöffneten DevTools über das Terminal unter Linux gestartet wird:

google-chrome-stable --auto-open-devtools-for-tabs

So verwenden Sie Farbe Picker in Chrome?

Sobald Sie die DevTools starten, müssen Sie navigierenate Ihr Weg, auf die Tools zuzugreifen, die Sie zum Identifizieren der Farbe auf einer Webseite oder eines Designs benötigen, an dem Sie arbeiten möchten.

Standardmäßig sollten Sie in der Lage sein, das „Design”-Abschnitt am unteren Rand der DevTools aktiv, wie im Screenshot gezeigt.

Wenn Sie etwas anderes ausgewählt haben, klicken Sie auf „Design“, um auf den CSS-Code der Webseite zuzugreifen.

Hier müssen Sie durch den verfügbaren CSS-Code nach unten scrollen und nach einer Farbe suchen box unter dem Hauptteil als Hintergrund oder Farbe gekennzeichnet. Dies ist der Farbwähler, nach dem Sie gesucht haben.

Klicken Sie einfach auf die Farbe box; Es sollte Ihnen mehr Optionen bieten, wie im Screenshot unten gezeigt.

Das ist es! Voilà, Sie haben den Farbwähler auf Ihrem BrowsIch bin bereit, Ihnen zu helfen.

Hier sollten Sie den Hex-Code oder RGB-Wert der Farbe finden und die Möglichkeit haben, anderes CSS auszuwählen Elemente zum Erkunden und inspect das Design auf der Webseite.

Funktionen im Farbwähler in Chrome

Der integrierte Farbwähler von Chrome bietet Ihnen neben dem Hex-Code eine Vielzahl von Informationen zur Identifizierung der Farbe.

Hier ist, was Sie davon erwarten können. Einige wichtige Funktionen umfassen:

Farbpaletten: Anstatt viele Farbschattierungen zu durchlaufen, erhalten Sie einige vordefinierte Farbpaletten, um einige Auswahlen schnell anzuwenden.

Farbformat: Sie erhalten die Möglichkeit, von zu wechseln Hex-Code zu RGBA-Werten und HSLA-Farbe Werte auch.

Pipette: Wenn Sie auf den Farbwähler zugreifen, können Sie browsÖffnen Sie die Webseite und wählen Sie ein beliebiges Element aus, um den Hex-Code dieser Farbe zu erhalten. Sie können auf den Farbwähler klicken toggle zum Aktivieren/Deaktivierensable es.

Sie erhalten mehr Optionen zum Optimieren der Farben und zum Erzielen der Genauigkeitate Farbe Ihrer Wahl. Hier sind sie:

• In die Zwischenablage kopieren: Sie können den Code der erkannten Farbe schnell in Ihre Zwischenablage kopieren.
• Farbverlauf: Sie können den Farbton optimieren und die Möglichkeiten einer Farbkombination nach Ihren Wünschen durchgehen.
• Deckkraftkontrolle: Sie können die Transparenzstufe anpassen, damit sie solide oder minimal aussieht.
• Hintergrundfarbwähler: Zur Auswahl einer geeigneten Hintergrundfarbe für den perfekten Kontrast.
• Kontrastverhältnis: Passen Sie den Kontrast an oder korrigieren Sie ihn, um den Text/das Element sichtbar zu machen.

Hinweis: Das Farbauswahltool ist nicht auf Google Chrome beschränkt, sondern kann auf jedem Chrome-basierten Web verwendet werdenrowsÄhm wie Brave.

So verwenden Sie den Chrome-Farbwähler mit Google Slides?

Sie können navigierenate Um auf das Farbauswahltool zuzugreifen, klicken Sie mit der rechten Maustaste auf den Kopfbereich von Google Slides Website. Auch wenn Google Slides bietet kein eingebautes Farbauswahltool, das sollte ausreichen.

Wenn Sie mit der Verwendung der DevTools mit Google nicht vertraut sind Slides, Sie können auch einige davon probieren Chrom-Erweiterungen für die Arbeit.

Chrome-Erweiterungen als Alternative zum Farbwähler

Obwohl Erweiterungen nützlich sein können, sollte beachtet werden, dass sie nicht aktiv aktualisiert werdenated oder gepflegt. Wenn man bedenkt, dass sie Zugang zu Ihrem b benötigenrowsAufgrund Ihrer Daten sollten Sie bei der Installation von Erweiterungen vorsichtig sein, auch bei den hier empfohlenen.

Es gibt jedoch zwei beliebte Erweiterungen, die Sie vielleicht ausprobieren möchten:

# 1. ColorZilla

ColorZilla Erweiterung bietet alle wesentlichen Funktionen, die Sie mit dem integrierten Farbwähler von Chrome erhalten. Als Bonus erhalten Sie auch die Möglichkeit, den Verlauf der zuletzt ausgewählten Farbe zu überprüfen.

Dies sollte also für jeden Anwendungsfall nützlich sein, nicht nur bei Google Slides.

# 2. ColorPick Pipette

Wenn Sie mit DevTools Probleme mit dem Pipetten-Tool haben, können Sie es versuchen ColorPick Pipette um eine Pipette zu erhalten, ohne auf die Webtools zuzugreifen.

Wenn Sie eine Farbe auswählen, werden der RGB-Wert und die Option zum Generieren angezeigtate Farbpaletten. Ähnlich wie bei der obigen Erweiterung können Sie auch den Verlauf der von Ihnen ausgewählten Farben überprüfen.

Schlussworte

Chrome DevTools Color Picker ist ein nützliches Tool. Sie benötigen kein professionelles Werkzeug, um Farben und Assoziationen zu identifizierenated-Code oder Werte. Das integrierte Tool von Chrome macht es ganz einfach, ohne dass ein Gerät erforderlich ist third-Party-Erweiterung.

Angefangen von Grafikdesignern bis hin zu Webentwicklern, die a Website-Tempplate, jeder sollte es hilfreich finden.

Natürlich können Sie sich für die Verwendung entscheiden third-Party-Erweiterungen sind ebenfalls verfügbar. Sofern Sie es jedoch nicht benötigen, empfehlen wir Ihnen, alle Funktionen mit DevTools zu erkunden.