PUR

Internet Color-Picker in Chrome nutzen

  • Von Michael Mierke
  • am

Es braucht nicht immer ein Add-on: In Google Chrome ist bereits ein Color-Picker integriert - wenn auch etwas versteckt.


Bild: Kenneth Summers/Shutterstock.com

Mithilfe eines Color-Pickers können die Farbwerte eines ausgewählten Punktes einer Webseite erfasst werden. Die Werte können in Chrome als RGB-, HEX- oder HSL-Format dargestellt werden, damit Sie garantiert die perfekte Farbe für Ihr eigenes Design finden. Es gibt mittlerweile unzählige Add-ons, die einen Color-Picker in Google Chrome hinzufügen. Dabei ist das gar nicht nötig: Etwas versteckt in den sogenannten Dev-Tools ist bereits die Funktion zur Farbauswahl integriert.

So nutzen Sie den integrierten Color-Picker in Chrome

Schauen Sie sich unsere Schritt-für-Schritt-Anleitung an oder lesen Sie die Kurzanleitung.

1. Schritt:

Um Google Chromes integrierten Color-Picker zu nutzen, öffnen Sie zunächst eine Webseite, deren Farben Sie auswählen möchten. Drücken Sie jetzt [F12], um die Dev-Tools (Entwickler-Tools) zu öffnen. Hier wählen Sie unten "Styles" aus.

2. Schritt:

Geben Sie anschließend in das Eingabefeld "Filter" den Begriff "color" ein. Ihnen werden nun automatisch alle Farbwerte der Webseite angezeigt.

3. Schritt:

Klicken Sie nun auf das Viereck neben einer beliebigen Farbe. In unserem Beispiel wäre es das Feld neben "transparent". Googles integrierter Color-Picker öffnet sich anschließend. Stellen Sie sicher, dass die Pipette blau erscheint – der Farbwähler also auch aktiviert ist.

4. Schritt:

Bewegen Sie den Color-Picker auf der Webseite über eine Farbe Ihrer Wahl und drücken Sie die linke Maustaste, um die Farbwerte im Color-Picker anzuzeigen. Über die Zoom-Funktion können Sie die gewünschte Farbe detaillierter erkennen und festlegen. Standardmäßig wird Ihnen der HEX-Wert für die Farbe angezeigt.

5. Schritt:

Benötigen Sie den RGB-Wert der Farbe für Ihr Design? Dann klicken Sie auf die Auswahlpfeile neben dem HEX-Wert, um zu RGB oder auch HSL-Werten zu wechseln. Abschließend können Sie die gewünschten Werte kopieren und für Ihr Projekt nutzen.

Kurzanleitung

  1. Öffnen Sie zunächst eine Webseite, deren Farben Sie auswählen möchten.
  2. Anschließend öffnen Sie Googles Dev-Tools über die Taste [F12].
  3. Nun wählen Sie unten "Styles" aus.
  4. Im Feld "Filter" geben Sie den Suchbegriff "color" ein.
  5. Im nächsten Schritt klicken Sie auf ein Viereck neben einer beliebigen Farbe, um den Color-Picker zu öffnen.
  6. Mit dem Color-Picker können Sie nun die gewünschte Farbe auf der Webseite mit einem linken Mausklick auswählen.
  7. Anschließend werden Ihnen automatisch die HEX-Werte der Farbe im Picker angezeigt.
  8. Über die Pfeile können Sie sich sowohl die RGB-Werte als auch die HSL-Werte der Farbe anzeigen lassen.

Mehr zum Thema: