Farbe aus Bild bestimmen (Pipette)
Laden Sie ein Bild per Dateiauswahl, Drag & Drop oder Strg + V und klicken oder tippen Sie auf die gewünschte Stelle. Die Pipette zeigt den Farbwert des Pixels als HEX, RGB und HSL und ermittelt die Hauptfarben des Bildes. Das Bild wird nicht hochgeladen.
So wird gerechnet
Ihr Bild bleibt auf Ihrem Gerät
Die Pipette arbeitet vollständig in Ihrem Browser: Das Bild wird lokal dekodiert und auf eine Zeichenfläche (Canvas) gemalt, der Farbwert wird mit getImageData() direkt aus dem Arbeitsspeicher gelesen. Es gibt keinen Upload und keinen Netzwerkaufruf mit Bilddaten; nach dem Schließen der Seite ist das Bild weg. Nur für HEIC-Fotos, die Ihr Browser nicht selbst öffnen kann, wird einmalig ein Decoder-Programm von dieser Website nachgeladen – Ihr Foto bleibt trotzdem lokal.
So lesen Sie eine Farbe aus
- Bild wählen, in das Feld ziehen oder mit Strg + V einfügen (z. B. einen Screenshot).
- Auf die gewünschte Stelle klicken oder tippen. Mit der Tastatur verschieben die Pfeiltasten die Pipette pixelgenau.
- HEX-, RGB- oder HSL-Wert kopieren. Die letzten acht gewählten Farben bleiben als Farbfelder stehen.
Wie die Hauptfarben entstehen
Für die Hauptfarben wird das Bild auf höchstens 200 Pixel Kantenlänge verkleinert. Jeder deckende Pixel fällt in eines von 4.096 Farbfächern (16 Stufen je Kanal). Die häufigsten, deutlich verschiedenen Fächer werden zu bis zu sechs Hauptfarben; die Prozentzahl ist ihr Anteil an allen deckenden Pixeln. Das ist eine einfache Quantisierung – gut für einen Überblick, aber keine Farbmessung.
Warum der Wert vom Original abweichen kann
- Farbprofile: Browser rechnen Bilder mit eingebettetem Profil (z. B. Display P3 vom Smartphone) in sRGB um. Die Pipette zeigt den sRGB-Wert, den Sie auch in CSS verwenden würden – ein Bildbearbeitungsprogramm im P3-Modus zeigt andere Zahlen.
- Kompression: JPEG und WebP speichern Farben verlustbehaftet; benachbarte Pixel einer „einfarbigen“ Fläche können sich um einige Stufen unterscheiden.
- Sehr große Bilder (über 4.096 Pixel Kantenlänge) werden zum Auslesen verkleinert, dabei werden benachbarte Pixel gemittelt. Die angezeigte Position bezieht sich auf das Originalbild.
Häufige Fragen
Wird mein Bild hochgeladen oder gespeichert?
Nein. Das Bild wird nur im Arbeitsspeicher Ihres Browsers verarbeitet und nirgendwohin gesendet. Auch im Browser-Speicher (localStorage) wird nichts abgelegt.
Wie finde ich den Farbcode aus einem Screenshot?
Screenshot machen (z. B. Windows: Win + Umschalt + S), dann diese Seite anklicken und Strg + V drücken. Anschließend auf die Stelle klicken – der HEX-Code erscheint sofort.
Welche Bildformate funktionieren?
JPG, PNG, WebP, GIF, BMP und AVIF, soweit Ihr Browser sie öffnen kann, sowie HEIC-Fotos vom iPhone. Bei transparenten Bildern zeigt die Pipette zusätzlich die Deckkraft des Pixels.
Kann ich die Farbe weiterverwenden?
Ja: HEX-Wert kopieren und im Farbumrechner in weitere Formate umwandeln, im Farbpalette-Generator passende Farben erzeugen oder im Kontrast-Checker prüfen, ob Text in dieser Farbe gut lesbar ist.
Quellen und Rechtsgrundlagen
- MDN Web Docs – CanvasRenderingContext2D: getImageData()
- CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
- CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
Stand:
Passende Werkzeuge
- Farbumrechner: HEX, RGB, HSL, HSV, CMYKFarbwerte umrechnen: HEX in RGB, RGB in HEX, HSL, HSV, HWB und CMYK – Eingabe in jedem Format oder per Farbwähler, Ergebnis zum Kopieren, direkt im Browser.
- Farbpalette-GeneratorAus einer Basisfarbe passende Farben erzeugen: komplementär, analog, triadisch, Quadrat, split-komplementär oder monochrom – mit HEX-, RGB- und HSL-Werten.
- Kontrast-Checker nach WCAG 2.2Farbkontrast von Text- und Hintergrundfarbe prüfen: Kontrastverhältnis nach WCAG 2.2, Bewertung AA/AAA für normalen und großen Text sowie UI-Elemente.
- 1RM-Rechner: Maximalkraft schätzenOne-Rep-Max aus Gewicht und Wiederholungen schätzen – nach den Formeln von Epley und Brzycki, mit %1RM-Tabelle für 1 bis 10 Wiederholungen.
- BMI-Rechner nach WHOBody-Mass-Index aus Größe und Gewicht berechnen: WHO-Kategorie von Untergewicht bis Adipositas Grad III und Normalgewichtsbereich für Ihre Größe.
- Chinesischer Kalender: Datum und SternzeichenDatum in den chinesischen Mondkalender umrechnen und zurück: Jahr im 60er-Zyklus (Himmelsstamm, Erdzweig), Tierkreiszeichen, Element und Neujahrsfest.