Extrahieren Sie dominante Farben aus einem hochgeladenen Bild, indem Pixel abgetastet, ähnliche Werte quantisiert und die häufigsten Farbfelder gerankt werden. Jedes Ergebnis enthält einen CSS-Hex-Code und das passende RGB-Tupel über den gemeinsamen Farb-Helper.
Algorithmus (vereinfacht)
- Bild in voller Auflösung auf eine Canvas zeichnen
- Pixel mit Schrittweite durchlaufen (standardmäßig jeder 4. Pixel) zugunsten der Leistung
- Weitgehend transparente Pixel überspringen (Alpha unter 128)
- Kanäle in 32er-Stufen-Buckets quantisieren, um Fast-Duplikate zusammenzuführen
- Buckets nach Häufigkeit sortieren und die Top-N-Farben zurückgeben
Das ist eine frequenzbasierte Palette, kein wahrnehmungsbasiertes Clustering (kein k-means). Gut geeignet für flache UI-Grafiken und Poster; bei verrauschten Fotos können matte Mitteltöne entstehen.
Wann Sie es nutzen
- Farbpalette aus einem Markenfoto oder Logo-Raster aufbauen
- Mit den Colors-Tools (
from-hex-to-rgb) für weitere Umwandlungen kombinieren - Design-Tokens aus Marketing-Screenshots dokumentieren
Einschränkungen
Stark komprimierte JPEGs und Verläufe liefern gemittelte Farben. Transparente PNG-/WebP-Hintergründe werden bei niedrigem Alpha ignoriert. Sehr große Bilder werden dünn abgetastet—extreme Details können fehlen. Die Ergebnisse sind indikativ und ersetzen keine professionellen Palette-Extraktoren.
Beispiel
Geben Sie beispielsweise die Standard-Beispielwerte im Formular ein und vergleichen Sie die Ausgabe mit einer bekannten Referenz; ändern Sie jeweils nur einen Eingabewert, um die Wirkung zu sehen.