Farbpalette aus einem Bild erstellen

Eine gute Palette beginnt oft mit einem Bild, das dir gefällt: Concept Art, ein Filmstill, ein Urlaubsfoto. Seine Farben zu extrahieren gibt einen stimmigen Startpunkt für Illustrationen, UI-Themes oder Pixel Art.

So funktioniert es

Das Paletten-Tool verkleinert das Bild und gruppiert ähnliche Pixel mit dem k-Means-Verfahren, gewichtet nach der menschlichen Helligkeitswahrnehmung. Jede Farbe ist der Mittelwert einer Gruppe; der Prozentwert zeigt ihren Bildanteil.

Schritt für Schritt

1. Bild hineinziehen (es bleibt im Browser).
2. Farbanzahl wählen: 5–6 für eine Stimmungspalette, 12–16 als Arbeitspalette für Pixel Art.
3. Auf eine Farbe klicken, um den HEX-Code zu kopieren – oder die ganze Liste.
4. Als CSS-Variablen exportieren oder als .gpl für GIMP, Aseprite, Krita oder Inkscape laden.

Bessere Paletten

• Vorher zuschneiden, wenn Ränder oder ein Himmel dominieren.
• Verschiedene Anzahlen testen: Die 6er-Palette ist kein Ausschnitt der 12er.
• Nachjustieren: Extrahierte Farben sind Mittelwerte und wirken oft etwas matt. Akzente sättigen, ein echtes Dunkel und Hell ergänzen.

Für Benutzeroberflächen

Eine extrahierte Palette ist Stilreferenz, kein barrierefreies Farbsystem. Kontrast zwischen Text und Hintergrund prüfen (WCAG: mindestens 4,5:1 für normalen Text).

Spritesheets zerlegen? Mit dem Spritesheet-Tool.