Warum verwendet der Generator K-Means und nicht Median Cut?

Beide Verfahren liefern dominante Farben, aber mit unterschiedlichen Schwächen. Median Cut teilt den Farbraum rekursiv entlang der Achse mit der größten Streuung und ist sehr schnell, neigt aber dazu, perzeptuell ähnliche Töne zu trennen, weil es nur die RGB-Box-Geometrie betrachtet. K-Means optimiert auf minimale Distanz von jedem Pixel zum nächsten Zentroid und liefert daher kohärentere Cluster. Der Rechenaufwand ist höher, in JavaScript aber für Bilder bis etwa 200x200 Pixel im Subsekunden-Bereich. Für Web-Tools mit Genauigkeits-Anspruch ist K-Means deshalb die gängigere Wahl. Pillow und ImageMagick implementieren Median Cut, viele Browser-Tools wie Color Thief nutzen ebenfalls eine Median-Cut-Variante.

Wie viele Farben sollte k haben?

Für Branding und Mood-Boards funktioniert k=5 in der Regel am besten, weil das menschliche Kurzzeitgedächtnis etwa fünf bis sieben Elemente gleichzeitig fassen kann (Miller, The Magical Number Seven, 1956). Für Datenvisualisierungen, die mehr Kategorien brauchen, sind k=7 oder k=10 typisch. Größere Werte als k=12 sind selten sinnvoll, weil sich die Cluster perzeptuell zu sehr überlappen und der menschliche Betrachter sie nicht mehr unterscheidet. Der Generator auf farbpalette-generieren.de bietet k=5 bis k=10 standardmäßig an, was den realistischen Bereich abdeckt.

Werden meine Bilder hochgeladen oder bleiben sie lokal?

Alles läuft im Browser. Das Bild wird per Drag-and-Drop oder File-Input in ein lokales File-Objekt geladen, dann auf ein HTML-Canvas-Element gezeichnet und mit der Canvas-2D-API per getImageData ausgelesen. Der K-Means-Algorithmus läuft anschließend in JavaScript auf dem Client. Es geht zu keinem Zeitpunkt eine Datei an einen Server. Du kannst das prüfen, indem du in den Browser-Devtools den Network-Tab öffnest und ein Bild lädst: dort wird kein POST-Request mit den Bilddaten auftauchen. Diese Architektur entspricht der DSGVO-Best-Practice Privacy-by-Design (Art. 25 DSGVO).

Warum wird das Bild auf 200x200 Pixel verkleinert?

Ein 4K-Foto hat etwa 8,3 Millionen Pixel. K-Means mit k=5 müsste pro Iteration alle 8,3 Millionen Punkte einmal auf Distanz zu den fünf Zentroiden prüfen, also 41,5 Millionen Distanzberechnungen je Iteration, und das mindestens 10 bis 20 mal bis zur Konvergenz. Im Browser bedeutet das spürbare Wartezeit. Verkleinerung auf 200x200 = 40.000 Pixel reduziert den Aufwand um Faktor 200, ohne dass das Ergebnis sichtbar leidet. Studien zeigen, dass dominante Farben sich bereits in stark verkleinerten Versionen eines Bildes stabil zeigen, weil die häufigsten Farben durch Mittelung über benachbarte Pixel sogar leicht stabilisiert werden.

Welche Bildformate akzeptiert der Generator?

JPG, PNG und WebP werden unterstützt, weil sie von allen modernen Browsern nativ in das Canvas-Element gezeichnet werden können. Vor der Verarbeitung prüft der Generator zwei Dinge: erstens den MIME-Type aus dem File-Objekt (image/jpeg, image/png, image/webp), zweitens die Magic Bytes am Dateianfang (JPG beginnt mit FF D8 FF, PNG mit 89 50 4E 47, WebP mit 52 49 46 46 gefolgt von 57 45 42 50). Diese doppelte Prüfung verhindert, dass ein präparierter Dateiname mit falscher Endung den Decoder verwirrt. SVG wird nicht akzeptiert, weil es Vektorformat ist und kein Pixel-Sampling erlaubt, dafür gibt es spezielle Tools zur SVG-Palettenextraktion.

Farbpalette aus Bild extrahieren: K-Means-Clustering im Browser

Ein Foto enthält oft Hunderttausende verschiedene Farbwerte. Aus dieser Pixelwolke fünf bis zehn dominante Farben herauszuziehen, ist die Kernaufgabe der Bildanalyse. Der bewährte Algorithmus dafür ist K-Means in der Lloyd-Variante: ein iteratives Verfahren, das Cluster-Zentroide so lange verschiebt, bis sie sich in den dichtesten Bereichen der Pixelwolke stabilisiert haben. Dieser Ratgeber zeigt dir, wie K-Means im Browser läuft, warum das Bild vorher verkleinert wird und wo die Grenzen des Verfahrens liegen.

Was K-Means überhaupt macht

K-Means ist ein Clustering-Algorithmus aus dem Bereich Unsupervised Learning. Du gibst ihm eine Punktwolke (in unserem Fall: alle Pixel eines Bildes als RGB-Triplets im dreidimensionalen Raum) und einen Wert k, der angibt, wie viele Cluster du haben möchtest. Der Algorithmus findet dann k Zentroide, sodass die Summe der quadrierten Distanzen aller Pixel zum jeweils nächsten Zentroiden minimal wird.

Übersetzt auf die Farbpalette: jeder Cluster steht für eine dominante Farbe, der Zentroid ist die mittlere RGB-Position dieses Clusters. Wenn ein Bild viele Sonnenuntergangs-Orangetöne enthält, wandert ein Zentroid in das Zentrum dieser Orange-Wolke und liefert dir eine sinnvolle Repräsentationsfarbe.

Der Lloyd-Algorithmus im Detail

K-Means ist nicht ein einzelner Algorithmus, sondern eine Problemformulierung. Das praktisch dominante Verfahren zur Lösung ist Lloyd’s Algorithm, beschrieben von Stuart Lloyd 1957 in einem internen Bell-Labs-Paper, das erst 1982 in IEEE Transactions on Information Theory veröffentlicht wurde. Die Schritte sind einfach:

Initialisierung: setze k Zentroide zufällig im Farbraum, oft durch Auswahl k zufälliger Pixel aus dem Bild.
Assignment: jedem Pixel wird der nächstgelegene Zentroid zugewiesen (Distanz typischerweise Euklidisch im RGB-Raum).
Update: jeder Zentroid wird auf den Mittelwert (Mean) aller ihm zugewiesenen Pixel verschoben.
Iteration: Schritte 2 und 3 wiederholen, bis sich die Zentroide kaum noch bewegen (Konvergenzkriterium) oder eine maximale Iterationszahl erreicht ist.

Typische Konvergenz tritt nach 10 bis 30 Iterationen ein. Der Generator auf farbpalette-generieren.de stoppt nach 50 Iterationen sicherheitshalber, was praktisch immer ausreicht.

Die Pipeline im Browser

Der Datenfluss vom hochgeladenen Bild zur fertigen Palette läuft in fünf Schritten:

File-Input: Browser-File-API gibt dir ein File-Objekt mit MIME-Type und Bytes.
Magic-Bytes-Check: erste 8 Bytes lesen und gegen JPG (FF D8 FF), PNG (89 50 4E 47), WebP (52 49 46 46 … 57 45 42 50) prüfen.
Canvas-Rendering: Bild in ein verstecktes Canvas-Element zeichnen, dabei auf 200x200 Pixel skalieren.
Pixel-Sampling: per canvas.getContext('2d').getImageData(0, 0, 200, 200) ein Uint8ClampedArray mit 40.000 RGBA-Quadrupeln holen, daraus ein Array von RGB-Triplets ableiten.
K-Means-Run: den Lloyd-Algorithmus über die 40.000 Punkte laufen lassen, k Zentroide herausgeben, in Hex und HSL konvertieren.

Der gesamte Prozess dauert auf modernen Devices etwa 100 bis 400 Millisekunden für k=5. Mehr Cluster und größere Bilder verlängern die Zeit linear.

Warum 200x200 Pixel reichen

Die Verkleinerung ist der wichtigste Performance-Trick. Ein 4K-Foto hätte etwa 8,3 Millionen Pixel, was K-Means im Browser auf einem Standard-Notebook fünf bis zehn Sekunden Wartezeit beschert. Verkleinert auf 200x200 sind es 40.000 Pixel, also Faktor 200 weniger Rechenaufwand. Das Ergebnis verändert sich dabei kaum, weil bei der Verkleinerung benachbarte Pixel gemittelt werden und so die dominanten Farben sogar leicht stabilisiert herauskommen. Studien zur Bildklassifikation zeigen, dass dominante Farbeigenschaften bereits in 64x64-Versionen stabil bleiben.

Der Trade-off: extrem kleine Details (etwa ein einzelner roter Apfel in einem Landschaftsbild) gehen bei aggressiver Verkleinerung verloren. Für klassische Mood-Board- oder Branding-Anwendungen ist das fast nie ein Problem, weil dominante Farben gerade die großflächigen Töne sind.

K-Means versus Median Cut

Beide Verfahren werden in der Praxis für Palettenextraktion eingesetzt. Die Unterschiede:

Verfahren	Prinzip	Geschwindigkeit	Genauigkeit	Typische Tools
K-Means	Iterative Cluster-Optimierung im RGB-Raum	Mittel	Hoch	farbpalette-generieren.de
Median Cut	Rekursive Box-Teilung entlang Achse mit max Streuung	Sehr schnell	Mittel	Pillow, ImageMagick, Color Thief

Median Cut teilt den dreidimensionalen RGB-Raum entlang der Achse mit der größten Streuung in zwei Hälften und macht das so lange rekursiv, bis k Boxen entstanden sind. Schnell, aber die Box-Grenzen liegen nicht zwingend in den dichtesten Punktwolken. K-Means optimiert dagegen direkt auf Distanz-Minimierung und liefert oft kohärentere Cluster, besonders bei Bildern mit vielen sehr ähnlichen Tönen.

Privacy-Architektur

Die Browser-only-Verarbeitung ist nicht nur Performance-Wahl, sondern auch Datenschutz-Wahl. DSGVO Art. 25 fordert Privacy by Design, also Schutzmaßnahmen, die von Anfang an in die Architektur eingebaut sind. Wenn keine Daten den Browser verlassen, gibt es keine Übertragung, keine Server-Verarbeitung, keine Logs und auch keine notwendige Auftragsverarbeitung. Der Generator auf farbpalette-generieren.de verzichtet bewusst auf jegliche Server-Roundtrips für die Bildverarbeitung.

Das hat einen weiteren Vorteil: vertrauliche Marketing-Mockups, Logo-Drafts oder Produktfotos können ohne NDA-Bedenken hochgeladen werden, weil sie technisch nirgendwo ankommen außer im lokalen Browser-Speicher.

Fünf Cluster-Zentroide finden die dichtesten Bereiche der Pixel-Wolke und liefern die dominanten Farben.

Edge-Cases beim Extrahieren

Drei Situationen verdienen besondere Aufmerksamkeit:

Bilder mit dominantem weißem Hintergrund: ein Produktfoto auf weißem Studio-Hintergrund liefert mit naiven Einstellungen drei oder vier weiße bis hellgraue Töne plus eine einzelne Akzentfarbe. Lösung: vor dem K-Means-Run weiße Pixel (RGB nahe 255, 255, 255 mit Toleranz) filtern oder als gewichteten Cluster behandeln. Der Generator bietet optional eine Hintergrund-Maskierung an.

Skalen-Bilder (Verläufe, Sonnenuntergänge): bei kontinuierlichen Übergängen findet K-Means oft fünf benachbarte Töne aus dem Verlauf statt fünf verschiedener Farben. Das ist kein Bug, sondern eine korrekte Repräsentation des Bildinhalts, mag aber für Branding ungeeignet wirken. In dem Fall hilft es, mehrere unterschiedliche Bilder zu kombinieren.

Texte und Logos: Bilder mit viel schwarzem Text auf hellem Hintergrund verschwenden Cluster auf Anti-Aliasing-Graustufen am Buchstabenrand. Pre-Processing per Schwellenwert kann hier die Ergebnisse verbessern, ist im Generator aktuell aber nicht eingebaut.

Warum die Initialisierung zählt

Lloyd’s Algorithm konvergiert garantiert, aber nicht garantiert zum globalen Optimum. Bei ungünstiger Initialisierung kann der Algorithmus in einem lokalen Minimum stecken bleiben. Die Standard-Verbesserung ist K-Means++, beschrieben 2007 von Arthur und Vassilvitskii: die ersten Zentroide werden nicht rein zufällig gesetzt, sondern so, dass sie möglichst weit voneinander entfernt liegen. Das verbessert die Cluster-Qualität spürbar bei minimalem Mehraufwand. Der Generator nutzt eine K-Means++-Variante als Default.

Distanzmetrik: RGB versus Lab

Eine oft übersehene Entscheidung ist die Distanzmetrik. Die simpelste Variante misst die Euklidische Distanz im RGB-Raum: sqrt((R1-R2)² + (G1-G2)² + (B1-B2)²). Schnell, aber wahrnehmungsverzerrt. Zwei RGB-Punkte mit gleicher numerischer Distanz können vom Auge sehr unterschiedlich nah wahrgenommen werden, weil RGB nicht wahrnehmungslinear ist. Die saubere Lösung wäre, die Distanz im CIELAB- oder OKLab-Raum zu rechnen, weil diese Räume wahrnehmungslinear sind. Praktisch wird das aber selten gemacht, weil die Konvertierung RGB nach Lab pro Pixel zusätzliche Rechenzeit kostet und der visuelle Unterschied bei k=5 bis k=10 oft kaum auffällt. Wer eine sehr hochwertige Palette will, kann den Generator-Output nachträglich im OKLab-Raum prüfen und benachbarte Cluster verschmelzen, falls sie perzeptuell zu nah liegen. Der Hauptlauf bleibt aus Performance-Gründen meist im RGB-Raum.

Gewichtung dominanter Pixel

Eine Variante, die Profis nutzen, ist die gewichtete Pixel-Behandlung. Statt jeden Pixel gleich zu zählen, kann man bestimmte Pixel höher gewichten: solche im Bildzentrum (weil das Auge primär dorthin schaut), gesättigte Pixel (weil sie als dominant wahrgenommen werden, auch wenn sie flächenmäßig weniger sind) oder Pixel in Augenhöhe bei Produktfotos. Die Gewichtung modifiziert den Update-Schritt von K-Means: der Zentroid wird nicht auf den arithmetischen Mittelwert der zugewiesenen Pixel verschoben, sondern auf den gewichteten Mittelwert. Mathematisch: m = Sigma(w_i · p_i) / Sigma(w_i). Color Thief implementiert eine ähnliche Heuristik, indem es nicht alle Pixel gleichmäßig sampelt, sondern jeden zehnten oder fünften, und dabei sehr ähnliche Pixel früh gruppiert. Der Generator auf farbpalette-generieren.de verwendet aktuell ungewichtetes K-Means, eine Erweiterung um Zentrums-Gewichtung steht für eine Roadmap-Iteration auf der Liste.

Vergleich zu modernen Methoden: DeepCluster und Vision-Models

Klassische K-Means- und Median-Cut-Verfahren sind die Standard-Werkzeuge im Web-Tool-Bereich, weil sie schnell, deterministisch und ohne Server-Backend funktionieren. Wer höchste Genauigkeit braucht, kann moderne Vision-Models einsetzen: DeepCluster (Facebook AI Research, 2018), VGG-Feature-basierte Clustering-Verfahren oder fine-tuned CNN-Modelle, die Bilder in semantische Cluster-Räume mappen. Diese Modelle liefern oft bessere Ergebnisse bei komplexen Szenen (Hintergrund-Vordergrund-Trennung, semantische Farbgruppen), benötigen aber GPU oder Server-Inferenz, was für ein reines Browser-Tool ungeeignet ist. Für die typische Use-Cases (Mood-Board-Generierung, Marken-Inspirationspaletten, schneller Foto-Extrakt) bleibt klassisches K-Means die richtige Wahl in Bezug auf das Verhältnis von Aufwand und Ergebnis. Wer Bilder mit komplexer Komposition analysiert, kann den Generator-Output mit manueller Nachjustierung kombinieren oder mehrere k-Werte parallel rechnen und visuell den besten wählen.

Was beim Extrahieren wirklich zählt

Drei Stellschrauben dominieren die Ergebnisqualität: die Wahl von k (5 für Branding, 7 bis 10 für Datenviz), die Bildqualität (klare dominante Farben helfen, Verläufe und Anti-Aliasing erschweren) und die Initialisierung (K-Means++ statt rein zufällig). Wer das versteht, kommt mit dem Generator schnell zu brauchbaren Paletten, ohne das Bild manuell nachzubearbeiten. Und weil alles im Browser läuft, bleibt das Original-Bild beim User.

Wenn dir ein Fehler auffällt oder eine Quelle veraltet ist, schreib an info@akara-solutions.de, bestätigte Korrekturen dokumentieren wir auf /korrekturen/.