Farbpalette aus jedem Bild erstellen, mit Kontrastprüfer

So werden die Farben ausgewählt

Das Tool erstellt eine kleine Kopie deines Bildes, maximal 160 Pixel an der längsten Seite, und zählt jedes Pixel, das nicht transparent ist. Dann gruppiert es ähnliche Pixel mit k-Means-Clustering und gibt die Durchschnittsfarbe jeder Gruppe aus, die größte Gruppe zuerst. Der Prozentwert auf jedem Farbfeld zeigt, wie viel des Bildes diese Gruppe abdeckt.

Der Startpunkt ist fest und nicht zufällig: Es beginnt mit der häufigsten Farbe und fügt dann immer die Farbe hinzu, die am weitesten von den bereits vorhandenen entfernt ist. So liefert dasselbe Bild jedes Mal dieselbe Palette, und ein kleiner heller Akzent, etwa ein rotes Logo auf einer weißen Box, bekommt sein eigenes Farbfeld, statt in den Hintergrund eingerechnet zu werden.

Frag nach 5 bis 8 Farben. Ein Produktfoto vor einem schlichten Hintergrund braucht meist 5 oder 6. Ein lebendiges Lifestyle-Foto wirkt mit 8 besser. Hat das Bild weniger deutlich unterscheidbare Farben als angefragt, sagt das Tool dir das und zeigt die gefundenen an.

So liest du die Kontrastmatrix

Jede Farbe wird mit jeder anderen kombiniert, dazu mit reinem Weiß und Schwarz, und jede Zelle zeigt das Kontrastverhältnis für Text in der Zeilenfarbe auf einem Hintergrund in der Spaltenfarbe. Das Verhältnis folgt der WCAG-Definition: (L1 + 0.05) / (L2 + 0.05), wobei L1 und L2 die relative Leuchtdichte der helleren und der dunkleren Farbe sind. Es reicht von 1:1 (zweimal dieselbe Farbe) bis 21:1 (Schwarz auf Weiß).

Die Bezeichnungen sind die Schwellenwerte, die WCAG festlegt:

• AA: mindestens 4.5:1 für normalen Text und 3:1 für großen Text (Erfolgskriterium 1.4.3).
• AAA: mindestens 7:1 für normalen Text und 4.5:1 für großen Text (Erfolgskriterium 1.4.6).
• Großer Text bedeutet mindestens 18 Punkt oder 14 Punkt fett (WCAGs Definition von großer Schrift).

Eine Zelle mit der Markierung AA groß eignet sich für eine große Überschrift und ist für eine Bildunterschrift zu schwach. Die Erläuterung des W3C zu 1.4.3 sagt außerdem, dass das Verhältnis nicht gerundet werden darf, also erfüllt 4.499:1 nicht die Vorgabe von 4.5:1. Das Tool bewertet den exakten Wert und zeigt ihn auf zwei Nachkommastellen gekürzt an, nie aufgerundet.

Ein durchgerechnetes Beispiel

Angenommen, das Foto liefert dir ein Marineblau von #1a3c6e und ein Creme von #fdf6e3. Die relative Leuchtdichte des Marineblaus liegt bei etwa 0.046 und die des Cremes bei etwa 0.923. Das Verhältnis ist (0.923 + 0.05) / (0.046 + 0.05), also etwa 10.1:1 mit diesen gerundeten Werten und 10.16:1 mit den exakten. Das besteht AAA für jeglichen Text, Marineblauer Text auf einer cremefarbenen End Card ist also in jeder Größe sicher. Setzt du ein mittleres Orange wie #e07a2e auf dasselbe Creme, fällt das Verhältnis auf 2.78:1, was sogar für großen Text durchfällt. Spar dir das Orange für einen Button mit schwarzem Text darauf (6.99:1, also AA, aber knapp unter AAA) oder für eine Form ohne Worte.

Den Export nutzen

Der CSS-Export ist ein :root-Block mit Custom Properties, --color-1 für die Farbe, die den größten Teil des Bildes abdeckt, und so weiter abwärts. Das JSON enthält zu jeder Farbe den Hex-, RGB- und HSL-Wert sowie ihren Anteil am Bild, einfach in eine Design-Token-Datei einzufügen oder an ein Skript zu übergeben. Benenne die Variablen um, sobald du weißt, welche Farbe Hintergrund, welche Text und welche Akzent ist.

Was dieses Tool nicht macht

Es weiß nicht, welche Farben zu deiner Marke gehören. Ein Foto deines Produkts auf einem Holztisch enthält auch den Tisch. Schneide zuerst auf das Produkt oder die Verpackung zu, wenn du nur deren Farben willst. Es kann dir auch keine exakten Druckfarben nennen: Die Werte sind die Pixel in der Datei, nach deiner Kamera und jeder Bearbeitung, also prüfe sie gegen deinen Markenleitfaden, bevor du sie veröffentlichst. Und es bewertet nur den Textkontrast. WCAG hat eigene Regeln für Symbole und Oberflächenelemente, die diese Matrix nicht bewertet.

Wenn du das lieber nicht von Hand machst

Hermoso ist Marketing auf Autopilot: Es recherchiert die Anzeigen, die in deinem Markt bereits funktionieren, erstellt markengerechte Bild- und Videoanzeigen, plant die Posts und schaltet bezahlte Kampagnen über deine eigenen Werbekonten. Wenn du deine Marke von deiner Website hinzufügst, lernt es deine Produkte, dein Logo und deine Palette kennen, und du kannst Farben für Untertitel und End Cards mit Hex-Codes festlegen. Es funktioniert in der Web-App oder in Claude, ChatGPT und Cursor über seinen MCP-Server.

Kostenlose Tools: Social-Media-Format-Guide · Instagram-Grid-Maker · Open-Graph-Generator

Häufige Fragen

Wie bekomme ich eine Farbpalette aus einem Foto?

Lege das Foto in das Tool und wähle, wie viele Farben du möchtest, von 5 bis 8. Es gruppiert ähnliche Pixel und zeigt die Durchschnittsfarbe jeder Gruppe als HEX, RGB und HSL, die größte zuerst, mit einem Kopier-Button an jeder.

Welches Kontrastverhältnis brauche ich für Text?

WCAG 2.2 Stufe AA verlangt mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Stufe AAA verlangt 7:1 und 4,5:1. Großer Text ist mindestens 18 Punkt oder 14 Punkt fett.

Reicht 4,49:1 knapp für AA?

Nein. Das W3C sagt, dass das berechnete Verhältnis beim Vergleich mit einem Schwellenwert nicht gerundet werden sollte, also erfüllt 4,499:1 nicht 4,5:1. Das Tool bewertet die genaue Zahl.

Warum bekomme ich jedes Mal dieselbe Palette?

Das Clustering beginnt an einem festen Punkt, der häufigsten Farbe, und fügt dann die Farbe hinzu, die am weitesten von den bereits gewählten entfernt ist. Es gibt keinen zufälligen Start, also liefert ein Bild immer eine Antwort.

Wird mein Bild hochgeladen?

Nein. Es wird mit dem eigenen Datei-Reader deines Browsers gelesen und in einem Canvas auf deinem Gerät ausgewertet. Nichts wird irgendwohin gesendet oder gespeichert.