Geekflare wird von unserem Publikum unterstützt. Wir können Affiliate-Provisionen durch den Kauf von Links auf dieser Website verdienen.
Teilen:

Wie verwende ich den Google Chrome-Farbwähler?

Chrom-Farbwähler
Invicti Web Application Security Scanner – die einzige Lösung, die eine automatische Verifizierung von Schwachstellen mit Proof-Based Scanning™ bietet.

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.

Chrome Devtools

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-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?

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.

Devtools-Stil

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.

Farbauswahl

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.

Farbpaletten Farbauswahl

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

Farbformat

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.

Farbwähler mit Pipette

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.

Google Slide Farbauswahl

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

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

Farbwähler-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.

Danke an unsere Sponsoren
Weitere großartige Lektüre zum Thema Design
Treiben Sie Ihr Geschäft an
Einige der Tools und Dienste, die Ihr Unternehmen beim Wachstum unterstützen.
  • Invicti verwendet das Proof-Based Scanning™, um die identifizierten Schwachstellen automatisch zu verifizieren und innerhalb weniger Stunden umsetzbare Ergebnisse zu generieren.
    Versuchen Sie es mit Invicti
  • Web-Scraping, Wohn-Proxy, Proxy-Manager, Web-Unlocker, Suchmaschinen-Crawler und alles, was Sie zum Sammeln von Webdaten benötigen.
    Versuchen Sie es mit Brightdata
  • Semrush ist eine All-in-One-Lösung für digitales Marketing mit mehr als 50 Tools in den Bereichen SEO, Social Media und Content-Marketing.
    Versuchen Sie es mit Semrush
  • Intruder ist ein Online-Schwachstellenscanner, der Cyber-Sicherheitslücken in Ihrer Infrastruktur findet, um kostspielige Datenschutzverletzungen zu vermeiden.
    MIT DER INTELLIGENTEN SCHADENKALKULATION VON Intruder