Ihr seht eine Farbe auf einer Website, in einer App oder irgendwo auf dem Bildschirm – und wollt wissen, welcher Hex-Code dahintersteckt. Das passiert Designern und Entwicklern täglich, aber auch allen anderen, die Websites pflegen, Präsentationen bauen oder einfach eine bestimmte Farbe wiederverwenden wollen. Die gute Nachricht: Es gibt für jeden Workflow das passende Tool, und die meisten sind kostenlos.
Was ist ein Hex-Code – und wann braucht ihr RGB?
Ein Hex-Code ist eine sechsstellige Zeichenkombination, die eine Farbe eindeutig beschreibt – zum Beispiel #3a86ff für ein bestimmtes Blau. Er setzt sich aus drei Farbkanälen zusammen: Rot, Grün und Blau, jeweils als Hexadezimalwert von 00 bis FF.
RGB funktioniert nach demselben Prinzip, schreibt die Werte aber als Dezimalzahlen: rgb(58, 134, 255). Welches Format ihr braucht, hängt vom Einsatzort ab.
Farbformate im Vergleich
| Format | Typischer Einsatz |
|---|---|
#3a86ff — Hex | CSS, HTML, Design-Tools |
rgb(58, 134, 255) — RGB | CSS, Bildbearbeitung |
hsl(217, 100%, 61%) — HSL | CSS, wenn Farbton-Anpassungen geplant sind |
Farbe von einer Website herausfinden – direkt im Browser
Für Farben auf Websites braucht ihr oft gar kein externes Tool. Die Browser-Entwicklertools reichen in den meisten Fällen aus.
Chrome und Edge:
- Rechtsklick auf das Element mit der gewünschten Farbe → Untersuchen
- Im Styles-Panel findet ihr die CSS-Eigenschaften – Hintergrundfarben, Textfarben, Border-Farben
- Klickt ihr auf das kleine Farbfeld neben dem Hex-Code, öffnet sich ein Color Picker direkt im Browser
Firefox: Gleicher Weg über Untersuchen → im Rule-Panel auf das Farbfeld klicken → Firefox zeigt Hex, RGB und HSL gleichzeitig an.
Das funktioniert zuverlässig für alles, was als CSS-Eigenschaft definiert ist. Bei Farben in Bildern oder komplexen Grafiken stoßt ihr damit an Grenzen – dafür gibt es die Tools weiter unten.
Color Picker Tools im Vergleich
Wer regelmäßig Farben von überall auf dem Bildschirm auslesen will – nicht nur von Websites – braucht ein dediziertes Tool. Die wichtigsten im Überblick:
Color Picker Tools im Vergleich
| Tool | Plattform | Kosten | Besonderheit |
|---|---|---|---|
| Pick Color Online | Web | Kostenlos | Keine Installation, sofort nutzbar |
| PowerToys (Color Picker) | Windows | Kostenlos | Microsoft-Tool, systemweit verfügbar |
| Eyedropper | Windows | Kostenlos | Leichtgewichtig, Taskleisten-Integration |
| Digital Color Meter | macOS | Kostenlos | Vorinstalliert, grundlegende Funktion |
| SIP | macOS | Kostenlos / 9,99 $ | 49 Farbformate, Palette-Verwaltung |
| ColorZilla | Chrome / Firefox | Kostenlos | Browser-Extension, kein separates Programm |
Pick Color Online (Web)
Wer einmal schnell eine Farbe auslesen will, ohne irgendetwas zu installieren, ist mit Pick Color Online gut bedient. Das Tool läuft komplett im Browser – ihr öffnet es, ordnet die Fenster nebeneinander an und klickt auf die Farbe eurer Wahl. Hex-Code erscheint sofort. Mehr braucht es dafür nicht.
Eyedropper (Windows) – PowerToys und Eyedropper
Microsoft liefert mit PowerToys einen systemweiten Color Picker mit, der per Tastenkürzel (Win + Shift + C) von überall aufrufbar ist. Ihr klickt auf eine beliebige Stelle des Bildschirms und bekommt den Hex-Code, RGB-Wert und weitere Formate direkt angezeigt. PowerToys ist kostenlos und wird aktiv von Microsoft weiterentwickelt.
Eyedropper ist die schlankere Alternative: kleines Icon in der Taskleiste, Klick gedrückt halten, Maus auf die Zielfarbe ziehen – fertig. Für alle, die kein komplettes PowerToys-Paket wollen, ist das die unkomplizierteste Lösung.
SIP (MacOS) Farben erkennen auf dem Mac – Digital Color Meter und SIP
macOS bringt den Digital Color Meter bereits vorinstalliert mit (zu finden über die Spotlight-Suche). Er zeigt den Farbwert an, auf den ihr mit der Maus zeigt – simpel, aber funktional für gelegentliche Nutzung.
SIP geht deutlich weiter: Das Tool unterstützt 49 Farbformate, verwaltet Farbpaletten und lässt sich in Photoshop und Illustrator integrieren. Wer täglich mit Farben arbeitet und Sammlungen anlegen will, ist mit SIP besser aufgestellt. Die Basisversion ist kostenlos, die Pro-Version kostet einmalig 9,99 Dollar.
ColorZilla – Color Picker als Browser-Extension
ColorZilla gibt es für Chrome und Firefox. Nach der Installation erscheint ein Icon in der Browser-Toolbar – klicken, auf die gewünschte Stelle im Browser zeigen, Hex-Code ablesen. Das Tool funktioniert gut, ist aber auf den Browser beschränkt. Farben außerhalb des Browsers kann es nicht auslesen.
Wer seinen Browser ohnehin nicht mit Extensions beladen will, greift lieber zu einem der Desktop-Tools.
Welches Tool passt zu euch?
| Situation | Empfehlung |
|---|---|
| Einmalig, keine Installation | Pick Color Online |
| Windows, täglich, systemweit | PowerToys Color Picker |
| Windows, minimalistisch | Eyedropper |
| Mac, gelegentlich | Digital Color Meter |
| Mac, professionell / Paletten | SIP |
| Nur Browser-Farben | ColorZilla |
| Farbe von Website per CSS | Browser DevTools |
Fazit
Farben auf dem Bildschirm zu erkennen ist kein Nischenproblem. Wer regelmäßig mit Websites, Design oder digitalen Inhalten arbeitet, braucht einen schnellen Weg zum Hex-Code. Browser DevTools lösen das für Website-Farben meist direkt. Für alles andere gibt es leichtgewichtige Tools, die sich in Sekunden einrichten lassen – kostenlos, systemweit, ohne Umwege.
