Eine brauchbare Pixel-Art-Palette aus einem Bild extrahieren

Mit der Datei beginnen, die noch saubere Pixel enthält

Nutze das ursprüngliche PNG, wenn du es hast. Eine JPEG-Bildschirmaufnahme kann an jeder Kante leicht unterschiedliche RGB-Werte erzeugen. Eine mit sechs bewusst gewählten Farben gezeichnete Figur kann dadurch scheinbar Hunderte enthalten. Verlustbehaftetes WebP kann dasselbe bewirken. Der Palettenextraktor zählt dekodierte Farben exakt. Er behandelt neue, fast gleiche Farbtöne nicht so, als wären sie dieselbe Farbe.

Wenn du die Palette der Figur möchtest, schneide vor dem Hinzufügen unbeteiligte Oberflächenelemente, Ränder oder einen großen einfarbigen Hintergrund weg. Sonst kann die Hintergrundfarbe allein deshalb an erster Stelle stehen, weil sie die meisten Pixel belegt. Passe bei einem transparenten Sprite den Mindest-Alpha-Schwellenwert an, um fast unsichtbare Randpixel zu ignorieren.

Eine praktische Figurenpalette mit sechs Farben

Stell dir einen Helden mit 32 × 32 Pixeln und blauer Jacke vor. Die extrahierte Liste enthält zwei Blautöne, einen blassen Lichtakzent, eine dunkle Kontur, Haut und einen warmen Akzent. Kopiere nicht blind die sechs häufigsten Einträge. Ordne sie nach ihrer Aufgabe: Kontur, Jackenschatten, Jackengrundfarbe, Jackenlichtakzent, Haut und Akzent. Die Folge von Schatten über Grundfarbe zu Lichtakzent ist eine Farbabstufung. Dieser Zusammenhang ist wichtiger als die Reihenfolge der Farben in der Häufigkeitsliste.

1. Lade den sauberen Sprite und prüfe die Häufigkeitsliste. Kopiere die Hex-Codes der Farben, die sichtbar zur Figur gehören.
2. Notiere zu jedem Code kurz seine Funktion, etwa Jackenschatten, Jackengrundfarbe oder Jackenlichtreflex. Wenn zwei Codes ununterscheidbar aussehen, zoome ins Original, bevor du entscheidest, ob beide beabsichtigt sind.
3. Zeichne eine neue Figur mit derselben Kontur- und Farbabstufungslogik. Verwende exakte Farben erneut, wo Konsistenz hilft, aber ändere Akzent- oder Materialfarben, wenn die neue Figur eine andere Identität benötigt.
4. Exportiere CSS oder JSON, um die gewählten Werte zu erhalten. Betrachte diesen Export als Arbeitsliste, nicht als Beleg dafür, dass jede gezählte Farbe in deine endgültige Palette gehört.

Warum ein Foto ein unbrauchbares Ergebnis liefert

Ein Foto enthält viele Farbverläufe und Kompressionsabweichungen. Exaktes Zählen zeigt, welche RGB-Tripel am häufigsten vorkommen, fasst aber keine ähnlichen Farben zusammen und wählt keine harmonischen Farbabstufungen aus. Wenn dein Ziel darin besteht, reduzieren ein Foto auf zwölf stilisierte Farben reduzieren möchtest, brauchst du Quantisierung oder manuelle Palettengestaltung, nicht nur Extraktion. Das ImageMint-Werkzeug meldet bewusst die in den Pixeln vorhandenen Farben. Es färbt das Bild nicht um.

Behalte für ein größeres Projekt ein Referenzblatt mit benannten Farbmustern. Analysiere neue Grafiken, um unbeabsichtigte Farbtöne zu erkennen. Nearest-Neighbor-Vergrößerung kann vorhandene Pixel leichter erkennbar machen, aber keine bereits in der Quelle enthaltene Unschärfe rückgängig machen. Beschaffe nach Möglichkeit ein verlustfreies Original.

Alpha- und Prozentwerte richtig lesen

Eine Arbeitsfläche mit 32 × 32 Pixeln enthält 1024 Pixel. Angenommen, nur 600 überschreiten den gewählten Alpha-Schwellenwert, und 150 davon verwenden die Grundfarbe der Jacke. Die angezeigte Häufigkeit beträgt dann 150 ÷ 600 = 25%, nicht 150 ÷ 1024. Transparente Ränder zählen nicht als Farbe. Ein niedrigerer Schwellenwert kann schwache Randfarben wieder in die Liste aufnehmen.

Der Standardschwellenwert 128 berücksichtigt ungefähr halbdeckende Pixel und darüber. Der Wert 255 berücksichtigt nur vollständig deckende Pixel. Beginne bei bewusst hartkantigen Grafiken mit 255 und vergleiche mit 128, wenn der Sprite nützliche weiche Kanten hat. Eine Änderung von Mindest-Alpha löscht das vorherige Ergebnis. Führe die Analyse erneut aus, bevor du Anzahlen vergleichst.

Eine engere Farbauswahl exportieren, ohne seltene Akzente zu verlieren

Die häufigsten 8, 16, 32 und 64 sind Anzeige- und Exportgrenzen. Sie reduzieren nicht die Farben des Bildes. Decken die acht häufigsten Farben 85% der berücksichtigten Pixel ab, gehören die übrigen 15% zu nicht angezeigten Farben. Erhöhe das Limit, um einen Augenlichtreflex oder kleinen Akzent zu prüfen, bevor du die Auswahlliste als vollständig ansiehst.

Der CSS-Download verwendet nummerierte Variablen wie --pixel-color-01. Die Rangfolge kann sich ändern, wenn sich die Pose einer Figur ändert. Behandle diesen Namen deshalb nicht als feste semantische Rolle wie „Jackenschatten“. Benenne die ausgewählten Variablen in deinem eigenen Projekt um, nachdem du ihnen Rollen zugewiesen hast. JSON erhält die angezeigten Farben und Häufigkeiten; es ist weder ein Bild mit indizierter Farbpalette noch eine Anleitung zum Umfärben.

Die Palette an der tatsächlichen Grafik prüfen

1. Zeichne eine kleine neue Pose mit der gewählten Kontur und einer Materialabstufung aus drei Farben.
2. Stelle es bei nativer Größe neben die Quelle. Prüfe die Erkennbarkeit der Silhouette und wichtiger Akzente.
3. Analysiere die neue PNG-Datei und suche nach unbeabsichtigten Farbtönen durch einen weichen Pinsel oder eine Glättung.
4. Behalte eine Referenz mit benannten Farbmustern und ein sauberes Original. Ein Farbzählbericht ergänzt die visuelle Beurteilung, statt sie zu ersetzen.