Der Farbselektor in Google Chrome: Ein tiefgehender Blick
Google Chrome beinhaltet die Chrome DevTools, eine Sammlung von nützlichen Werkzeugen für Webentwickler. Unter diesen Werkzeugen ist der integrierte Farbselektor besonders praktisch.
Doch wie gelangt man zu diesem Tool? Wie wird es bedient? Und welche Funktionen bietet es an?
Dieser Artikel wird diese Fragen beantworten und die Funktionen des Farbselektors genauer unter die Lupe nehmen.
So starten Sie den Chrome-Farbselektor
Sie können den Farbselektor in Chrome über eine Tastenkombination oder die grafische Benutzeroberfläche (GUI) aufrufen.
Um die DevTools mit der Tastatur zu öffnen, drücken Sie Strg + Umschalt + I (oder Command + Option + I auf einem Mac). Navigieren Sie dann zum Farbselektor. Alternativ können Sie mit der Maus einen Rechtsklick auf der Webseite ausführen und „Untersuchen“ (oder „Inspect“) wählen, um die DevTools zu öffnen.
Die Chrome DevTools können auch so eingestellt werden, dass sie automatisch mit jedem neuen Tab geöffnet werden. Dies ermöglicht einen schnellen Zugriff auf den Farbselektor in jedem Browser-Tab.
Um dies zu erreichen, starten Sie eine neue Chrome-Instanz über die Befehlszeile mit dem folgenden Flag:
--auto-open-devtools-for-tabs
Hier ist ein Beispiel, wie der Start von Chrome mit automatisch geöffneten DevTools über das Terminal unter Linux aussehen könnte:
google-chrome-stable --auto-open-devtools-for-tabs
Die Anwendung des Farbselektors in Chrome
Nach dem Öffnen der DevTools müssen Sie sich orientieren, um die benötigten Werkzeuge zu finden. Mit diesen können Sie Farben auf Webseiten oder in Designs identifizieren.
Standardmäßig sollte der aktive Abschnitt „Stile“ am unteren Rand der DevTools sichtbar sein (siehe Screenshot).
Falls Sie einen anderen Abschnitt ausgewählt haben, klicken Sie auf „Stile“, um zum CSS-Code der Webseite zu gelangen.
Scrollen Sie durch den CSS-Code, bis Sie ein Farbfeld finden, das als Hintergrund oder Farbe unter einem Textabschnitt gekennzeichnet ist. Dieses Farbfeld ist der gesuchte Farbselektor.
Ein Klick auf dieses Farbfeld öffnet weitere Optionen (siehe folgenden Screenshot).
Damit haben Sie den Farbselektor in Ihrem Browser einsatzbereit.
Hier finden Sie den Hex-Code oder RGB-Wert der Farbe, und Sie können andere CSS-Elemente auswählen, um das Design der Webseite zu erkunden.
Funktionen des Chrome-Farbselektors
Der integrierte Farbselektor von Chrome liefert Ihnen, neben dem Hex-Code, weitere Informationen zur Farbbestimmung. Hier ist eine Übersicht der wichtigsten Funktionen:
Farbpaletten: Statt sich durch unzählige Farbtöne zu arbeiten, können Sie auf vordefinierte Farbpaletten zugreifen, um schnell Farbauswahlen zu treffen.
Farbformate: Sie können zwischen Hex-Code, RGBA- und HSLA-Farbwerten wechseln.
Pipette: Mit der Pipette können Sie auf der Webseite ein beliebiges Element auswählen, um den Hexadezimalcode seiner Farbe zu erhalten. Sie können die Pipette durch Klicken auf den Pipetten-Schalter aktivieren oder deaktivieren.
Zusätzliche Funktionen zur Farboptimierung:
- Kopieren in die Zwischenablage: Kopieren Sie den Farbcode schnell in Ihre Zwischenablage.
- Farbverlauf: Passen Sie den Farbton an und erkunden Sie verschiedene Farbkombinationen.
- Deckkraftsteuerung: Ändern Sie die Transparenz der Farbe, von solid bis minimal.
- Hintergrundfarbselektor: Wählen Sie eine geeignete Hintergrundfarbe für einen perfekten Kontrast.
- Kontrastverhältnis: Passen Sie den Kontrast an, um den Text oder das Element sichtbar zu machen.
Hinweis: Der Farbselektor ist nicht nur in Google Chrome, sondern auch in anderen Chrome-basierten Browsern, wie z.B. Brave, verfügbar.
Nutzung des Chrome-Farbselektors mit Google Slides
Sie können den Farbselektor in Google Slides verwenden, indem Sie mit der rechten Maustaste auf den Kopfbereich der Google Slides Webseite klicken. Obwohl Google Slides kein eigenes Farbselektor-Tool integriert hat, sollte dies ausreichend sein.
Wenn Sie die DevTools mit Google Slides nicht nutzen möchten, können Sie auch Chrome-Erweiterungen für diesen Zweck ausprobieren.
Chrome-Erweiterungen als Alternative zum Farbselektor
Obwohl Erweiterungen nützlich sein können, sollte man bedenken, dass sie möglicherweise nicht aktiv gewartet werden. Da sie Zugriff auf Ihre Browserdaten benötigen, ist Vorsicht bei der Installation geboten, auch bei den hier empfohlenen Erweiterungen.
Hier sind zwei beliebte Erweiterungen, die Sie ausprobieren könnten:
#1. ColorZilla
ColorZilla bietet alle Funktionen, die der integrierte Farbselektor von Chrome bereitstellt. Zusätzlich wird der Verlauf der zuletzt ausgewählten Farben gespeichert.
Diese Erweiterung ist also für eine Vielzahl von Anwendungsfällen nützlich, nicht nur für Google Slides.
#2. ColorPick Eyedropper
Falls Sie Schwierigkeiten mit dem Pipetten-Tool der DevTools haben, könnte ColorPick Eyedropper eine Alternative sein, um eine Pipette ohne Zugriff auf die Webtools zu erhalten.
Nach Auswahl einer Farbe werden der RGB-Wert und die Option zur Erstellung von Farbpaletten angezeigt. Ähnlich wie ColorZilla bietet auch diese Erweiterung einen Verlauf der ausgewählten Farben.
Fazit 🎨
Der Chrome DevTools Farbselektor ist ein sehr nützliches Werkzeug. Sie benötigen keine professionelle Software, um Farben und zugehörige Codes oder Werte zu identifizieren. Der integrierte Farbselektor von Chrome macht dies einfach, ohne dass Drittanbieter-Erweiterungen erforderlich sind.
Egal ob Grafikdesigner oder Webentwickler, die eine Website-Vorlage erstellen, jeder kann von diesem Tool profitieren.
Natürlich können Sie auch verfügbare Drittanbieter-Erweiterungen verwenden. Aber wenn Sie diese nicht benötigen, empfehlen wir Ihnen, die Funktionalitäten der DevTools voll auszuschöpfen.