Farbe aus Bild bestimmen (Pipette)
Farbe aus einem Bild bestimmen: Laden Sie das 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.
Quelle: MDN Web Docs – CanvasRenderingContext2D: getImageData(). Stand: .
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.
Beispiel: Ein Klick auf reines Rot liefert #FF0000, RGB 255, 0, 0 und HSL 0°, 100 %, 50 %. Weiterarbeiten: Werte umrechnen mit dem Farbumrechner, passende Farben mit dem Farbpaletten-Generator finden und die Lesbarkeit mit dem Kontrast-Prüfer testen.
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.
Was ist der Unterschied zwischen HEX, RGB und HSL?
Alle drei beschreiben dieselbe Farbe: RGB als Rot-, Grün- und Blauanteil von 0 bis 255, HEX dieselben Werte hexadezimal (#FF0000 = 255, 0, 0), HSL als Farbton, Sättigung und Helligkeit.
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: · So prüfen wir
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.
- Farbkontrast prüfen 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.
- BMI-Rechner nach WHOBMI-Rechner: Body-Mass-Index aus Größe und Gewicht mit WHO-Kategorie auf farbiger Skala, Normalgewicht für Ihre Größe und BMI Prime – in cm/kg oder ft/lb.
- Metronom onlineKostenloses Online-Metronom: 20–300 BPM, Taktarten von 2/4 bis 12/8, Betonung je Schlag, Unterteilungen und Tap-Tempo. Taktgenau, ohne App.
- Pflegegeld Rechner 2026 mit KombinationsleistungPflegegeld Rechner 2026: Pflegegeld für Pflegegrad 2 bis 5 berechnen, auch als Kombinationsleistung mit dem Pflegedienst – Beträge nach § 37 und § 38 SGB XI.
- Lebenserwartung Rechner für DeutschlandLebenserwartung Rechner: Wie viele Jahre bleiben statistisch? Fernere Lebenserwartung und Chance auf 80 oder 90 Jahre nach der neuen Sterbetafel 2023/2025.
- Anträge nach der Geburt: Fristen für Elterngeld, Elternzeit und MutterschutzAnträge nach der Geburt mit Ihren Fristen: Mutterschutz berechnen, Elternzeit anmelden (7 Wochen), Elterngeld und Kindergeld ohne Verlust – als Kalender.
- HbA1c Rechner: Langzeitzucker umrechnenHbA1c Rechner: Langzeitzucker von Prozent in mmol/mol umrechnen und umgekehrt, mit geschätztem Durchschnittsblutzucker in mg/dl und mmol/l und Tabelle.