Farbpipette für Bilder
Klick auf eine beliebige Stelle eines Fotos und kopiere den Farbcode in HEX, RGB, HSL, HSB, CMYK oder OKLCH. In Chrome und Edge kannst du auch eine Farbe von überall auf deinem Bildschirm aufnehmen. Das Tool listet außerdem die Hauptfarben des Bildes auf und zeigt, wie gut schwarzer oder weißer Text auf jeder davon lesbar ist.
Kostenlos · Ohne Anmeldung · Ohne Upload
Schritt 1: Bild hinzufügen
JPG, PNG oder WebP. Es bleibt auf deinem Gerät.
Bild hier ablegen
Dann klicke auf eine beliebige Stelle, um den Farbcode zu sehen. Es wird nichts hochgeladen.
Ein Beispielfoto ist schon geöffnet, damit du das Tool gleich ausprobieren kannst. Füge dein eigenes Bild hinzu, um es zu ersetzen. Bilder werden in deinem Browser geöffnet und nie hochgeladen.
Was eine Farbpipette für Bilder macht
Ein Foto besteht aus einem Raster von Pixeln, und jeder Pixel speichert eine Farbe als drei Zahlen: wie viel Rot, Grün und Blau er enthält. Dieses Tool liest diese Zahlen an der Stelle, auf die du klickst, und schreibt sie in den Formaten auf, die Designer und Entwickler verwenden.
Das hilft, wenn du das Bild hast, aber nicht den Farbcode. Ein Logo nachbauen, einen Farbton aus dem Screenshot einer Website übernehmen oder ein Produktfoto in den Seitenhintergrund einpassen läuft auf denselben Schritt hinaus: auf die Farbe zeigen und den Code kopieren.
Eine Lupe zeigt die genauen Pixel unter dem Mauszeiger, sodass du einen einzelnen Pixel treffen kannst statt eines Flecks. Die Farbe, auf die du zeigst, erscheint beim Bewegen, und ein Klick wählt sie aus und markiert die Stelle im Foto.
| Format | Beispiel | Wo es verwendet wird |
|---|---|---|
| HEX | #FF7D3D | CSS, Design-Tools, Markenrichtlinien |
| RGB | rgb(255, 125, 61) | CSS, Code, Bildbearbeitung |
| HSL | hsl(20, 100%, 62%) | Hellere oder dunklere Varianten bauen |
| HSB | hsb(20, 76%, 100%) | Design-Apps mit HSB-Reglern |
| CMYK | cmyk(0%, 51%, 76%, 0%) | Ausgangspunkt für Druckarbeiten |
| OKLCH | oklch(0.730 0.176 44) | Modernes CSS, gleichmäßige Verläufe |
Das Beispiel ist die orangefarbene Karte im Beispielfoto. Willst du eine gewählte Farbe als Rand verwenden? Füge ihren HEX-Code in Rand zu Bild hinzufügen ein.
So liest du eine Farbe aus einem Bild aus
- 1
Beispiel nutzen oder eigenes Bild hinzufügen
Ein Beispielfoto ist schon geöffnet. Für dein eigenes wähle eine JPG-, PNG- oder WebP-Datei, leg sie im Tool ab oder füge einen Screenshot mit Strg+V oder Cmd+V ein.
- 2
Auf die gewünschte Farbe klicken
Bewege den Mauszeiger über das Bild, um Farben in der Lupe zu sehen, und klicke oder tippe, um eine auszuwählen. Die gewählte Farbe wird sofort angezeigt und im Foto markiert. In Chrome oder Edge kannst du auch eine Farbe von überall auf deinem Bildschirm aufnehmen.
- 3
Code kopieren
Klicke auf Kopieren neben HEX, RGB, HSL oder OKLCH. Unter dem Foto listet eine Palette seine Hauptfarben auf, und ein Klick auf eine davon zeigt auch ihre Codes.
Funktionen der Farbpipette
Jede Funktion unten läuft in deinem Browser, ohne Anmeldung. Die Abbildungen nutzen das Beispielfoto und ein zweites Foto, und alle Zahlen stammen aus ihren echten Pixeln. Browser dekodieren JPEG leicht unterschiedlich, deshalb kann ein Code um ein paar Stufen von deinem abweichen.
Den genauen Pixel auswählen
Lupe · genauer Pixel
Eine Lupe folgt dem Mauszeiger und zeigt die Pixel ringsum als große Quadrate, mit einem roten Rahmen um den, den ein Klick auswählt. Die gewählte Stelle bekommt eine Markierung in ihrer eigenen Farbe, und die Codes erscheinen neben dem Foto. In der Abbildung ist jeder Ring ein Klick: Punkt 2 auf der Mandarinenkarte ist #FF7D3D, also rgb(255, 125, 61) oder hsl(20, 100%, 62%). Auf einem Touchscreen tippst du die Stelle an. Ein großes Foto wird kleiner als seine echte Größe angezeigt, daher kann die Maus Pixel überspringen. Die Pfeiltasten bewegen genau einen Pixel pro Schritt, mit Umschalt zehn, und die Zeile unter dem Foto zeigt die Pixelposition.
Die Hauptfarben automatisch sehen
2 bis 12 Farben
Jedes Bild bekommt darunter einen Palettenstreifen, gebaut aus seinen eigenen Pixeln. Mit − und + zeigst du 2 bis 12 Farben, klickst ein Segment für seine Codes an oder lädst den Streifen als PNG herunter. Hier nimmt der blasstürkise Himmel den meisten Platz ein, etwa 34 %, deshalb steht #ABC7C1 am Anfang, gefolgt von einem dunklen Braun (#6C513F, 21 %), einem Fast-Schwarz (#3C3D35, 17 %) und drei helleren Erdtönen. Fahre über ein Segment, um seinen Anteil zu sehen.
Kontrast von weißem und schwarzem Text prüfen
WCAG AA
Jede Farbe zeigt ihren Kontrast zu weißem und schwarzem Text, markiert als bestanden oder nicht bestanden nach WCAG AA (4,5:1 für normalen Text). Das Tool prüft nur weißen und schwarzen Text. Die Abbildung testet vier genaue Pixel aus dem Ballonfoto. Auf dem Himmelblau #A1CDD0 erreicht Weiß 1,7:1 und Schwarz 12,2:1, also besteht nur Schwarz. Das Terrakotta #A5493E ist für normalen Text das Gegenteil: 5,8:1 mit Weiß und 3,6:1 mit Schwarz, was für großen Text immerhin die 3:1-Hürde erreichen würde. Der Fels im Schatten #3B443F besteht mit Weiß bei 10,1:1, der Sand #C8A06F mit Schwarz bei 8,7:1.
HEX · RGB · HSL · HSB · CMYK · OKLCH
Sechs Farbformate, je ein Klick
Jedes Format hat seine eigene Schaltfläche Kopieren, sodass du einen Wert direkt in CSS, eine Design-App oder einen Styleguide einfügen kannst. Das Tool nennt außerdem die nächste CSS-Farbe, etwa coral oder tomato, und sagt, wenn deine Farbe genau übereinstimmt.
Chrome und Edge
Von überall auf dem Bildschirm aufnehmen
Die Pipette-Schaltfläche nimmt eine Farbe aus jedem geöffneten Fenster, auch von einer Website oder einer anderen App, nicht nur aus dem Bild. Mit Esc brichst du ab. Browser ohne die Funktion, etwa Firefox und Safari, zeigen statt der Schaltfläche eine kurze Erklärung.
JPG · PNG · WebP · bis 20 MB
Sofort loslegen, eigenes Bild mitbringen
Beim Laden der Seite ist ein Beispielfoto geöffnet, mit einer bereits gewählten Farbe. Ersetze es über Eigenes Bild verwenden, per Ablegen im Tool oder mit einem eingefügten Screenshot. Alles läuft in deinem Browser, nichts wird hochgeladen.
Tipps für bessere Farbauswahl
Ziele auf die Mitte einer Fläche
Pixel am Rand sind eine Mischung der beiden Farben, die dort aufeinandertreffen. Klicke weit im Inneren einer Fläche und prüfe mit der Lupe, dass der rote Rahmen auf einem gleichmäßigen Ton liegt.
Beginne mit der Palette
Die Palette listet die Farben auf, die den größten Teil des Bildes abdecken. Mit + teilst du große Flächen in mehr Töne auf, dann klickst du auf ein Segment, um seine Codes zu sehen.
PNG für Logos und flache Grafiken
Die JPEG-Komprimierung verschmiert Farbe um scharfe Kanten. Ein PNG-Export eines Logos liefert saubere, genaue Codes.
Teste die Farbe, bevor du sie nutzt
Jede Auswahl zeigt ihren Kontrast zu weißem und schwarzem Text. Prüfe ihn, bevor du Text auf diese Farbe setzt.
Warum eine gewählte Farbe nicht immer die erwartete ist
Zwei Stellen, die gleich aussehen, können verschiedene Codes haben
Die JPEG-Komprimierung verschiebt Pixelwerte in kleinen Blöcken leicht, sodass eine scheinbar glatte Fläche von Pixel zu Pixel um ein paar Stufen schwanken kann. Wirkt ein Code leicht daneben, klicke ein, zwei Pixel daneben und vergleiche. Flache Grafiken als PNG liefern die stabilsten Ergebnisse.
Licht verändert die Farbe auf einem Foto
Schatten, Lichter, Weißabgleich und die Bildverarbeitung der Kamera verändern, was ein Pixel speichert. Das Tool gibt die Farbe so an, wie sie im Foto erscheint. Ein Farbfächer oder ein Stoff im Raum stimmt deshalb nicht genau damit überein.
Farben werden als sRGB gelesen
sRGB ist der Standard für Webfarben. Hat ein Bild ein anderes Farbprofil, wandelt der Browser es beim Öffnen der Datei um. Eine Desktop-App, die das ursprüngliche Profil zeigt, kann daher leicht andere Zahlen melden.
Wo du eine Farbe aus einem Bild verwendest
Drei häufige Aufgaben und was du jeweils kopierst.
HEX · RGB · OKLCH
Websites und CSS
Füge einen HEX-Code direkt in ein Stylesheet ein, etwa als color: #ff7d3d. RGB, HSL und OKLCH funktionieren genauso in rgb(), hsl() und oklch().
Klicke auf eine Farbe der Palette unter dem Foto, um ihren Code in denselben sechs Formaten zu sehen, fertig zum Einfügen.
HEX
Marke und Design
Fehlt der Styleguide, lies die Farben aus einer Logo-Datei oder einem Screenshot der Website aus. Scharfe PNG-Logos liefern die saubersten Ergebnisse.
Mit Palette als PNG herunterladen behältst du die Hauptfarben eines Referenzfotos als Streifen, den du einem Kunden schicken oder in ein Moodboard ziehen kannst.
WCAG
Lesbarer Text auf einer Farbe
Das Kontrastfeld zeigt das Verhältnis für weißen und für schwarzen Text auf der gewählten Farbe. WCAG-Stufe AA verlangt mindestens 4,5:1 für normalen Text und 3:1 für großen Text.
Die Mandarinenkarte erreicht 2,5:1 mit weißem und 8,3:1 mit schwarzem Text, also ist dort Schwarz die sichere Wahl.
Die Kontrastverhältnisse stammen allein aus der gewählten Farbe. Liegt Text auf einem Foto statt auf einer einfarbigen Fläche, prüfe zusätzlich die Stelle hinter dem Text.
Häufige Fragen
Wie wähle ich eine Farbe aus einem Bild aus?
Lade das Bild hoch, bewege den Mauszeiger darüber und klicke auf die gewünschte Stelle. Auf dem Handy tippst du sie an. Neben dem Bild erscheinen die Codes HEX, RGB, HSL und OKLCH für diese Stelle, jeweils mit einer Schaltfläche Kopieren.
Wie finde ich den Hex-Code einer Farbe in einem Foto?
Wähle die Farbe wie oben beschrieben und klicke auf Kopieren neben HEX. Ein Hex-Code besteht aus einem Rautenzeichen und sechs Zeichen, je zwei für Rot, Grün und Blau, zum Beispiel #FF7D3D.
Was ist der Unterschied zwischen HEX, RGB, HSL und OKLCH?
Sie beschreiben dieselbe Farbe auf verschiedene Weise. HEX und RGB geben die Anteile von Rot, Grün und Blau an, im 16er- und im 10er-System. HSL gibt Farbton, Sättigung und Helligkeit an, wodurch sich leicht eine hellere oder dunklere Variante einer Farbe bauen lässt.
OKLCH ist eine neuere Schreibweise, die CSS in den aktuellen Versionen der großen Browser unterstützt. Ihre Helligkeit folgt dem, wie hell eine Farbe wirkt, und hält so Verläufe und Farbskalen gleichmäßig.
Warum weicht der Code von dem eines anderen Tools ab?
Meist liegt es am genau angeklickten Pixel und am Farbprofil. Fotos schwanken leicht von Pixel zu Pixel, sodass ein Klick einen Pixel weiter einen anderen Code liefern kann.
Auch ein Foto mit einem anderen Farbprofil als sRGB kann abweichend ausgelesen werden, weil dieses Tool die Farben so liest, wie der Browser sie anzeigt.
Wie findet das Tool die Hauptfarben eines Bildes?
Es liest die Pixel deines Bildes, fasst ähnliche Töne zusammen und teilt diese Gruppen in die Anzahl Farben auf, die du wählst. Jede Farbe ist der Durchschnitt ihrer Gruppe, und ihr Prozentwert ist der Anteil der Pixel, die ihr am nächsten liegen. Ein sehr großes Bild wird in einem regelmäßigen Pixelraster gelesen, das dieselbe Palette ergibt.
Eine große, einfarbige Fläche wie ein Himmel oder ein Hintergrund bekommt eine eigene Farbe, belegt aber nicht die ganze Palette, sodass auch kleinere Akzente auftauchen.
Was macht Farbe von überall auf dem Bildschirm aufnehmen?
Es nutzt die eingebaute Pipette deines Browsers. Klicke auf die Schaltfläche und dann auf eine beliebige Farbe auf deinem Bildschirm, in jedem Fenster und nicht nur im hochgeladenen Bild. Mit Esc brichst du ab.
Die gewählte Farbe wird sofort mit ihren Codes angezeigt. Chrome und Edge am Computer bieten das an. Firefox und Safari nicht, daher erklärt die Seite dort, warum die Schaltfläche fehlt.
Was ist der nächste CSS-Name?
CSS hat eine Liste benannter Farben, etwa tomato, coral und rebeccapurple. Das Tool sucht die, die deiner Farbe am ähnlichsten sieht, und zeigt sie an. Der Name ist ein CSS-Schlüsselwort und damit in jeder Sprache gleich. Er stimmt nur dann exakt, wenn deine Farbe eine der benannten ist.
Welche Bildtypen kann ich verwenden?
JPG-, PNG- und WebP-Dateien bis 20 MB. Auch ein PNG oder WebP mit Transparenz funktioniert. Wählst du einen durchsichtigen Pixel, weist das Tool darauf hin und zeigt die Farbe ohne die Transparenz.
Ist diese Farbpipette kostenlos?
Ja. Es gibt keine Anmeldung, kein Wasserzeichen und keine Begrenzung, wie viele Farben du auswählst. Bilder bis 20 MB werden in deinem Browser geöffnet, und es wird nichts hochgeladen.
Kann ich sie auf dem Handy oder Tablet nutzen?
Ja. Tippe auf das Bild, um eine Farbe auszuwählen. Die Lupe ist für die Maus gedacht, daher zeigt auf einem Touchscreen eine Markierung die angetippte Stelle, und die Codes erscheinen direkt nach dem Bild.
Kann ich eine Farbe aus einem Screenshot oder einer Website auslesen?
Ja, auf zwei Wegen. Füge einen Screenshot mit Strg+V oder Cmd+V ein oder lade die Screenshot-Datei hoch und klicke dann auf die Farbe. In Chrome oder Edge kannst du außerdem Farbe von überall auf dem Bildschirm aufnehmen nutzen, um eine Farbe aus jedem geöffneten Fenster zu nehmen, auch von einer Website.
Wie werden die HSB- und CMYK-Werte berechnet?
Beide stammen rechnerisch aus der sRGB-Farbe. HSB, auch HSV geschrieben, verwendet denselben Farbton wie HSL, mit Sättigung und Helligkeit gemessen am hellsten Kanal.
CMYK ist eine einfache Umrechnung, kein Druckprofil. Ein Drucker oder eine Druckerei bildet dieselbe Farbe über ihr eigenes Profil ab, daher können die Prozentwerte abweichen. Sieh die Werte als Ausgangspunkt und gleiche sie mit einem Andruck ab.
Warum ist schon ein Bild auf der Seite?
Zuerst öffnet sich ein Beispielfoto, damit du siehst, wie das Tool funktioniert, bevor du etwas hinzufügst. Füge dein eigenes mit Eigenes Bild verwenden hinzu, leg es im Tool ab oder füge es ein, dann ersetzt es das Beispiel.
Werden meine Bilder irgendwo hochgeladen?
Nein. Dein eigener Browser öffnet das Bild und liest seine Pixel. Nichts wird an einen Server gesendet, und nach dem Schließen des Tabs ist nichts gespeichert.