Farbpaletten-Extraktor

Was ist ein Farbpaletten-Extraktor?#

Jedes Bild trägt eine kleine Gruppe Farben, die den Großteil der Wirkung erzielen — das Marken-Blau eines Logos, die warmen NeutralTöne eines Produktfotos, die Zweiton-Palette einer Illustration. Ein Paletten-Extraktor zieht diese repräsentativen Farben automatisch heraus, damit Sie sie wiederverwenden können: ein passendes UI-Theme bauen, eine Button-Farbe wählen, die nicht kollidiert, CSS-Variablen erzeugen oder einfach verstehen, welche Farbfelder ein Bild tatsächlich dominieren, gegenüber denen, die Ihr Auge für wichtig hält.

Diese Seite führt eine Median-Cut-Farbquantisierung vollständig in Ihrem Browser aus. Sie laden ein Bild, es wird auf eine handhabbare Stichprobengröße herunterskaliert, jeder Pixel wird gelesen, und der Algorithmus spaltet den Farbraum wiederholt entlang seines breitesten Kanals auf, bis er die gewünschten Top-N-Farbfelder (2–16) hat. Sie erhalten jede Farbe als Musterfeld mit ihrem Anteil am Bild, plus die geradlinige Durchschnittsfarbe, exportierbar als HEX-Liste, als CSS-Variablen-Datei oder als strukturiertes JSON.

Verwendung#

1. Ziehen Sie ein Bild auf die gestrichelte Ablagezone (oder klicken Sie sie an, um eine Datei auszuwählen). PNG, JPEG und WebP funktionieren alle; transparente PNGs werden korrekt behandelt, weil transparente Pixel vor dem Zählen übersprungen werden.
2. Ziehen Sie den Regler Anzahl Farben (2–16), um zu wählen, wie viele repräsentative Farben extrahiert werden. Sechs ist ein guter Standard für eine ausgewogene Palette; zwei oder drei isolieren das dominante Paar.
3. Lesen Sie die Musterfeld-Liste rechts: Jede Zeile zeigt die Farbe, ihre HEX/RGB/HSL-Werte und den Prozentsatz der abgetasteten Pixel, die in diesen Eimer fielen, sortiert nach Dominanz absteigend. Klicken Sie auf einen Wert, um ihn zu kopieren.
4. Prüfen Sie die Karte Durchschnittsfarbe in der Seitenleiste für den geradlinigen Mittelwert jedes Pixels — nützlich, wenn Sie einen einzigen allgemeinen Hintergrundton statt einer gereihten Palette wollen.
5. Wählen Sie ein Download-Format:
   • HEX-Liste (.txt) — ein #RRGGBB pro Zeile, dominante zuerst. Direkt in ein Design-Tool einfügen.
   • CSS-Variablen (.css) — ein :root { --palette-1: …; …; --palette-avg: …; }-Block, den Sie in ein Stylesheet einfügen können.
   • JSON (.json) — strukturierte Musterfelder mit hex, rgb, count und share, plus dem Durchschnittswert und Stichproben-Metadaten.
6. Klicken Sie auf Herunterladen, um die Datei zu speichern.

Hauptfunktionen#

• Median-Cut-Quantisierung, selbst geschrieben. Dieselbe Algorithmus-Familie, die professionelle Bild-Tools verwenden, läuft in Ihrem Tab: am Median entlang des breitesten Kanals spalten, den jeweils breitesten Kasten weiter spalten, bis die gewünschte Anzahl erreicht ist.
• Ehrliche Anteilszahlen. Jedes Musterfeld trägt den echten Anteil der abgetasteten Pixel, den es vertritt, sodass „dominant“ nach Fläche dominant bedeutet, nicht nach Vermutung.
• Durchschnitt separat von Dominant. Der geradlinige Pixel-Mittelwert wird neben der gereihten Palette angegeben — zwei verschiedene Fragen in einem Durchgang beantwortet.
• Transparente Pixel übersprungen. Alpha unterhalb eines kleinen Schwellenwerts wird ausgeschlossen, sodass eine transparente PNG die Farben meldet, die tatsächlich gezeichnet werden, nicht eine trübe Mischung mit der Transparenz.
• Drei Export-Formen. HEX-Liste für Design-Tools, CSS-Variablen für ein Stylesheet, JSON für Programme — alle aus genau denselben Mustern erzeugt, die Sie sehen.
• 100 % lokal. Das Bild wird vom Browser dekodiert und abgetastet. Es gibt keinen Upload.

Ausführliches Beispiel#

Legen Sie ein Marken-Logo ab, das ein tiefes Firmen-Blau auf weißem Hintergrund mit einem kleinen Akzent ist — sagen wir, das Blau füllt etwa 60 % der Canvas. Mit Anzahl Farben auf 4 sieht eine typische Extraktion so aus:

#1D4ED8   58.4%   rgb(29, 78, 216)    hsl(224, 76%, 48%)
#FFFFFF   31.2%   rgb(255, 255, 255)  hsl(0, 0%, 100%)
#172554   7.1%    rgb(23, 37, 84)     hsl(224, 57%, 21%)
#93C5FD   3.3%    rgb(147, 197, 253)  hsl(217, 95%, 78%)

Das dominante Musterfeld ist das Marken-Blau mit etwa 58 %, gefolgt von Weiß. Beachten Sie die beiden zusätzlichen Blautöne — ein dunklerer Ton und ein hellerer —, die der Algorithmus fand, weil sie eine Median-Grenze überschreiten; das sind genau die Farben, die Sie für Hover-Zustände und Schatten wiederverwenden würden. Exportieren Sie als CSS-Variablen und Sie erhalten ein Drop-in-Theme:

:root {
  --palette-1: #1D4ED8;
  --palette-2: #FFFFFF;
  --palette-3: #172554;
  --palette-4: #93C5FD;
  --palette-avg: #5A7BCB;
}

--palette-avg ist der geradlinige Mittelwert jedes Pixels — ein gedämpftes Mittelblau, das sich als in Markenrichtung getönter Seitenhintergrund gut eignet.

FAQ#

Die Prozentsätze ergeben nicht genau 100 %.#

Sie werden für die Anzeige gerundet (die zugrunde liegenden Werte sind im JSON-Export auf vier Dezimalstellen genau). Ein kleiner Rest stammt auch daraus, dass transparente Pixel vor dem Zählen übersprungen werden, sodass die Summe nur die tatsächlich abgetasteten deckenden Pixel widerspiegelt.

Ich erhalte weniger Musterfelder als angefordert.#

Median-Cut stoppt früh, wenn jeder verbleibende Farbkasten solide ist (Bereich null auf allen Kanälen) — es gibt wirklich nichts mehr zu spalten. Die Anforderung von 8 Farben auf einem 3-Farben-Bild liefert 3, nicht 8 erfundene.

Warum ist die Durchschnittsfarbe so verschieden von der dominanten?#

Sie beantworten verschiedene Fragen. Die dominante Farbe ist der einzelne häufigste Eimer; der Durchschnitt ist das arithmetische Mittel jedes Pixels, das einige große, aber unterschiedlich gefärbte Bereiche vom häufigsten Wert wegziehen kann. Ein halb-rotes, halb-grünes Bild hat einen bräunlichen Durchschnitt, aber kein braunes als dominante Farbe — beide Zahlen sind korrekt.

Funktioniert es bei Fotos oder nur bei flacher Grafik?#

Beides. Flache Grafik liefert saubere, gut getrennte Musterfelder; Fotos liefern eine abgestuftere Menge, weil reale Töne viele benachbarte Farben umfassen. Erhöhen Sie bei einem Foto Anzahl Farben auf 8–12, um die reichere Spanne zu erfassen.