Farbpaletten-Extraktor aus Bild

Farbpaletten-Extraktor aus Bild

Lade ein Bild hoch und extrahiere seine dominanten Farben sofort. Das Tool liest jedes Pixel, führt Median-Cut-Quantisierung durch, um ähnliche Farben zu gruppieren, und gibt eine sortierte Palette mit Hex-Codes, RGB-Werten und Prozentwerten zurück. Die gesamte Verarbeitung erfolgt in deinem Browser.

Was ist ein Farbpaletten-Extraktor?

Ein Farbpaletten-Extraktor analysiert ein Bild und erkennt seine dominanten Farben und gibt eine sortierte Liste mit Hex-Codes, RGB-Werten und dem Prozentsatz der Pixel zurück, die jede Farbe repräsentiert. Dies ist nützlich zum Abgleich von Markenfarben aus einem Logo, zum Erstellen kohärenter Designthemen aus Fotos, zum Aufbau von UI-Farbsystemen aus Referenzbildern und zur Sicherstellung von Barrierefreiheit durch Verstehen der tatsächlichen Farbverteilung. Der gängigste Algorithmus ist Median-Cut-Quantisierung, die ähnliche Pixel im 3D-Farbraum gruppiert und jede Gruppe mittelt.

So verwendest du es

1. Ziehe ein Bild per Drag & Drop oder klicke zum Hochladen (PNG, JPEG, WebP, GIF, BMP oder SVG)
2. Passe die Farbanzahl mit dem Schieberegler an (2-16 Farben)
3. Klicke auf Kopieren neben einer Palette, um den Hex-Wert zu kopieren
4. Exportiere die gesamte Palette als CSS-Variablen oder JSON

Wie Median-Cut-Quantisierung funktioniert

Die Farbe jedes Pixels ist ein Punkt im 3D-Raum, wo Rot, Grün und Blau die Achsen bilden. Ein 800x800 Bild erzeugt 640.000 Punkte. Median Cut baut eine Begrenzung um alle diese Punkte und teilt sie am Median entlang der längsten Achse in zwei kleinere Boxen. Jede Box wird rekursiv geteilt, bis die Zielzahl der Boxen erreicht ist. Die Pixel in jeder Box werden gemittelt, um eine einzelne Palettenfarbe zu erzeugen.

Dieser Ansatz bewahrt Farbkontrast besser als einfaches Clustering. Die Teilung am Median stellt sicher, dass jede Box ungefähr die gleiche Anzahl von Pixeln enthält, sodass die Palette die tatsächliche Farbverteilung des Bildes repräsentiert.

Das Tool filtert transparente Pixel (Alpha < 25), nahezu schwarze Pixel (Durchschnitt < 15) und nahezu weiße Pixel (Durchschnitt > 240) vor der Quantisierung heraus. Diese Pixel tragen selten nützliche Paletteninformationen bei.

Wann unterschiedliche Farbzahlen verwenden

2-4 Farben erzeugen flache, posterisierte Paletten. Verwende diese für minimale Logo-Farbextraktion oder für vereinfachte Markenpaletten.

6-8 Farben geben eine ausgewogene Darstellung der meisten Bilder. Fotos mit natürlicher Beleuchtung, Landschaften und Produktfotos funktionieren in diesem Bereich gut.

10-16 Farben erfassen subtile Farbverschiebungen in Verläufen, Sonnenuntergängen, Stofftexturen und anderen Bildern mit breitem Tonumfang.

Verwendung in CSS- und Design-Workflows

Der CSS-Export erzeugt benannte Variablen, die jeder Palette zugeordnet sind. Beispiel-Ausgabe für eine 8-Farben-Palette:

:root {
  --color-palette-1: #1a365d;
  --color-palette-2: #2b6cb0;
  --color-palette-3: #63b3ed;
  --color-palette-4: #bee3f8;
}

Der JSON-Export gibt strukturierte Daten mit Hex, RGB und Prozentwert zurück. Nützlich für Design-Token in Build-Systemen.

Verwandte Tools

Möchtest du eine einzelne Farbe zwischen Formaten konvertieren? Verwende den Farbkonverter. Erzeuge CSS-Verläufe aus deiner Palette mit dem CSS-Verlaufsgenerator. Überprüfe die Barrierefreiheit vor der Verwendung extrahierter Farben mit dem WCAG-Kontrastprüfer.