Bild-Farbpipette
Farben aus jedem Bild picken
100 % kostenlos. Läuft vollständig in deinem Browser: deine Dateien und Daten verlassen dein Gerät nie, und es wird nichts auf einen Server hochgeladen.
Dateien hierher ziehen
oder durchsuchen zum Hochladen
Supports PNG, JPG, WebP
In deinem Browser verarbeitet - deine Datei verlässt dieses Gerät nie.
Über dieses Tool
Auf ein Pixel klicken und den exakten Wert ablesen löst ein Problem, das Raten nie löst: eine Farbe präzise zu matchen. Ein Markenblau, das einen Ton daneben liegt, wirkt falsch auf eine Weise, die Leute merken, ohne sagen zu können warum, und kein Anstarren eines Screenshots liefert den richtigen Hex-Code. Dieses Tool liest die echten Pixeldaten, du bekommst also, was wirklich im Bild ist. Die drei Formate dienen unterschiedlichen Zwecken. HEX (#6366f1) ist die kompakte Form, die fast überall in CSS und Design-Tools genutzt wird. RGB drückt dieselbe Farbe als Rot-, Grün- und Blaukanäle von 0–255 aus, was du brauchst, wenn ein Wert berechnet oder animiert werden muss. HSL beschreibt Farbton, Sättigung und Helligkeit und ist viel nützlicher, wenn du eine Palette bauen willst – eine Farbe nehmen und eine hellere oder gedämpftere Version erzeugen heißt, eine Zahl zu ändern statt drei zu raten. Bilder werden in deinem Browser gelesen und nie hochgeladen.
So verwendest du dieses Tool
- Lade dein Bild hochLege einen Screenshot, ein Logo, ein Mockup oder ein Foto ab. Es wird lokal gelesen und nirgendwohin gesendet.
- Die gewünschte Farbe anklickenDas Pixel unter deinem Cursor wird gesampelt und die Werte sofort in HEX, RGB und HSL angezeigt.
- Das Format kopieren, das du brauchstHEX für CSS und Design-Tools, RGB für Code, der Kanäle manipuliert, HSL zum Bauen von Varianten.
- So viele Punkte sampeln, wie du willstKlicke im Bild herum, um Töne zu vergleichen – nützlich, wenn Verlauf oder Kompression eine Region von einer anderen unterscheidet.
Warum es nutzen
- Liest echte Pixelwerte statt Näherungen, Markenfarben matchen exakt.
- Drei Formate auf einmal, du brauchst keinen Extra-Konverter.
- Läuft in deinem Browser – unveröffentlichte Designs und Kunden-Mockups verlassen dein Gerät nie.
- Sampeln wiederholt Regionen vergleichen, das zeigt Verläufe und Kompressionsartefakte.
- Kein Konto und kein Upload-Limit.
Häufige Anwendungen
- Eine Markenfarbe aus einem Logo holen, wenn kein Styleguide da ist.
- Eine Farbe aus einem Design-Mockup matchen, während du die Seite baust.
- Den exakten Ton in einem Screenshot einer anderen Site oder App identifizieren.
- Eine Palette aus einem Foto für Präsentation oder Moodboard bauen.
- Prüfen, ob zwei identisch wirkende Bereiche denselben Wert teilen.
Tipps für bessere Ergebnisse
- Sampeln wo möglich aus einem PNG statt JPG. JPG-Kompression verschiebt Farben leicht, besonders an Kanten.
- Klicke mehrere nahe Punkte auf einer scheinbar flachen Fläche – unterscheiden sich die Werte, siehst du einen Verlauf oder Kompressionsrauschen.
- Nutze HSL, wenn du eine hellere oder dunklere Variante einer Farbe brauchst. Eine Helligkeitszahl ist weit vorhersagbarer als drei RGB-Kanäle.
- Eine aus einem Foto gepickte Farbe ist von Licht und Weißabgleich beeinflusst – es ist die Farbe in diesem Bild, nicht die des physischen Objekts.
- Hast du eine Farbe, prüfe sie gegen den Hintergrund mit dem Kontrast-Checker, bevor du sie für Text nutzt.
Fehler, die du vermeiden solltest
- Aus einem stark komprimierten JPG sampeln und das Ergebnis als exakte Markenfarbe behandeln.
- Aus einem Screenshot mit Filter, Nachtmodus oder Farbprofil picken, das jeden Wert verschiebt.
- Annehmen, ein Sample stehe für eine ganze Region, wenn die Fläche subtil verlaufsgefüllt ist.
- Eine gepickte Farbe für Text ohne Kontrastprüfung nutzen – der häufigste Accessibility-Fehler im Web.
- Ein Foto eines gedruckten Objekts sampeln und ein Match erwarten – Druck- und Bildschirm-Farbräume unterscheiden sich grundlegend.
Unterstützte Formate
- JPG
- PNG
- WebP
- GIF
Verfügbare Optionen
- Eyedropper sample
- HEX
- RGB
- HSL
Häufig gestellte Fragen
Es liest den exakten Pixelwert an der Klickstelle, also so genau wie das Bild selbst – denk daran, dass starke JPG-Kompression oder Handyfotos physischer Objekte Farben leicht vom „wahren“ Realton verschieben können.
Typischerweise HEX (wie #6366f1), RGB und HSL – die Formate, die die meisten Design- und Code-Tools erwarten.
Ja – klicke so viele Punkte im Bild, wie du brauchst; jeder Klick liefert die Farbwerte dieses Pixels.
Dasselbe Tool – „colour picker“ ist die britische Schreibweise, „color picker“ die amerikanische. HEX-, RGB- und HSL-Werte sind identisch, und CSS selbst akzeptiert nur die amerikanische Schreibweise für Properties wie `color` und `background-color`, das lohnt sich beim Einfügen in ein Stylesheet.
Sie beschreiben dieselbe Farbe auf drei Arten. HEX ist eine kompakte sechsstellige Form in CSS und Design-Tools. RGB gibt Rot-, Grün- und Blaukanäle als Werte 0–255, passend für Code, der Farbe berechnet oder animiert. HSL gibt Farbton, Sättigung und Helligkeit – die praktische Wahl für eine hellere oder gedämpftere Variante, du änderst eine Zahl statt drei.
Nein. Das Bild wird von deinem Browser gelesen und lokal gesampelt, unveröffentlichte Designs und Kundenarbeit verlassen dein Gerät nie.
Entweder ist die Fläche ein subtiler Verlauf statt flach, oder JPG-Kompression hat nahe Pixel verschoben. Ein paar Samples zeigen schnell, was zutrifft. PNG-Quellen vermeiden das Kompressionsproblem ganz.
Nutze das Farbpaletten-Tool, das dominante Farben eines Bildes automatisch extrahiert, statt jede von Hand zu sampeln.
Andere suchen auch nach
- farbpicker aus bild
- farbpicker online kostenlos
- hex code aus bild holen
- pipette tool online
- markenfarbe aus logo finden
- rgb zu hex aus foto
- bild farbidentifizierer