Die digitale Welt übersetzt die Farben um uns herum in einfache Kombinationen aus Buchstaben und Zahlen. Um sich eine beliebige Farbe zu schnappen, müssen Sie sich nur den Code besorgen, und schon können Sie ihn reproduzieren.

Ist Ihnen beim Surfen im Internet eine bestimmte Farbe aufgefallen? Oder müssen Sie in Ihrem Design einen bestimmten Farbton verwenden, um die Einheitlichkeit zu gewährleisten? So erfassen Sie den RGB- oder HEX-Code eines beliebigen Pixels auf Ihrem Bildschirm.
Identifizieren Sie den RGB- oder HEX-Wert der Farbe auf dem Bildschirm
Um den RGB- oder HEX-Wert einer Farbe auf Ihrem Bildschirm zu identifizieren, sind weder ein Expertenauge noch ein teures Werkzeug erforderlich. Auf dem PC gibt es mehrere einfache Möglichkeiten, Ihren Farbcode zu erhalten.
Verwenden Sie eine PC-App

Die erste Möglichkeit, eine beliebige Farbe von Ihrem Bildschirm aufzunehmen, ist die Verwendung einer Computer-App. Möglicherweise haben Sie diese App bereits auf Ihrem PC.
Instant Eyedropper für Windows

Wenn Sie häufig auf Farbcodes zugreifen müssen, wird es Ihnen das Leben leichter machen, wenn Sie ein einfaches Werkzeug zur Hand haben. Instant Eyedropper ist ab sofort eine kostenlose App exklusiv für Windows.
Sobald Sie es installiert haben, können Sie über die Taskleiste darauf zugreifen. Halten Sie einfach die linke Maustaste auf der Farbe Ihrer Wahl gedrückt und lassen Sie sie dann los. Die App kopiert den Farbcode sofort in Ihre Zwischenablage und Sie können ihn in das gewünschte Programm einfügen. Instant Eyedropper funktioniert unter Windows XP-10.
Digitales Farbmessgerät für Mac
Digital Color Meter ist ein ähnliches Tool, das auf Mac-Geräten vorinstalliert ist. Öffnen Sie Ihren Anwendungsordner und suchen Sie nach Dienstprogrammen. Das Tool „Digital Color Meter“ sollte genau dort sein.
Wenn Sie diese App ausführen, verwandelt sich Ihr Cursor in eine Pipette, mit der Sie jede beliebige Farbe von Ihrem Bildschirm aufnehmen können. Die App zeigt standardmäßig die RGB-Werte an. Sie können diese kopieren und später in HEX konvertieren oder die Optionen anpassen, um genau die gewünschte Farbe zu erhalten.
SIP für Mac
Wenn Sie ein erweitertes Tool benötigen, können Sie sich SIP ansehen, das für Mac verfügbar ist. SIP ist mehr als ein Farbwähler. Es bietet außerdem eine Reihe erweiterter Funktionen, die jeder Webdesigner zu schätzen wissen wird. Sie können Ihre Farben einfach bearbeiten, in Paletten organisieren und ihre Formate an Ihre Bedürfnisse anpassen.
Leider ist SIP kein kostenloses Tool, es wird jedoch eine kostenlose Testversion angeboten. Sie können es ausprobieren, um zu sehen, ob die zusätzlichen Funktionen Ihr Geld wert sind.
Der Vorteil dieser Desktop-Apps besteht darin, dass sie Farben von praktisch jedem Teil Ihres Bildschirms erfassen können. Die folgenden Browser-Tools können dies nur innerhalb von Webseiten tun. Natürlich können Sie diese Einschränkung umgehen, indem Sie ein Foto oder einen Screenshot hochladen, um es in Ihrem Browser anzuzeigen.
Verwenden Sie Ihren Browser
Der folgende unkomplizierte Weg, die RGB- oder HEX-Codefarbe zu erhalten, besteht einfach darin, die integrierten Tools Ihres Browsers zu verwenden. Sie können Farben nur auf der jeweiligen Webseite auswählen, können dafür jedoch sowohl Firefox als auch Chrome verwenden.
Hier finden Sie das Farbauswahltool von Firefox:
- Starten Sie Firefox und öffnen Sie die Website, von der Sie einen Farbcode extrahieren möchten.

- Klicken Sie oben rechts auf das Menü Ihres Browsers (drei horizontale Linien).

- Unter den Optionen finden Sie die Web Developer Tools. Möglicherweise befindet es sich unter „Weitere Tools“.


- Unten auf der Seite öffnet sich ein Fenster. Suchen Sie nach dem Pipettensymbol und Sie können Farbcodes mit einem Klick kopieren.

Die Schritte sind in Chrome ähnlich:
- Starten Sie Chrome und öffnen Sie die gewünschte Website.


- Klicken Sie auf das Menü (drei vertikale Punkte) in der oberen rechten Ecke und suchen Sie unter „Weitere Tools“ nach „Entwicklertools“.

- Auf der rechten Seite der Seite öffnet sich ein Fenster. Suchen Sie im zweiten Abschnitt nach „Stile“ und klicken Sie darauf.

- Unter „Körper“ sehen Sie eine Reihe farbiger Kästchen. Klicken Sie auf eine davon, um den Farbwähler zu aktivieren.

Tipp: Sie können die Entwicklertools auch in beiden Browsern öffnen, indem Sie mit der rechten Maustaste auf eine beliebige Seite klicken und „Inspizieren“ wählen.
Verwenden Sie eine Browser-Erweiterung
Neben den Entwicklertools können Sie auch praktische Browsererweiterungen verwenden, um eine beliebige Farbe von einer Webseite auszuwählen. Schauen Sie sich die folgenden Erweiterungen an, die alle den Job erledigen:
Verwenden Sie eine Website
Sie benötigen nicht unbedingt eine App oder Erweiterung, um den RGB- oder HEX-Code für eine Farbe zu identifizieren. Wenn Sie ein bestimmtes Bild haben, aus dem Sie eine Farbe übernehmen möchten, können Sie auch eine Website verwenden. Auf unzähligen Websites können Sie ein Foto hochladen, einen Farbcode extrahieren oder sogar eine harmonische Palette erstellen.
PineTools-Bildfarbauswahl

Suchen Sie auf der PineTools- Website nach dem Image Color Picker-Tool und laden Sie Ihr Bild hoch. Zoomen Sie bei Bedarf hinein, um das Pixel zu finden, das Sie aufnehmen möchten. Mit einem einfachen Klick erhalten Sie die RGB-Werte und den HEX-Code.
Bildfarbauswahl

Die Image Color Picker- Website bietet mehrere andere Optionen als nur das Hochladen von Bildern. Klicken Sie auf „Ihr Bild verwenden“ und wählen Sie aus, wo Sie ein Bild importieren möchten. Sie können für eine bestimmte Farbe auf einen beliebigen Teil des Bildes klicken, die Website schlägt jedoch auch eine auf dem Bild basierende Farbpalette vor.
Bildfarbfinder

Neben einem einfachen Farbwähler kann Image Color Finder auch als kreatives Werkzeug fungieren. Sie können das hochgeladene Bild verpixeln, um einen besseren Überblick über seine Farben zu erhalten, und so weit hineinzoomen, wie Sie möchten. Die Seite schlägt auch automatisch ein paar Farben vor.
Mach ein Bildschirmfoto
Schließlich können Sie den Farbcode ohne alle oben genannten Werkzeuge identifizieren. Stattdessen machen Sie einen Screenshot und wählen dort die Farbe aus.
- Stellen Sie sicher, dass die Farbe, die Sie auswählen möchten, auf Ihrem Bildschirm sichtbar ist.
- Erstellen Sie einen Screenshot, indem Sie unter Windows die Taste „Bildschirm drucken“ (PrntScr, PrtScn usw.) Ihrer Tastatur drücken oder auf dem Mac gleichzeitig „Umschalt + Befehl + 3“ gedrückt halten. Ihr Screenshot wird automatisch in Ihre Zwischenablage kopiert.

Tipp: Sie können auch nur einen Teil Ihres Bildschirms erfassen. Öffnen Sie unter Windows das Snipping Tool über das Startmenü. Verwenden Sie auf dem Mac die Tastenkombination „Umschalt + Befehl + 4“.
- Öffnen Sie MS Paint (oder eine andere Bildverarbeitungs-App) und fügen Sie den Screenshot ein.
- Suchen Sie die Pipette und wählen Sie eine Farbe aus.

- Klicken Sie in MS Paint neben der Farbpalette auf „Farben bearbeiten“. Unter dem Schieberegler sehen Sie die RGB-Werte Ihrer aktuellen Farbe.
Um diese Zahlen in einen HEX-Code umzuwandeln, benötigen Sie die Hilfe einer Website.
- Gehen Sie zu RGB zu HEX und geben Sie die Werte in die entsprechenden Felder ein.

- Klicken Sie auf „In Hex konvertieren“ und Sie erhalten Ihren Code.

Zusätzliche FAQs
Was ist der Unterschied zwischen RGB und HEX? Welches brauche ich?
RGB- und HEX-Codes drücken die gleichen Farben aus. Der Code, den Sie benötigen, hängt jedoch von der beabsichtigten Verwendung ab. RGB-Codes geben Ihrem Bildschirm an, wie viel rotes, grünes und blaues Licht abgegeben werden muss, um die gewünschte Farbe zu erzeugen. HEX-Codes übertragen dieselben Informationen, jedoch in der Sprache der Codierung.
Ein Designer oder Entwickler benötigt höchstwahrscheinlich die HEX-Farbcodes.
Wie identifiziere ich eine Farbe auf einem Mobilgerät?
Um eine Farbe auf dem Bildschirm Ihres Mobilgeräts auszuwählen, können Sie eine App herunterladen oder eine der oben genannten Websites verwenden. Im Markup-Tool gibt es auch ein Farbauswahl-Tool für iOS. Es kann Ihnen auch den HEX-Farbcode liefern.
Holen Sie sich mit nur einem Klick jede Farbe, die Sie sehen
Durch die Verwendung der RGB- oder HEX-Farbcodes wird sichergestellt, dass Fehler ausgeschlossen sind. Dank dieser universellen Farbsprachen können Sie Ihre Designs mit den gleichen Farbtönen konsistent halten. Da es viele Möglichkeiten gibt, den Farbcode auf dem Bildschirm zu extrahieren, müssen Sie nur die für Sie einfachste Methode finden.
Welches Farbauswahltool bevorzugen Sie? Oder möchten Sie eine andere vertrauenswürdige Methode hinzufügen? Lassen Sie es uns unten wissen.