Erstelle eine Markenfarbpalette aus deinen eigenen Produktfotos
Hol die echten Farben aus deinen Produkt- und Verpackungsfotos, gib jeder einen Zweck und prüfe jedes Textpaar nach WCAG-Kontrast, bevor es in eine Anzeige, eine Bildunterschrift oder eine Endkarte kommt.
Viele kleine Marken haben eine Logodatei und keine Farbliste. Die Farben stecken im Produkt selbst: in der Flasche, dem Etikett, der Verpackung, dem Stoff. Wenn es Zeit für eine Anzeige, ein Thumbnail oder einen Stil für Bildunterschriften ist, schaut jemand auf ein Foto, schätzt einen Hex-Code und hofft.
In etwa zehn Minuten geht es besser. Hol die Farben aus Fotos des echten Produkts, gib jeder einen Zweck und prüfe, welche Paare als Text lesbar sind. Unser kostenloser Farbpaletten-Extraktor übernimmt das Herausziehen und die Prüfung in deinem Browser, ohne dass etwas hochgeladen wird.
Warum vom Produkt ausgehen und nicht von einem Moodboard
Menschen erkennen dein Produkt daran, wie es im Regal oder in der Hand aussieht. Eine Anzeige, deren Farben zur Verpackung passen, wirkt auf den ersten Blick wie dieselbe Marke, und eine, die abweicht, wirkt wie eine Fälschung. Eine Palette aus dem Produkt ist außerdem ehrlich darüber, was du tatsächlich verkaufst, was ein Moodboard selten ist.
Das funktioniert auch für Dienstleistungen. Hast du kein physisches Produkt, nimm deine besten Screenshots, dein Ladengeschäft oder Teamfotos, alles, womit man dich schon verbindet.
Schritt 1: Fotos auswählen und zuschneiden
Wähle zwei oder drei saubere Fotos: das Produkt auf neutralem Hintergrund, die Verpackung mit der Vorderseite nach oben und ein Lifestyle-Foto, das dir gefällt. Dann schneide stark zu. Der Extraktor zählt jeden Pixel, den du ihm gibst, also liefert eine Flasche auf einem Holztisch den Tisch als eine deiner Markenfarben. Schneide auf das Produkt und das Etikett zu, dann ist die Palette das Produkt.
Fotografiere bei Tageslicht oder möglichst gleichmäßigem Licht. Eine warme Lampe macht weiße Verpackung cremig, und jede Farbe, die du herausholst, trägt diesen Farbstich.
Schritt 2: fünf bis acht Farben extrahieren
Lege jedes Foto in den Extraktor und wähle 5 oder 6 Farben für eine saubere Produktaufnahme oder 8 für ein unruhiges Motiv. Er gruppiert ähnliche Pixel und listet den Durchschnitt jeder Gruppe auf, die größte zuerst, mit dem Anteil am Bild. Der Startpunkt ist festgelegt, also ergibt dasselbe Foto immer dieselbe Palette, und ein kleiner, heller Akzent, etwa eine rote Kappe auf einer weißen Flasche, bekommt ein eigenes Farbfeld, statt herausgemittelt zu werden.
Lass alle deine Fotos durchlaufen und achte auf Farben, die sich wiederholen. Das ist deine Marke. Eine Farbe, die nur auf einem Motiv vorkommt, ist meist der Hintergrund oder das Licht.
Schritt 3: jeder Farbe einen Zweck geben
Eine Palette nützt nur, wenn jede Farbe eine Rolle hat. Die meisten Marken brauchen vier:
- Hintergrund: die Farbe, auf der der größte Teil eines Layouts liegt. Oft die Grundfarbe der Verpackung oder ein helles Neutral.
- Text: eine dunkle Farbe, die auf dem Hintergrund gut lesbar ist. Nahezu Schwarz funktioniert. Eine tiefe Markenfarbe funktioniert besser, wenn sie die Kontrastprüfung besteht.
- Akzent: die auffällige Farbe, für einen Button, einen Preisaufkleber oder ein einzelnes hervorgehobenes Wort.
- Unterstützung: ein oder zwei Neutraltöne für Boxen, Trennlinien und sekundären Text.
Verwende nicht alles, was das Foto dir gibt. Fünf benannte Farben mit klaren Aufgaben halten hundert Anzeigen konsistent. Zwölf schaffen das nicht.
Schritt 4: Kontrast prüfen, bevor etwas veröffentlicht wird
Farbpaare, die auf einem großen Monitor gut aussehen, können auf einem Handy in der Sonne schwer lesbar sein, und für Menschen mit eingeschränkter Sehkraft noch viel schwerer. Die Web Content Accessibility Guidelines des W3C geben dafür eine Zahl an, das Kontrastverhältnis, das von 1:1 (dieselbe Farbe zweimal) bis 21:1 (Schwarz auf Weiß) reicht. Die Schwellenwerte sind:
| Normaler Text | Großer Text | |
|---|---|---|
| AA (SC 1.4.3) | 4.5:1 | 3:1 |
| AAA (SC 1.4.6) | 7:1 | 4.5:1 |
Großer Text bedeutet mindestens 18 pt oder 14 pt fett, nach der Definition von WCAG. Und die Zahlen sind feste Grenzen: Die Anleitung des W3C zu 1.4.3 sagt, dass ein berechnetes Verhältnis nicht gerundet werden sollte, sodass 4.499:1 nicht 4.5:1 erreicht.
WCAG wurde für Webinhalte geschrieben, nicht für Anzeigen, aber die Logik gilt für jeden Text auf einem Bildschirm, einschließlich eingebrannter Untertitel in einem Video und der Wörter auf einer Endkarte.
Ein Beispiel
Angenommen, deine Verpackung hat ein Marineblau #1a3c6e, ein Creme #fdf6e3 und ein Orange #e07a2e.
Die Formel lautet (L1 + 0.05) / (L2 + 0.05), wobei L1 die relative Luminanz der helleren Farbe und L2 die der dunkleren ist. Die relative Luminanz reicht von 0 für Schwarz bis 1 für Weiß. Das Marineblau ergibt etwa 0.046, das Creme etwa 0.923 und das Orange etwa 0.300.
- Marineblauer Text auf Creme: (0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096, etwa 10.1 mit diesen gerundeten Werten, und exakt 10.16:1. Das besteht AAA bei jeder Größe. Das ist dein Haupt-Paar.
- Oranger Text auf Creme: (0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350, etwa 2.78:1. Das fällt sogar bei großem Text durch. Das Orange sollte auf Creme keine Wörter tragen.
- Schwarzer Text auf Orange: (0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05, mit diesen gerundeten Werten 7.0, exakt aber 6.99:1. Das besteht AA für jeden Text, verfehlt AAA aber knapp. Gut für eine Button-Beschriftung.
- Cremefarbener Text auf Marineblau: dasselbe Paar wie das erste, also dasselbe 10.16:1. Das Umkehren eines Paars ändert das Verhältnis nie.
Die Rollen ergeben sich also fast von selbst: cremefarbener Hintergrund, marineblauer Text, Orange als Akzentform mit schwarzen Wörtern darauf (Marineblau auf Orange ist nur 3.65:1, das reicht für AA nur bei großem Text). Der Extraktor zeigt dieses ganze Raster auf einmal, jede Farbe gegen jede andere sowie Weiß und Schwarz, wobei jede Zelle als AAA, AA, AA groß oder Fail eingestuft wird.
Schritt 5: einmal festhalten
Exportiere die Palette als CSS-Custom-Properties oder JSON und bewahre sie neben deinen Logodateien auf. Benenne die Variablen nach ihrer Funktion um, sobald du dich entschieden hast: --brand-bg, --brand-text, --brand-accent sind nach einem Monat lesbarer als --color-3. Schreibe unter jede Variable eine Zeile, welche Paarungen bestanden haben, damit niemand die Prüfung wiederholen muss.
Vergleiche die Werte dann mit allem, was du bereits offiziell hast. Ein Foto gibt dir die Farbe, die deine Kamera gesehen hat. Sie liegt nah an der gedruckten Verpackung, ist aber nicht identisch mit der Tintenspezifikation. Wenn dein Drucker oder Designer exakte Werte hat, gelten diese.
Die Palette in Anzeigen und Beiträgen verwenden
- Bildunterschriften und Untertitel: deine Textfarbe auf einem Kasten in deiner Hintergrundfarbe oder umgekehrt. Prüfe das Paar vorher.
- Endkarten: die Hintergrundfarbe mit dem Logo und einer Zeile in deiner Textfarbe. Der Akzent kann die Button-Form hinter einem kurzen Call-to-Action füllen.
- Thumbnails und Cover: ein Akzent, ein großes, gut lesbares Wort und viel Hintergrund.
- QR-Codes auf Verpackungen: eine Markenfarbe funktioniert, wenn sie deutlich dunkler ist als die Verpackung. Unser QR-Code-Generator warnt, wenn der Kontrast zu gering ist.
Wo Hermoso passt
Hermoso ist ein KI-Marketing-Agent. Er recherchiert die Anzeigen, die in deinem Markt bereits funktionieren, erstellt markengerechte Bild- und Videoanzeigen, veröffentlicht und plant Beiträge auf deinen eigenen Social-Media-Konten und schaltet bezahlte Kampagnen auf deinen eigenen Werbekonten. Wenn du deine Marke über deine Website hinzufügst, lernt er deine Produkte, dein Logo und deine Palette kennen. Bildunterschriften und Endkarten bleiben aus, bis du sie anforderst, und dann kannst du die Farben von Text, Kasten und Endkarte mit Hex-Codes festlegen, sodass die Paare, die du hier geprüft hast, auch die sind, die ausgeliefert werden. Er funktioniert in der Web-App oder in Claude, ChatGPT und Cursor über seinen MCP-Server.
Häufige Fragen
Wie finde ich die Hex-Codes meiner Produktfarben?
Schneide ein sauberes Foto auf das Produkt oder die Verpackung zu und ziehe es in einen Farbpaletten-Extraktor. Er listet die Hauptfarben als HEX, RGB und HSL auf. Lass zwei oder drei Fotos laufen und behalte die Farben, die sich wiederholen.
Welches Kontrastverhältnis braucht Text?
Nach WCAG 2.2 braucht Stufe AA 4.5:1 für normalen Text und 3:1 für großen Text, AAA braucht 7:1 bzw. 4.5:1. Großer Text ist mindestens 18 pt oder 14 pt fett.
Reicht 4.49:1 für AA?
Nein. Das W3C sagt, das Verhältnis solle beim Vergleich mit dem Schwellenwert nicht gerundet werden, sodass 4.499:1 die Marke 4.5:1 nicht erreicht.
Wie viele Farben sollte eine Markenpalette haben?
So viele, dass jede eine Aufgabe hat: meist ein Hintergrund, eine Textfarbe, ein Akzent und ein oder zwei Neutraltöne. Fünf benannte Farben mit klaren Rollen halten Anzeigen konsistenter als eine lange Liste.
Sind die Farben aus einem Foto exakt?
Nein. Es sind die Farben, die die Kamera unter diesem Licht aufgenommen hat. Sie liegen nah am Produkt, sind aber nicht dasselbe wie eine Druck- oder Tintenspezifikation. Wenn du offizielle Werte hast, nimm diese.