Warum wir dem Farbwähler automatische Paletten-Extraktion hinzugefügt haben

Unser Farbwähler hat schon immer erlaubt, ein Bild hochzuladen und auf einen beliebigen Pixel zu klicken, um dessen exakten HEX-, RGB- und HSL-Wert zu erhalten. Das beantwortet „welche Farbe hat dieser bestimmte Punkt?“ — nützlich, aber nicht die Frage, die sich die meisten Leute beim Hochladen eines Fotos eigentlich stellen. Meist ist es „was ist das gesamte Farbschema dieses Bildes?“ — die Markenpalette aus einem Logo zu ziehen oder die Stimmung eines Referenzfotos für das Farbschema einer Website zu treffen.

Einzelpixel-Sampling kann das nicht beantworten. Deshalb haben wir die Paletten-Extraktion hinzugefügt: Bild hochladen, und das Tool zieht jetzt automatisch die acht dominantesten Farben heraus und zeigt sie als anklickbare Farbfelder an.

So funktioniert es

Es ist kein KI-Modell beteiligt und nichts wird irgendwohin hochgeladen — es ist ein einfacher Häufigkeitszähl-Algorithmus, der in wenigen Millisekunden läuft:

Das Bild wird auf ein 80×80-Canvas herunterskaliert. Für Farbstatistiken wird keine volle Auflösung benötigt, und die Herunterskalierung hält das Ganze auch bei großen Fotos sofort schnell.
Jeder Pixel wird nach einer vergröberten Version seiner Farbe eingeordnet — die oberen 5 Bits jedes RGB-Kanals, sodass visuell fast identische Pixel im gleichen Bucket landen, statt jeweils als eigene Farbe gezählt zu werden.
Die Buckets werden danach sortiert, wie viele Pixel darin gelandet sind, und die acht größten werden zur Palette, jeweils dargestellt als die Durchschnittsfarbe von allem in diesem Bucket.

Das war’s. Kein Machine Learning, kein externer Dienst — nur Herunterskalieren und Zählen, weshalb es sofort passiert und deinen Browser nie verlässt.

Auf ein Farbfeld klicken, den Code bekommen

Jedes Palette-Farbfeld ist anklickbar: Klick darauf, und es wird die aktive Farbe des Tools, mit automatisch ausgefülltem HEX, RGB und HSL, und der Hex-Wert wird im selben Klick in die Zwischenablage kopiert. Es gibt auch einen „Alle kopieren“-Button, falls du die ganze Palette als kommagetrennte Liste möchtest — praktisch zum direkten Einfügen in ein Design-Tool oder einen CSS-Custom-Properties-Block.

Ausprobieren

Lade ein beliebiges Bild hoch — einen Screenshot, ein Logo, ein Foto — auf der Farbwähler-Seite, und die Palette erscheint automatisch darunter.