Kostenloser Farbpaletten-Extraktor

Wie die Farbextraktion wirklich funktioniert

Computergenerierte Paletten aus Bildern stammen von einem von zwei klassischen Algorithmen:

• K-Means-Clustering (Lloyd 1982; die zugrunde liegende Idee geht auf MacQueen 1967 und Forgy 1965 zurück). Wählen Sie K zufällige Farbschwerpunkte im Farbwürfel, ordnen Sie jedes Pixel seinem nächstgelegenen Schwerpunkt zu, berechnen Sie die Schwerpunkte als Mittelwert ihrer zugeordneten Pixel neu und wiederholen Sie, bis sich die Schwerpunkte nicht mehr bewegen. Die K endgültigen Schwerpunkte sind Ihre dominanten Farben.
• Median-Cut-Quantisierung (Heckbert, SIGGRAPH 1982). Teilen Sie den Farbwürfel rekursiv entlang seiner breitesten Dimension und teilen Sie dabei die Pixelmenge jedes Mal in zwei gleiche Hälften. Nach K Teilungen haben Sie K Boxen, und die Durchschnittsfarbe jeder Box ist ein Paletteneintrag. Das ist der von der beliebten JavaScript-Bibliothek Color Thief verwendete Algorithmus und historisch die Art, wie Bilder mit indizierten Farben (GIF-, PNG-Paletten) von Millionen von Farben auf 256 reduziert werden.

Beide Methoden erzeugen aus einer viel größeren Pixelmenge einen kleinen Satz repräsentativer Farben, aber sie gehen unterschiedliche Kompromisse ein. K-Means ist flexibler, aber empfindlich gegenüber dem Zufalls-Seed und gegenüber Ausreißern. Median-Cut ist deterministisch und gleicht die Abdeckung des Farbraums aus, kann aber enge Bereiche überrepräsentieren, in denen das Bild zufällig viele Pixel verbraucht.

Warum der RGB-Abstand lügt

Ein feiner, aber wichtiger Vorbehalt: Das Clustering im reinen RGB-Raum liefert Ergebnisse, die nicht immer der menschlichen Wahrnehmung entsprechen. RGB ist ein hardwaregetriebenes Koordinatensystem, Abstände darin entsprechen elektronischen Unterschieden zwischen Primärfarben, nicht wahrgenommenen Unterschieden zwischen Farben. Zwei Grüntöne, die für Sie identisch aussehen, können einen viel größeren RGB-Abstand haben als ein Grün und ein Rot, die offensichtlich verschieden aussehen.

Genaueres Clustering geschieht in CIELAB (CIE 1976 L*a*b*), einem Farbraum, der speziell so entworfen wurde, dass der euklidische Abstand im Raum den vom Menschen wahrgenommenen Unterschied zwischen zwei Farben annähert. Moderne Paletten-Werkzeuge wie Adobe Color und viele Farbfeld-Generatoren von Designsystemen clustern in CIELAB oder CIELCH. CSS Color Module Level 4 (W3C, 2022) fügte die Funktionen lab(), lch(), oklab() und oklch() hinzu, um diese Räume direkt für Webdesigner verfügbar zu machen, nützlich, wenn Sie eine wahrnehmungsgleichmäßige Paletten-Interpolation möchten. Die CSS-Spezifikation finden Sie unter w3.org/TR/css-color-4.

HEX, RGB, HSL, das richtige Format wählen

Alle drei Notationen beschreiben dieselbe Farbe; sie sind verschiedene Arten, sie aufzuschreiben.

• HEX: #RRGGBB. Sechs Hex-Ziffern, zwei pro Kanal, Bereich 00-FF (0-255). Das häufigste Format des Webs. Kompakt, per Copy-and-paste übertragbar, überall unterstützt.
• RGB: rgb(255, 128, 0). Dieselben Zahlen, andere Notation. CSS fügt rgba(255, 128, 0, 0.5) für Alpha hinzu.
• HSL: hsl(30, 100%, 50%). Farbton (0 bis 360°), Sättigung (0 bis 100 %), Helligkeit (0 bis 100 %). Für Designer leichter nachzuvollziehen, „gleicher Farbton, mehr Sättigung“ ist in HSL eine Anpassung einer einzelnen Zahl, in RGB aber eine Anpassung über mehrere Kanäle.
• OKLCH: oklch(70% 0.15 30). Moderne, wahrnehmungsgleichmäßige Alternative zu HSL. Dieselbe Helligkeitszahl bedeutet über alle Farbtöne hinweg dieselbe wahrgenommene Helligkeit, was HSL bekanntermaßen falsch macht (Gelb bei 50 % Helligkeit sieht viel heller aus als Blau bei 50 % Helligkeit).

Für die meiste Webarbeit kopieren Sie das HEX. Für die programmatische Manipulation von Paletten (um 10 % aufhellen, Farbton um 30° verschieben) greifen Sie zu HSL oder OKLCH, wo die Operation sauberer ist.

Warum dominant ≠ nützlich ist

Eine naive Extraktion der „häufigsten Farben“ enttäuscht oft. Ein Porträt einer Person vor blauem Himmel wird statistisch von Himmelspixeln und Hauttönen dominiert, auch wenn die visuell interessante Farbgeschichte vielleicht in der Kleidung des Motivs steckt. Fotos mit großen neutralen Hintergründen erhalten den Neutralton als „dominante“ Farbe. Starke JPEG-Kompression führt Artefaktfarben ein, die sich clustern, als wären sie echt.

Anspruchsvolle Paletten-Werkzeuge gewichten nach Sättigung, Kontrast zum dominanten Hintergrund, wahrgenommener „Interessantheit“ oder danach, ob eine Farbe in auffälligen Bereichen erscheint, die von den vom menschlichen Sehen inspirierten Itti-Koch-Saliency-Modellen erkannt werden. Die meisten Online-Werkzeuge, einschließlich dieses, verwenden ein einfaches frequenzbasiertes Clustering, schnell, vorhersehbar und gut genug für den häufigen Fall, eine Palette aus einem Foto, einer Illustration oder einem Kunstwerk zu ziehen.

Häufige Anwendungsfälle

• Markenabgleich: Ein Designer zieht eine Palette aus dem Logo oder Hero-Foto eines Kunden, um den Rest der Website visuell kohärent zu halten.
• Mood-Boards: Paletten aus Inspirationsbildern (Filmstandbilder, Fotografien, Gemälde) zu extrahieren ist der schnellste Weg, eine Farberkundung zu beginnen.
• Tailwind- / Design-Token-Konfigurationen: eine extrahierte Palette in CSS-Custom-Properties oder eine Tailwind-colors-Map verwandeln.
• Farbabstimmung für Foliensätze: Akzentfarben aus dem Firmenlogo wählen, damit der Foliensatz nicht beißt.
• E-Commerce-Produktfotografie: die dominante Farbe jedes Produkts als Farbfeld in einer Produktkarte verwenden.
• Generative Kunst & Datenvisualisierung: extrahierte Paletten in Shader-Code, D3-Diagramme oder Processing-Skizzen einspeisen.
• Printdesign: einen Anfangssatz von Farben aus Inspirationsbildern gewinnen und sie dann in Printdesign-Software an Pantone oder CMYK angleichen.

Warum hier ausschließlich der Browser wichtig ist

Fotos enthalten oft mehr als nur das Bild. EXIF-Metadaten können die GPS-Koordinaten enthalten, an denen das Foto aufgenommen wurde, die Seriennummer der Kamera, den Namen des Fotografen und Software-Fingerabdrücke. Screenshots können vertrauliche UI, Textentwürfe oder Vorab-Branding enthalten. Private Fotos können Gesichter von Personen enthalten, die dem Hochladen irgendwohin nicht zugestimmt haben. Das Extrahieren einer Palette braucht nichts davon (es braucht nur die Pixeldaten), und es gibt keinen guten Grund, das ganze Bild an einen Server zu senden, wenn der Browser es lokal analysieren kann.

Dieses Werkzeug zeichnet das Bild auf ein Off-Screen-Canvas, tastet die Pixeldaten über getImageData() ab, führt das Clustering aus und zeigt das Ergebnis. Nichts verlässt die Seite; das Bild wird nach dem Schließen des Tabs nicht aufbewahrt. Serverseitige Paletten-Werkzeuge (Adobe Color, der Bildauswähler von Coolors und viele andere) laden die ganze Datei hoch. Der Datenschutz ist der Kompromiss, den Sie bei jedem eingehen.

Mit der Ausgabe arbeiten

Sobald Sie eine extrahierte Palette haben, gehen Sie typischerweise so vor:

1. Kuratieren. Eine automatische 5-Farben-Extraktion hat meist 3 nützliche Farben, 1 überflüssiges Beinahe-Duplikat und 1 matschigen Mittelton. Lassen Sie den matschigen weg und entfernen Sie Duplikate.
2. Rollen zuweisen. Bestimmen Sie eine Farbe als primäre Markenfarbe, eine als sekundäre, eine oder zwei als Akzente und eine als Neutralton. Moderne Markensysteme wollen oft einen neutralen Hintergrund, zwei Anker und einen Akzent, höchstens fünf.
3. Hell-/Dunkel-Skalen erzeugen. Leiten Sie aus jeder Ankerfarbe 9 bis 11 Abstufungen für Hover-Zustände, Hintergründe und getönte Varianten ab. Werkzeuge wie der Farbskalen-Generator von Tailwind oder der Paletten-Abschnitt von Refactoring UI haben bekannte Rezepte.
4. Kontrast testen. Lassen Sie Text-und-Hintergrund-Paare durch einen WCAG-Kontrastprüfer laufen, Stufe AA verlangt 4,5:1 für normalen Fließtext, 3:1 für große oder fette UI-Komponenten.
5. Auf Farbfehlsichtigkeit testen. Etwa 1 von 12 Männern hat eine Form von Farbenblindheit. Lassen Sie die Palette durch einen CVD-Simulator laufen, bevor Sie sie festlegen.

Häufige Fehler

1. Alle fünf extrahierten Farben unbearbeitet als Markenpalette verwenden. Die automatische Extraktion ist ein Ausgangspunkt, keine fertige Palette. Kuratieren Sie.
2. Farben aus einem stark komprimierten JPEG wählen. Kompressionsartefakte erzeugen falsche Paletteneinträge. Beginnen Sie nach Möglichkeit mit einer hochwertigen Quelle.
3. Dem ersten Durchlauf bei einem komplexen Foto vertrauen. Unterschiedliche K-Werte (Anzahl der Farben) erzeugen dramatisch unterschiedliche Ergebnisse, probieren Sie 5, 8 und 12 aus, um zu sehen, welche Größe sich für Ihr Bild richtig anfühlt.
4. Eine Palette aus einem Foto aufbauen, ohne die Seite zu berücksichtigen, auf der sie leben wird. Eine gedämpfte, aus einem Foto abgeleitete Palette kann für sich allein großartig aussehen, aber vor einem weißen Website-Hintergrund verschwinden. Testen Sie im Kontext.
5. Kontrast ignorieren. Schöne Paletten paaren Text manchmal mit einem Hintergrund bei 2:1-Kontrast und scheitern an WCAG. Prüfen Sie immer.
6. Vergessen, dass „dominant“ „Hintergrund“ bedeuten kann. Die häufigste Farbe in einem Porträt ist oft die Wand hinter dem Motiv, nicht die Kleidung des Motivs.

Weitere häufig gestellte Fragen

Funktioniert es bei transparenten PNGs?

Ja. Transparente Pixel werden beim Abtasten typischerweise übersprungen, sodass die Palette nur den sichtbaren Inhalt widerspiegelt. Wenn Sie ein PNG mit transparentem Hintergrund und einem farbigen Logo hochladen, sind die extrahierten Farben die des Logos, kein verunreinigter Neutralton.

Was ist mit animierten GIFs?

Der Bilddecoder des Browsers gibt der Canvas-API typischerweise das erste Einzelbild, sodass die Palette aus Einzelbild null extrahiert wird. Für eine Palette über alle Einzelbilder hinweg müssten Sie jedes Einzelbild separat extrahieren und die Ergebnisse kombinieren, das geht über das hinaus, was ein Werkzeug für statische Bilder leistet.

Wird das Originalbild irgendwohin hochgeladen?

Nein. Das Bild wird in ein Canvas-Element in Ihrem Browser geladen, die Pixeldaten werden über getImageData() gelesen, und das Clustering läuft in JavaScript auf Ihrem Gerät. Die Bild-Bytes werden nie an einen Server übertragen. Das ist wichtig, wenn die Quelle EXIF-GPS, Gesichter, Screenshots vertraulicher UIs oder unveröffentlichte Produktbilder enthält.

Warum ändert sich meine Palette zwischen den Durchläufen?

K-Means hängt von der anfänglichen zufälligen Platzierung der Schwerpunkte ab, sodass zwei Durchläufe auf demselben Bild auf leicht unterschiedlichen lokalen Minima landen können. Die Unterschiede sind meist subtil (ein Beinahe-Duplikat durch eine ähnliche Abstufung ersetzt), aber sichtbar. Median-Cut ist deterministisch, gleiche Eingabe, jedes Mal gleiche Ausgabe. Wenn das Werkzeug jemals merklich unterschiedliche Paletten für dasselbe Bild liefert, verwendet es einen randomisierten Algorithmus, und das ist erwartetes Verhalten.

Kann ich die extrahierten Farben kommerziell nutzen?

Farben selbst sind nicht urheberrechtlich schützbar; HEX-Werte sind Fakten über Pixel. Aber das Bild, aus dem Sie extrahiert haben, könnte es sein; eine Palette aus dem Foto eines anderen zu ziehen ist als Inspiration in Ordnung, aber das Foto oder seine markenrechtlich geschützten Elemente zu reproduzieren ist eine separate Frage. Gleichen Sie die Farben ab, nicht die Bilder.

Wie unterscheidet sich das von einem Farbwähler-Werkzeug?

Ein Farbwähler liest die Farbe an einer bestimmten Pixelposition, auf die Sie zeigen. Dieses Werkzeug analysiert das gesamte Bild und gibt die repräsentativste Palette zurück. Unterschiedliche Aufgaben: Farbwähler sind für „welche genaue Farbe ist das?“, Paletten-Extraktoren sind für „welche sind insgesamt die dominanten Farben?“. Beide haben ihren Platz im Arbeitsablauf eines Designers.