Bild-Farbextraktor

Laden Sie ein Bild hoch, und der Farbextraktor liefert seine dominanten Farben als Hex- und RGB-Felder, sortiert von dunkel nach hell und bereit zum Übernehmen in CSS. Er läuft vollständig im Browser über die Canvas-API, sodass ein 4K-Foto in Millisekunden analysiert wird, ohne Upload. Das Ergebnis ist eine kleine, wiederverwendbare Palette aus den tatsächlichen Pixeln des Bildes statt einer geratenen Menge komplementärer Farben.

Wie Median-Cut-Quantisierung funktioniert

Median Cut behandelt jeden Pixel als Punkt im RGB-Raum und baut eine Palette, indem diese Punktwolke wiederholt unterteilt wird:

1. Das Bild so verkleinern, dass seine längste Kante 100 Pixel misst — ein 4000×3000-Foto wird zu 100×75, also 7.500 zu analysierenden Pixeln.
2. Jeden Pixel in einen einzigen Korb legen.
3. Den Korb mit der größten Streuung auf einem einzelnen Kanal (Rot, Grün oder Blau) finden.
4. Diesen Korb nach dem breitesten Kanal sortieren und am Median in zwei Körbe teilen.
5. Wiederholen, bis die angeforderte Anzahl Körbe erreicht ist oder keiner mehr geteilt werden kann.
6. Die Pixel in jedem Korb mitteln, um die endgültige Farbe zu erzeugen.

Weil die Teilung immer zuerst den breitesten Kanal anvisiert, verteilen sich die Körbe am Ende über die tatsächliche Farbspanne des Bildes. Es sind keine Zufallszahlen im Spiel, was die Ausgabe reproduzierbar macht.

Schritt für Schritt

1. Hochladen — Ziehen Sie ein JPEG, PNG, WebP oder GIF per Drag-and-drop hinein, oder klicken Sie, um zu durchsuchen. Nichts wird an einen Server gesendet.
2. Anzahl wählen — 5, 6 oder 8 Farben. Die Palette wird sofort neu gerendert.
3. Prüfen — Jedes Farbfeld zeigt seinen Hex-Wert und das rgb(...)-Tripel.
4. Kopieren — Klicken Sie ein Farbfeld an, um seinen Hex-Wert zu kopieren, nutzen Sie „Alle Hex-Werte kopieren“ für eine zeilengetrennte Liste, oder kopieren Sie den erzeugten :root-Block mit CSS Custom Properties (--color-1 bis --color-8).

Ein Praxisbeispiel: Vier Pixel, zwei Farben

Zwei Farben aus vier Pixeln angefordert — (10,10,10), (12,12,12), (240,250,240), (235,245,235):

• Grün hat die größte Streuung (10 bis 250, Spanne 240), also wird der Korb nach Grün sortiert.
• Die Teilung nach dem zweiten Pixel ergibt {(10,10,10), (12,12,12)} und {(235,245,235), (240,250,240)}.
• Das Mitteln jedes Korbs ergibt rgb(11,11,11) → #0b0b0b und rgb(238,248,238) → #eef8ee.

Zwei Körbe, einer sehr dunkel und einer sehr hell — genau das, was die Eingabe beschreibt. Ein echtes Foto hat schlicht Tausende solcher Körbe und eine interessantere Teilungsreihenfolge.

Warum externe Bild-URLs blockiert werden (CORS)

Der Extraktionsschritt ruft ctx.getImageData(0, 0, w, h) auf, um rohe Pixel zu lesen. Browser schützen Nutzer vor dem Auslesen fremder Pixel, indem sie einen Canvas „kontaminieren“, sobald er ein Bild von einem anderen Origin ohne CORS-Header zeichnet. Einmal kontaminiert, wirft getImageData einen SecurityError, und das Tool kann nichts mehr analysieren. Manche Websites senden tatsächlich Access-Control-Allow-Origin, in diesem Fall würde ein URL-Bild funktionieren — aber darauf können Sie sich nicht verlassen, und bei der Hälfte der Bilder zu scheitern wäre schlimmer, als URLs gar nicht erst anzubieten. Das Hochladen der Datei umgeht das Problem, weil eine per FileReader geladene Gerätedatei zu einer data-URL wird, die den Canvas nicht kontaminiert. Der praktische Kompromiss ist ein zusätzliches Drag-and-drop; der Gewinn ist, dass kein Bild je ein Netzwerk berührt.

Wann Sie zu einem anderen Tool greifen

Dieses Tool extrahiert Farben, die bereits in einem Bild stecken. Wollen Sie ein harmonisches Schema aus einer Markenfarbe erzeugen, nutzen Sie den Farbpaletten-Generator. Müssen Sie einen exakten Pixel aus einem Bildschirmdesign entnehmen, nutzen Sie den Farbwähler. Muss das Bild vor der Palette zugeschnitten oder flachgelegt werden, schicken Sie es zuerst durch das Bildzuschnitt-Tool.

Praktische Tipps für bessere Paletten

• Irrelevante Ränder zuerst wegschneiden. Ein weißer Rand oder eine Browserleiste kann so viele Pixel belegen, dass er einen Korb dominiert, weil die Verkleinerung die Proportionen beibehält. Schneiden Sie ihn vor dem Hochladen in einem Editor zu.
• Im Zweifel 5 anfordern. Weniger Körbe bedeuten je einen breiteren Durchschnitt, was meist besser zur Gesamtstimmung des Bildes passt als acht eng geteilte Schattierungen.
• Durchschnitte erwarten, keine exakten Pixel. Ein Foto von Gras hat kein einzelnes Grün; das Feld ist ein repräsentativer Durchschnitt, keine Farbe, die an irgendeinem Pixel existiert.
• Die CSS-Variablen kopieren, nicht nur die Hex-Werte. Der erzeugte :root-Block benennt sie ab --color-1 und lässt sich direkt in ein Projekt einfügen, was eine Palette über Komponenten hinweg konsistent hält.

Fotos, Logos und Screenshots

Ein Logo mit flächigen Füllungen liefert saubere, wiederholbare Farbfelder und ist die ideale Eingabe. Ein Foto liefert Durchschnitte, weil Median Cut Tausende benachbarter Pixel in jedem Korb zusammenfasst. Screenshots liegen dazwischen: Große flächige UI-Farben überstehen die Verkleinerung gut, aber kantengeglätteter Text und weiche Verläufe können über Körbe verschmieren.

Verwandte Tools

• Farbpaletten-Generator — Harmonische Schemata aus einer einzigen Ausgangsfarbe bauen.
• Farbwähler — Farben zwischen HEX, RGB und HSL wählen und umrechnen.
• Bildkomprimierer — Ein Bild verkleinern, bevor seine Farben extrahiert werden.
• Bildzuschnitt — Vor der Extraktion zuschneiden, drehen und spiegeln.
• Farbnamen-Finder — Einen Hex-Wert in die nächstgelegene benannte Farbe umwandeln.