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.
Pressemitteilungen 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 „Inspizieren“, um durch die DevTools zu navigieren.
Sie können auch einstellen Chrome DevTools automatisch mit jedem neuen Tab öffnen. So können Sie schnell auf die Farbauswahl für jede Registerkarte in Ihrem Browser zugreifen.
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-tabsSo sieht es aus, wenn Chrome mit automatisch geöffneten DevTools über das Terminal unter Linux gestartet wird:
google-chrome-stable --auto-open-devtools-for-tabsSo verwenden Sie Farbe Picker in Chrome?
Nachdem Sie die DevTools gestartet haben, müssen Sie auf die Tools zugreifen, die zum Identifizieren der Farbe auf einer Webseite oder einem Design erforderlich sind, 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 einem als Hintergrund oder Farbe gekennzeichneten Farbfeld unter dem Textabschnitt suchen. Dies ist die Farbauswahl, nach der Sie gesucht haben.
Klicken Sie einfach auf das Farbfeld; Es sollte Ihnen mehr Optionen bieten, wie im Screenshot unten gezeigt.
Das ist es! Voilà, Sie haben die Farbauswahl in Ihrem Browser bereit, um Ihnen zu helfen.
Hier sollten Sie den Hex-Code oder RGB-Wert der Farbe finden und die Möglichkeit haben, andere CSS-Elemente auszuwählen, um das Design auf der Webseite zu erkunden und zu überprüfen.
Features in Color Picker on 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 die Farbauswahl zugreifen, können Sie die Webseite durchsuchen und ein beliebiges Element auswählen, um den Hex-Code dieser Farbe zu erhalten. Sie können auf den Farbwähler-Umschalter klicken, um ihn zu aktivieren/deaktivieren.
Sie erhalten mehr Optionen, um die Farben zu optimieren und die genaue Farbe Ihrer Wahl zu erhalten. 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 Farbauswahl-Tool ist nicht auf Google Chrome beschränkt, sondern kann in jedem Chrome-basierten Webbrowser wie Brave verwendet werden.
How to Use the Chrome Color Picker with Google Slides?
Sie können navigieren, um auf das Farbauswahl-Tool zuzugreifen, indem Sie mit der rechten Maustaste auf den Kopfzeilenbereich der Google Präsentationen-Webseite klicken. Auch wenn Google Slides kein eingebautes Farbauswahl-Tool bietet, sollte dies ausreichen.
Wenn Sie mit der Verwendung der DevTools mit Google Slides nicht vertraut sind, können Sie auch einige ausprobieren Chrom-Erweiterungen für die Arbeit.
Chrome Extensions as an Alternative to Color Picker
Obwohl Erweiterungen nützlich sein können, sollte beachtet werden, dass sie nicht aktiv aktualisiert oder gewartet werden. Da sie Zugriff auf Ihre Browserdaten benötigen, sollten Sie bei der Installation von Erweiterungen, auch den hier empfohlenen, vorsichtig sein.
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 von Farbpaletten angezeigt. Ä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 Werkzeug. Sie benötigen kein professionelles Werkzeug, um Farben und die zugehörigen Codes oder Werte zu identifizieren. Das integrierte Tool von Chrome macht es einfach, ohne dass eine Drittanbietererweiterung erforderlich ist.
Angefangen von Grafikdesignern bis hin zu Webentwicklern, die a Website-Vorlage, jeder sollte es hilfreich finden.
Natürlich können Sie auch die verfügbaren Erweiterungen von Drittanbietern verwenden. Wenn Sie es jedoch nicht benötigen, empfehlen wir Ihnen, alle Funktionen mit DevTools zu erkunden.
