Das Problem: 16 Millionen Farben, gesucht sind acht
Ein normales Foto kann pro Pixel eine von rund 16,7 Millionen Farben tragen — und hat davon oft zehntausende tatsächlich im Bild. Das Farbpalette-Tool soll daraus eine handvoll dominanter, repräsentativer Farben machen. Die Frage ist: Welche acht Farben fassen ein Bild am besten zusammen? Der Weg dorthin heißt Farbquantisierung — und unsere Variante ist bewusst schlicht gehalten.
Schritt 1: das Bild auf ein Canvas lesen
Zuerst wird das Bild auf ein (unsichtbares) Canvas gezeichnet, und über getImageData() bekommen wir die rohen Pixeldaten: ein langes Array, in dem jeweils vier Werte einen Pixel beschreiben — Rot, Grün, Blau und Alpha. Ab hier ist alles nur noch Rechnen mit Zahlen. Und wie alles bei uns läuft das lokal im Browser; das Bild verlässt den Rechner nicht (mehr dazu im Werkstatt-Bericht zur Browser-lokalen Architektur).
Schritt 2: ähnliche Farben zusammenfassen (das Raster)
Würde man jede exakte Farbe einzeln zählen, hätte man tausende fast identische Töne — nutzlos für eine Palette. Der Trick ist, ähnliche Farben in Schubladen zu werfen. Wir runden dafür jeden der drei Farbkanäle auf das nächste Vielfache von 16:
r = Math.round(r / 16) * 16;
g = Math.round(g / 16) * 16;
b = Math.round(b / 16) * 16;Damit werden aus 256 möglichen Werten pro Kanal nur noch 16 Stufen — und zwei Rottöne, die sich um wenige Zahlenwerte unterscheiden, landen in derselben Schublade. Jede Schublade bekommt einen Schlüssel wie "128,64,32", und wir zählen mit, wie oft sie getroffen wird.
Schritt 3: nicht jeden Pixel lesen (Subsampling)
Ein Detail, das den Unterschied zwischen „ruckelt" und „sofort" macht: Wir lesen nicht jeden einzelnen Pixel, sondern nur jeden n-ten (Subsampling). Ein Foto mit Millionen Pixeln braucht das nicht — für die dominanten Farben genügt eine repräsentative Stichprobe, und die ist um ein Vielfaches schneller. Die Palette ändert sich dadurch praktisch nicht, weil häufige Farben auch in der Stichprobe häufig bleiben. Zusätzlich skalieren wir große Bilder vorab herunter — noch mehr Tempo, gleiches Ergebnis.
Schritt 4: nach Häufigkeit sortieren
Jetzt liegt eine Liste von Farb-Schubladen mit ihren Trefferzahlen vor. Wir sortieren sie nach Häufigkeit — die am häufigsten getroffene Farbe zuerst — und nehmen die obersten als Palette. Aus der Gesamtzahl der Treffer berechnen wir zusätzlich den prozentualen Anteil jeder Farbe, damit man sieht, wie sehr ein Ton das Bild prägt. Fertig ist die Palette.
Warum nicht der „bessere" Algorithmus?
Es gibt ausgefeiltere Verfahren — Median Cut, k-Means-Clustering — die mathematisch „optimalere" Paletten liefern. Wir haben uns bewusst für den einfachen, häufigkeitsbasierten Weg entschieden, und zwar aus drei Gründen:
- Tempo: Das Verfahren läuft in Millisekunden, auch auf schwachen Geräten — wichtig, wenn alles im Browser passiert.
- Nachvollziehbarkeit: „Die häufigsten Farben" ist für Nutzer sofort verständlich; ein Cluster-Zentrum, das im Bild gar nicht vorkommt, wäre es nicht.
- Gutes-genug-Prinzip: Für Design-Paletten, Moodboards und Web-Farben liefert die häufigkeitsbasierte Methode Ergebnisse, die in der Praxis überzeugen.
Das ist eine wiederkehrende Entscheidung in dieser Werkstatt: das einfachste Verfahren, das die Aufgabe gut löst, schlägt das theoretisch beste, wenn es lokal, schnell und verständlich sein soll.
Was man mit der Palette anfängt
Die extrahierten Farben sind mehr als Spielerei: Sie liefern die Klammer für ein Moodboard, die Basis für eine konsistente Grafik-Serie oder die Markenfarben, an denen man sich beim Gestalten orientiert. Und weil das Tool die Werte als HEX ausgibt, lassen sie sich direkt in CSS oder Design-Programme übernehmen.