Was gehört zu einer Markenfarbpalette?

Eine Markenfarbpalette gibt jeder Farbe eine Aufgabe. Die Primärfarbe ist die, an die sich Menschen erinnern – sie findet sich im Logo und auf den wichtigsten Schaltflächen. Eine Sekundärfarbe ergänzt sie, eine Akzentfarbe hebt Handlungsaufforderungen hervor, und eine Hintergrund- sowie eine Textfarbe sorgen für ein stimmiges Gesamtbild.

Der Kontrast ist ebenso wichtig wie der Geschmack. Die Richtlinien für barrierefreie Webinhalte (WCAG) empfehlen ein Kontrastverhältnis von mindestens 4.5:1 zwischen normalem Text und seinem Hintergrund oder 7:1 für die strengere AAA-Stufe.

Beschreibung des Tools

Beschreibe deine Marke unter „Über deine Marke“: was sie macht, für wen sie gedacht ist und welchen Eindruck sie vermitteln soll. Wähle eine Markenpersönlichkeit (professionell, verspielt, luxuriös, minimalistisch, ausdrucksstark oder natürlich) oder lass die Einstellung auf „An Beschreibung anpassen“, damit die KI sie aus deinem Text ableitet.

Du erhältst fünf benannte Farben: Primärfarbe, Sekundärfarbe, Akzentfarbe, Hintergrundfarbe und Textfarbe. Das Ausgabeformat wechselt zwischen HEX, RGB, HSL, CMYK und anderen Formaten. Für jede Farbe gibt es eine Kopierschaltfläche. Der Verwendungshinweis erklärt, wie du die jeweilige Farbe einsetzen kannst. Unter CSS-Variablen findest du einen Codeblock, den du in ein Stylesheet einfügen kannst. Die KI wird angewiesen, für den Text gegenüber dem Hintergrund ein Kontrastverhältnis von mindestens 7:1 und für Primär- und Akzentfarbe jeweils mindestens 3:1 einzuhalten.

Beispiel

Für „Eine Kaffeerösterei aus einem Viertel in Portland. Herzlich, einladend und nachhaltig“ erhältst du vielleicht ein Röstbraun als Primärfarbe, einen cremefarbenen Hintergrund und einen Terrakotta-Akzent – mit CSS-Variablen wie diesen:

:root {
  --brand-primary: #5b3a29;
  --brand-secondary: #a47551;
  --brand-accent: #d9643a;
  --brand-background: #faf6f0;
  --brand-text: #2b211c;
}

Funktionen

  • Fünf Farben mit klaren Rollen, jeweils mit einem Namen und einem Verwendungshinweis
  • Sechs Markenpersönlichkeiten oder eine, die aus deiner Beschreibung ausgewählt wird
  • Kopiere Farben im gewünschten Format oder das gesamte Set als CSS-Variablen

Einschränkungen

Das Tool misst den Kontrast nicht selbst. Prüfe daher das Text-Hintergrund-Paar mit einem Kontrastprüfer, bevor du es veröffentlichst.