Color Picker: Farben vom Bildschirm aufnehmen

Was ist Color Picker?

Color Picker ist ein kostenloses, browserbasiertes Tool, mit dem du per EyeDropper-API jede Farbe von deinem Bildschirm aufnehmen oder Farbwerte in HEX, RGB oder HSL manuell eingeben kannst, um sie sofort in alle gängigen Farbmodelle umzurechnen. Designer nutzen es, wenn sie eine Farbe aus einem Screenshot, einer Website oder einem Design-Mockup abgleichen müssen, ohne schwere Desktop-Software zu öffnen. Anders als native Betriebssystem-Farbwähler konvertiert dieses Tool sofort zwischen HEX, RGB, HSL, HSB und CMYK in einer einzigen Oberfläche – kein Login, keine Installation, keine Daten verlassen deinen Browser.

Hauptfunktionen

• Farben von überall auf dem Bildschirm aufnehmen — Die EyeDropper-API aktiviert einen systemweiten Farbsampler in Chrome, Edge und anderen modernen Chromium-Browsern. Klicke auf einen beliebigen Pixel und die Farbe wird sofort in das Tool geladen.
• EyeDropper-API-Unterstützung in modernen Browsern — Das Tool erkennt die API-Verfügbarkeit zur Laufzeit. Auf nicht unterstützten Browsern erscheint eine klare Meldung statt eines defekten Buttons.
• Konvertierung zwischen HEX, RGB, HSL, HSB, CMYK — Das Panel „All Formats" zeigt alle Darstellungen gleichzeitig. Eine Änderung eines Eingabefelds aktualisiert alle anderen in Echtzeit.
• Farbwerte in die Zwischenablage kopieren — Jedes Format hat einen eigenen Kopier-Button. Ein Häkchen ersetzt das Kopier-Symbol für zwei Sekunden, um das erfolgreiche Kopieren zu bestätigen.
• Farbverlauf (Supporter-Funktion) — Bis zu 50 zuletzt verwendete Farben werden in IndexedDB gespeichert und als anklickbare Farbfelder angezeigt. Der Verlauf bleibt nach dem Neuladen der Seite erhalten. Erfordert ein Ko-fi-Supporter-Abonnement.
• Funktioniert offline nach dem Laden — Die gesamte Konvertierungslogik läuft in JavaScript. Sobald die Seite geladen ist, kannst du das Internet trennen und das Tool funktioniert weiterhin.

So verwendest du Color Picker

Schritt 1: Tool öffnen und Eingabemethode wählen

Navigiere zu Color Picker. Das Tool öffnet sich mit der Standardfarbe #3B82F6 (ein mittleres Blau). Du hast drei Möglichkeiten, eine Farbe festzulegen:

• Klicke auf den Button Pick From Screen (Pipetten-Symbol), um die EyeDropper-API zu verwenden
• Klicke auf das kleine Farbfeld-Eingabeelement oben rechts im Picker-Panel, um das native Farbrad deines Browsers zu öffnen
• Tippe direkt in die Eingabefelder HEX, R/G/B oder H/S/L

Schritt 2: Farbe vom Bildschirm aufnehmen (EyeDropper-Methode)

Klicke auf Pick From Screen. Die Beschriftung des Buttons wechselt zu „Picking...", während der EyeDropper aktiv ist. Dein Cursor wird zum Fadenkreuz-Vergrößerer. Klicke auf einen beliebigen Pixel auf deinem Bildschirm – auch auf Pixel außerhalb des Browserfensters auf den meisten Systemen. Das Tool erfasst den Hex-Wert, aktualisiert alle Formatfelder und zeigt eine Erfolgs-Benachrichtigung. Die aufgenommene Farbe wird automatisch zum Verlaufspanel hinzugefügt.

Schritt 3: Farbwert manuell eingeben oder anpassen

Wenn du den Farbwert bereits kennst, tippe ihn in ein beliebiges Eingabefeld. Das HEX-Feld akzeptiert Werte mit oder ohne #-Präfix. RGB-Eingaben akzeptieren ganze Zahlen von 0 bis 255. HSL akzeptiert H (0–360), S (0–100) und L (0–100). Jede Feldänderung berechnet die anderen beiden Formate neu und aktualisiert sie gleichzeitig.

Schritt 4: Alle Farbformatkonvertierungen anzeigen

Scrolle zur Karte All Formats unterhalb des Hauptpickers. Dieses Panel zeigt den vollständigen Satz an Konvertierungen: HEX, RGB, HSL, HSB und CMYK. Jede Zeile hat einen eigenen Kopier-Button. Klicke auf das Kopier-Symbol neben einem Format, um diesen Wert in die Zwischenablage zu schreiben.

Schritt 5: Farben aus dem Verlauf wiederverwenden

Zuvor ausgewählte Farben erscheinen als farbige Farbfelder im Panel Recent Colors. Klicke auf ein beliebiges Farbfeld, um diese Farbe wieder in den Picker und die Formatfelder zu laden. Verwende den Button Clear (Papierkorb-Symbol), um den Verlauf bei Bedarf zu leeren.

Praktische Beispiele

Markenfarbe von einer Website abgleichen

Du baust eine Landing Page und musst das exakte Lila aus dem Logo eines Kunden abgleichen, das in einem Browser-Tab angezeigt wird. Klicke auf Pick From Screen, fahre über das Logo und klicke. Das Tool erfasst den Hex-Wert – z. B. #6B21A8 – und zeigt sofort rgb(107, 33, 168) und hsl(276, 61%, 40%). Kopiere das Format, das deine CSS-Datei verwendet.

Figma-Farbe in CSS konvertieren

Deine Figma-Design-Spezifikation listet eine Farbe als rgb(234, 179, 8). Tippe 234 in das R-Feld, 179 in G und 8 in B. Das HEX-Feld aktualisiert sich auf #EAB308 und HSL zeigt hsl(45, 93%, 47%). Kopiere den HEX-Wert für eine Tailwind-Klasse wie bg-[#EAB308] oder das HSL für eine CSS-Custom-Property.

Visualisieren, wie ein Hex-Code aussieht

In einem Code-Review steht background: #1E3A5F und du möchtest es visualisieren. Füge den Wert in das HEX-Feld ein. Das große Farbvorschau-Feld füllt sich mit der Farbe (einem dunklen Marineblau) und die Beschriftungstextfarbe passt sich automatisch zwischen Schwarz und Weiß für Lesbarkeit an. Du kannst es mit anderen Farben aus den Verlaufs-Farbfeldern vergleichen.

Tipps und Best Practices

Verwende das Verlaufspanel als temporäre Palette (Supporter-Funktion). Das Tool speichert bis zu 50 Farben in IndexedDB für Premium-Supporter. Erstelle eine kleine Palette, indem du Farben eine nach der anderen aufnimmst oder eingibst – jede wird zu einem anklickbaren Farbfeld, zu dem du ohne Notieren zurückkehren kannst.

Der EyeDropper funktioniert auf jedem Pixel, auch bei Video-Frames. Pausiere ein Video bei dem Frame mit deiner Zielfarbe und verwende dann Pick From Screen. Die API nimmt den gerenderten Pixel auf, nicht die komprimierte Quelle.

Tippe HSL-Werte für präzise Kontrolle. Wenn du eine bestimmte Farbe bei geringerer Sättigung möchtest, tippe direkt in die H- und S-Felder. HSL ist intuitiver für Anpassungen wie „gleiche Farbe, 20% heller" (L um 20 erhöhen).

Teilbare URLs kodieren die aktuelle Farbe. Das Tool verwendet einen teilbaren Zustands-Hook – dein aktueller HEX-Wert wird in der Seiten-URL kodiert. Kopiere die Browser-URL, um eine bestimmte Farbe an einen Kollegen zu senden.

Verlauf vor der Geräteweitergabe leeren. Wenn du Farben aufnimmst, die vertrauliche Design-Assets enthalten, verwende den Clear-Button im Verlaufspanel, um sie vor der Geräteweitergabe aus IndexedDB zu entfernen.

Häufige Probleme und Fehlerbehebung

Meldung „EyeDropper nicht unterstützt" erscheint. Die EyeDropper-API erfordert einen Chromium-basierten Browser (Chrome 95+, Edge 95+). Firefox und Safari unterstützen sie ab Anfang 2026 nicht. Verwende auf nicht unterstützten Browsern das native Farbfeld-Element oder tippe den Wert manuell ein.

HEX-Eingabe zeigt nach dem Tippen keine Aktualisierung. Das Feld erfordert einen gültigen 3-, 4-, 6- oder 8-stelligen Hex-Code, mit oder ohne #. Teilwerte wie #3B werden im Eingabefeld akzeptiert, aber die Konvertierung wird erst ausgelöst, wenn ein vollständiger gültiger Code vorhanden ist.

RGB-Werte außerhalb des Bereichs. Jedes R-, G-, B-Feld ist auf 0–255 begrenzt. Ein Wert über 255 wird beim Verlassen des Feldes auf 255 korrigiert. Der parseInt-Fallback bedeutet, dass nicht numerische Zeichen zu 0 aufgelöst werden.

Kopiertes Format zeigt falschen Wert. Jeder Kopier-Button kopiert seinen spezifischen Format-String. Stelle sicher, dass du das Kopier-Symbol in der Zeile des All-Formats-Panels anklickst, die dem benötigten Format entspricht, und nicht das in der Haupt-HEX-Eingabezeile.

Verlauf bleibt nach dem Neuladen nicht erhalten. Der Verlauf ist eine nur für Supporter verfügbare Funktion, die IndexedDB verwendet. Wenn du kein Premium-Supporter bist, zeichnet das Verlaufspanel keine Einträge auf. Wenn IndexedDB deaktiviert oder im privaten/Inkognito-Modus nicht verfügbar ist, erscheint das Verlaufspanel bei jedem Besuch leer. Das Tool behandelt dies still – Verlaufsfunktionen sind in diesem Kontext einfach nicht verfügbar.

Datenschutz und Sicherheit

Color Picker verarbeitet alles lokal in deinem Browser mit JavaScript. Keine Farbwerte, keine Bildschirminhalte und keine Nutzungsdaten werden an einen Server übertragen. Die EyeDropper-API erfasst nur den einzelnen Pixel, auf den du klickst – es erfolgt kein Screenshot oder keine Bildschirmaufnahme. Der Farbverlauf wird in der IndexedDB deines Browsers gespeichert, nicht in einer externen Datenbank. Das Tool funktioniert vollständig offline, sobald die Seite geladen ist, und kann sicher mit vertraulichen Design-Assets verwendet werden.

Häufig gestellte Fragen

Ist Color Picker kostenlos?

Ja, Color Picker ist völlig kostenlos ohne Anmeldung. Die Kernfunktionen – EyeDropper-Aufnahme, Mehrformat-Konvertierung und Zwischenablage-Kopierung – sind alle ohne Supporter-Konto verfügbar. Premium-Supporter-Funktionen wie Farbverlauf, Voreinstellungen und Tool-Notizen sind mit einem Ko-fi-Supporter-Abonnement verfügbar.

Funktioniert Color Picker offline?

Ja. Sobald die Seite geladen ist, funktioniert Color Picker ohne Internetverbindung. Die gesamte Farbkonvertierungslogik ist in JavaScript implementiert, das in deinem Browser läuft. Die EyeDropper-API ist ebenfalls eine browsereigene Funktion, die keinen Netzwerkzugriff erfordert.

Sind meine Daten bei Color Picker sicher?

Ja. Keine Farbdaten oder Bildschirminhalte verlassen deinen Browser. Die EyeDropper-API erfasst einen Pixelwert in dem Moment, in dem du klickst – sie macht keine Screenshots und zeichnet deinen Bildschirm nicht auf. Der Farbverlauf wird nur in der IndexedDB deines Browsers gespeichert. Glyph Widgets hat keine serverseitige Sichtbarkeit darauf, welche Farben du auswählst.

Welche Browser unterstützen den EyeDropper-Button?

Die EyeDropper-API funktioniert in Chrome 95 und höher, Edge 95 und höher sowie anderen Chromium-basierten Browsern. Sie wird in Firefox oder Safari nicht unterstützt. Das Tool erkennt die Unterstützung zur Laufzeit und zeigt auf nicht unterstützten Browsern eine klare Meldung statt eines defekten Buttons.

Welche Farbformate gibt das Tool aus?

Das Tool konvertiert in und zeigt HEX (z. B. #3B82F6), RGB (z. B. rgb(59, 130, 246)), HSL (z. B. hsl(217, 91%, 60%)), HSB (auch HSV genannt) und CMYK an. Das All-Formats-Panel zeigt alle fünf gleichzeitig und bietet individuelle Kopier-Buttons für jedes.

Kann ich einen Farbwert ohne den EyeDropper eingeben?

Ja. Du kannst direkt in die HEX-, R/G/B- oder H/S/L-Eingabefelder tippen. Du kannst auch auf die kleine native Farbeingabe (das farbige Quadrat neben dem Button Pick From Screen) klicken, um das integrierte Farbrad deines Browsers zu öffnen. Alle drei Eingabemethoden aktualisieren den gleichen internen Farbzustand.

Wie viele Farben speichert das Verlaufspanel?

Das Verlaufspanel speichert bis zu 50 Farben (Supporter-Funktion). Wenn das Limit erreicht ist, wird der älteste Eintrag entfernt. Der Verlauf wird in IndexedDB gespeichert und bleibt über Browser-Sitzungen hinweg erhalten. Diese Funktion erfordert ein Ko-fi-Supporter-Abonnement.

Kann ich eine bestimmte Farbe mit jemandem teilen?

Ja. Die aktuelle Farbe wird als teilbarer Zustand in der Seiten-URL kodiert. Kopiere die URL aus der Adressleiste deines Browsers, nachdem du eine Farbe ausgewählt hast. Wenn dein Kollege den Link öffnet, lädt das Tool mit dieser vorausgewählten Farbe und zeigt eine „Loaded from share"-Benachrichtigung. Du kannst auch die Share-Buttons am unteren Seitenrand verwenden, um direkt auf Twitter, LinkedIn oder Reddit zu posten.

Funktioniert das Tool mit Alpha-/Transparenzwerten?

Das aktuelle Tool arbeitet hauptsächlich mit vollständig undurchsichtigen Farben. Das HEX-Eingabefeld akzeptiert 3-, 4-, 6- und 8-stellige Hex-Codes (4- und 8-stellige Codes enthalten einen Alpha-Kanal), aber die RGB- und HSL-Eingaben bieten keinen separaten Alpha-Schieberegler. Wenn du RGBA- oder HSLA-Werte benötigst, können die angezeigten RGB- und HSL-Werte manuell mit deinem gewünschten Alpha-Wert ergänzt werden.

Was passiert, wenn ich einen ungültigen Hex-Code eingebe?

Das HEX-Eingabefeld akzeptiert beim Tippen teilweise oder ungültige Werte. Die Farbkonvertierung wird nur aktualisiert, wenn ein gültiger Hex-Code vorhanden ist (3, 4, 6 oder 8 Zeichen, mit oder ohne #). Teilwerte verursachen keine Fehler – die Anzeige behält einfach die letzte gültige Farbe.

Verwandte Tools

• Contrast Checker — Prüfe, ob deine gewählten Vordergrund- und Hintergrundfarben die WCAG-2.1-Zugänglichkeitsstandards erfüllen, nachdem du sie mit Color Picker ausgewählt hast.
• Color Converter — Konvertiere zwischen zusätzlichen Farbformaten, die im Haupt-Picker nicht angezeigt werden.
• Demnächst verfügbar: Palette Generator — Generiere eine vollständige Farbpalette ausgehend vom aufgenommenen Hex-Wert.
• Demnächst verfügbar: Gradient Generator — Verwende die aufgenommenen Farben, um CSS-Farbverläufe mit einem visuellen Editor zu erstellen.

Color Picker jetzt ausprobieren: Glyph Widgets Color Picker