Direkte Antwort
Dieses Designtool analysiert Bilddateien mit Median-Cut-Farbquantisierung im Browser, um repräsentative dominante Farben als Design-Tokens zu extrahieren.
So verwenden Sie dieses Tool
Bild per Drag-and-Drop laden
Ziehen Sie ein Foto oder eine Illustration in den Analysebereich.
Palettengröße konfigurieren
Wählen Sie die gewünschte Anzahl an Leitfarben (z. B. 5 bis 8 dominante Farbtöne).
Farbwerte kopieren und exportieren
Klicken Sie auf einzelne Farbfelder für HEX-, RGB- oder HSL-Werte oder exportieren Sie die Palette als JSON- oder CSS-Variablen.
Pixelanalyse und Farbquantisierung im Canvas-Speicher
Das Bild wird in ein Canvas-Pixelarray geladen. Die Farbtöne werden im dreidimensionalen RGB-Farbraum gruppiert, um Rauschen zu filtern und optisch bedeutsame Farbcluster hervorzuheben.
- Dichte-Clusterung: Häufig wiederkehrende Farbfamilien werden als primäre Akzentfarben identifiziert.
- Median-Cut: RGB-Farbbereiche werden aufgeteilt und durch gewichtete Mittelwerte repräsentiert; einfarbige Bilder liefern entsprechend weniger Farben.
Praktische Beispiele
Farbpalette aus einem Landschaftsfoto
Eingabe: Foto: alpen-sonnenuntergang.jpg (Hochauflösend)
Ausgabe: Dominante Töne: Dunkelblau (#1B2A4A), Bergkiefer (#3D5A40), Alpenglühen (#E06D53), Abendrot (#F4A261), Schneeweiß (#EAEBED)
Liefert eine harmonische, an der Natur orientierte Farbpalette für ein Web-Redesign.
Einschränkungen
- Große Bilder werden für die Farbanalyse vorab skaliert, um Rechenzeit und Speicherbedarf im Browser zu reduzieren.
- Bilder mit sehr starkem Rauschen oder hoher Kompressionsartefakt-Dichte können leicht verfälschte Farbzentren liefern.
Häufige Fragen
Verbleiben die analysierten Fotos privat auf meinem Rechner?
Ja. Die Pixeldaten werden ausschließlich im lokalen Speicher des Browsers untersucht und zu keinem Zeitpunkt an externe Server übertragen.
In welchen Formaten kann ich die Farbpalette exportieren?
Sie können Farbwerte direkt als HEX-Codes, RGB, HSL, fertige CSS-Custom-Properties (:root) oder als JSON-Objekt kopieren.
Maßgebliche Referenzen & Standards
- MDN Web Docs: Direkte Pixelverarbeitung mit HTML5 Canvas ↗ — Dokumentation zur Bilddaten-Extraktion und zum Zugriff auf RGBA-Puffer.