Bild-Farbpicker

Laden Sie das Bild hier hoch oder fügen Sie es ein und klicken Sie auf den gewünschten Pixel — das Tool liest ihn über die HTML-Canvas-API aus und zeigt HEX, RGB und HSL sofort an, wobei der HEX-Code in die Zwischenablage kopiert wird. Die Zoom-Lupe zeigt einzelne Pixel um den Cursor, damit genau der richtige getroffen wird. Der Datei-Upload auf einen Server findet zu keinem Zeitpunkt statt; alles läuft im Browser über die HTML5-Canvas-API. Das macht es sofort, privat und nach dem ersten Laden auch offline nutzbar. Für schwer treffbare Bereiche wie geglätteten Text oder Logo-Kanten empfiehlt es sich, vor dem Klicken mit der Browser-Zoom-Funktion heranzuzoomen.

Nutzen Sie diesen kostenlosen browser-basierten Eyedropper: Bild einfügen, Pixel anklicken und Code kopieren. Keine Installation, keine Registrierung. Anders als Adobe Photoshop oder Illustrator — beide ab ca. 20 €/Monat — ist dieses Tool vollständig kostenlos. Anders als macOS Digital Color Meter oder Windows PowerToys Color Picker extrahiert es außerdem automatisch die dominante Farbpalette des Bildes, sodass alle Hauptfarben auf einen Blick vorhanden sind, statt jeden Pixel einzeln anklicken zu müssen. imagecolorpicker.com ist die bekannteste dedizierte Alternative, lädt Ihre Datei jedoch auf einen Server hoch — dieses Tool tut das nicht.

Beide kodieren dieselbe Farbe auf unterschiedliche Weise. HEX schreibt Rot/Grün/Blau als drei hexadezimale Paare (#FF5733) und ist der Standard in CSS und Webdesign; RGB verwendet drei Dezimalzahlen von 0–255 — rgb(255, 87, 51) — üblich in Bildbearbeitungsprogrammen und Code. Die Konvertierung zwischen beiden ist verlustfrei, und dieses Tool zeigt beide Formate für jeden angeklickten Pixel. Verwenden Sie HEX beim Schreiben von CSS oder Tailwind-Klassen; verwenden Sie RGB bei der Arbeit mit Canvas, WebGL oder Bildverarbeitungs-Code, der numerische Kanäle erwartet. Beide Formate beschreiben denselben sRGB-Farbpunkt.

HSL beschreibt eine Farbe durch Farbton (0–360°), Sättigung und Helligkeit — was für das Anpassen von Farben intuitiver ist. Eine Farbe lässt sich heller oder weniger gesättigt machen, ohne ihren Farbton zu verändern. CSS unterstützt hsl() nativ, weshalb Designer bei der Palettenentwicklung oft in HSL arbeiten: Helligkeit anheben für eine Tönung, absenken für einen Schatten. Der Picker zeigt HEX, RGB und HSL für jeden Pixel, sodass das jeweils passende Format für den eigenen Workflow kopiert werden kann. Für Figma, Sketch oder Adobe XD ist HEX meist das schnellste Format zum Einfügen; für Tailwind oder CSS Custom Properties funktionieren sowohl HEX als auch HSL gut.

Foto einfach laden — die dominante Palette erscheint automatisch. Das Tool quantisiert die Bildpixel in Cluster und sortiert sie nach Häufigkeit, sodass die acht dominantesten Farben als Farbfelder mit HEX-Codes ausgegeben werden. Auf ein Farbfeld klicken zum Kopieren, oder die gesamte Palette auf einmal kopieren. Adobe Color und Canvas Paletten-Generator bieten dasselbe, erfordern jedoch ein Konto; Coolors.co kann Paletten aus Fotos generieren, sendet das Bild aber an seinen Server. Hier läuft die Paletten-Extraktion vollständig im Browser — kein Upload, kein Konto erforderlich, keine Werbung, die den Workflow unterbricht.

Das Bild wird auf ein HTML-Canvas-Element im Browser gezeichnet; ein Klick liest die Rot-, Grün- und Blau-Werte des Pixels über die getImageData-API aus und konvertiert sie in HEX, RGB und HSL. Da Canvas lokal läuft, ist kein Server beteiligt. Die Vergrößerungs-Lupe verwendet ein zweites Canvas-Element, um den Pixelbereich um den Cursor zu zoomen, sodass auch auf Bildern mit feinen Details wie geglättetem Text, Logo-Kanten oder fotografischen Farbverläufen exakt der richtige Pixel angesteuert werden kann.

Bei diesem Tool ja — das Bild wird ausschließlich in den Browser-Arbeitsspeicher geladen und nirgendwo übertragen. Sie können dies im Netzwerk-Tab Ihres Browsers überprüfen: nach dem Laden der Seite werden keine weiteren Anfragen gestellt. Das ist wichtig für unveröffentlichte Designs, Kundenlogos und private Fotos. Viele upload-basierte Picker — darunter imagecolorpicker.com und einige Canva-Funktionen — senden Ihre Datei an einen Server und speichern sie vorübergehend. Dieses Tool verarbeitet alles lokal, sodass Ihre Dateien auf Ihrem Gerät verbleiben und beim Schließen des Tabs verschwunden sind.

Ja — die Schaltfläche "Vom Bildschirm aufnehmen" nutzt die EyeDropper-API (unterstützt in Chrome und Edge), um jeden Pixel auf dem gesamten Bildschirm aufzunehmen, einschließlich anderer Fenster, Apps und Browser-Tabs. Die ausgewählte Farbe erscheint im selben HEX/RGB/HSL-Panel und Verlauf wie Bildauswahlen. Für Browser ohne API-Unterstützung (Safari, Firefox) schließt der Einfüge-Workflow die Lücke: Bildschirm mit PrtScn oder Cmd+Umschalt+4 aufnehmen, dann direkt mit Strg+V in diese Seite einfügen — ohne die Datei vorher zu speichern. Damit lassen sich auch Videoframes, PDFs im Browser und beliebige Live-Webseiten verarbeiten.

Logo speichern oder per Screenshot aufnehmen und hier einfügen, dann auf die Markenfarbe klicken und HEX kopieren. Oder den Screenshot ganz überspringen: mit dem Bildschirm-Eyedropper direkt auf der Live-Website aufnehmen, während sie in einem anderen Tab geöffnet ist. Das ist schneller als in den Browser-DevTools berechnete Stile zu inspizieren, besonders wenn die Farbe in einem SVG oder Bild-Asset statt in einer CSS-Eigenschaft steckt. Der Farbverlauf speichert die letzten 16 Farben, sodass eine vollständige Markenpalette aus verschiedenen Quellen gesammelt werden kann, bevor zum Design-Tool gewechselt wird.

Die meisten praktikablen Paletten haben 3–6 Farben: eine dominante Farbe, ein oder zwei Sekundärfarben und Akzente. Der Extraktor gibt acht dominante Farbfelder zurück, damit die am besten passende Auswahl getroffen werden kann — einzelne Farbfelder oder den gesamten Satz für ein Moodboard kopieren. In der Praxis sind vier Farben ein solider Ausgangspunkt: eine Primärfarbe, eine Sekundärfarbe, eine Neutralfarbe und ein Akzent. Design-Systeme von Unternehmen wie Stripe und Linear verwenden kompakte Paletten mit vielen Helligkeits- und Sättigungsvarianten derselben Farbtöne statt vieler verschiedener Farben.

HEX für CSS und Web-Arbeit (am häufigsten in Codebasen und Design-Tools), RGB/RGBA für Bildschirme und Canvas-Code, HSL für Palettenentwicklung und systematische Anpassungen sowie CMYK für Druckausgabe. Figma, Sketch und Adobe XD unterstützen alle HEX, RGB und HSL. Dieser Picker zeigt HEX, RGB und HSL für jeden Pixel, sodass das passende Format ohne manuelle Konvertierung kopiert werden kann. Wenn für Druckarbeiten auch CMYK benötigt wird, den HEX-Wert in einen kostenlosen Online-Konverter einfügen — die Canvas-API gibt kein CMYK nativ aus.

Ein Klick auf einen Pixel kopiert dessen HEX automatisch in die Zwischenablage. Jede Wertzeile, jedes Verlauf-Farbfeld und jeder Palette-Chip ist ebenfalls klick-zum-kopieren — einfach auf den Wert oder das Farbfeld klicken, und er ist kopiert. Der Farbverlauf speichert die letzten 16 Farben, sodass mehrere Töne aus einem Bild der Reihe nach gesammelt werden können, bevor zu einem anderen gewechselt wird. Über Farbfelder hovern, um die Werte vor dem Klicken zu sehen. Wenn die gesamte Palette als Liste benötigt wird, "Alle kopieren" verwenden, um alle acht HEX-Codes kommagetrennt zu erhalten — bereit zum Einfügen in CSS-Variablen oder ein Design-Dokument.

Ja — den Frame oder die Seite als Screenshot aufnehmen und mit Strg+V in den Picker einfügen (ohne Datei speichern), oder den Bildschirm-Eyedropper verwenden, um direkt aufzunehmen während das PDF oder Video abgespielt wird. Für im Browser geöffnete PDFs ist der Bildschirm-Eyedropper meist am schnellsten: das PDF in Chrome öffnen, "Vom Bildschirm aufnehmen" klicken und dann auf die gewünschte Farbe klicken. Bei Videos zuerst auf dem Frame pausieren, um die genaueste Aufnahme zu erhalten.

Browser können beim Rendern von Bildern eine Farbprofilkonvertierung (ICC) anwenden, und Screenshots erben das Farbprofil des Displays. Der Picker gibt die tatsächlichen sRGB-Pixelwerte aus, wie sie vom Browser gerendert werden — die Werte, die in CSS verwendet würden — was für Web-Arbeit korrekt ist. Wenn ein Unterschied zu Photoshop oder Figma festgestellt wird, prüfen Sie, ob das Display auf sRGB kalibriert ist und ob die Bilddatei ein eingebettetes Farbprofil hat, das übereinstimmt. Für Logo-Assets sollte der Designer die Marken-HEX-Werte idealerweise direkt angeben, statt sich auf die Extraktion zu verlassen.

imagecolorpicker.com ist die meistgenutzte Alternative — bietet Einzelpixel-Auswahl und Paletten-Extraktion, lädt Ihr Bild jedoch bei jeder Nutzung auf einen Server hoch und zeigt Werbung. Adobe Color extrahiert Paletten aus Fotos, erfordert aber ein Adobe-Konto und überträgt Bilder an Adobes Server; es bietet außerdem keine Einzelpixel-Auswahl mit Zoom-Lupe. Canvas Farbwähler ist in den Canva-Editor integriert und funktioniert nur für Bilder innerhalb eines Canva-Projekts. macOS Digital Color Meter und Windows PowerToys Color Picker eignen sich für Bildschirmaufnahmen, extrahieren aber keine Paletten aus Dateien. Dieses Tool ist die einzige kostenlose, vollständig clientseitige Option mit Zoom-Lupe, Bildschirm-Eyedropper, 16-Farben-Verlauf und Paletten-Extraktion kombiniert — kein Konto, keine Werbung, kein Upload.