Farbpsychologie für hochkonvertierende Landing Pages

Farbe ist das Erste, was ein Besucher verarbeitet – noch bevor er ein Wort liest. Sie kommuniziert Branche, Glaubwürdigkeit und Tonfall in Millisekunden. Sie beeinflusst auch direkt, ob Text lesbar ist, was wiederum beeinflusst, ob Menschen auf der Seite bleiben.

Dieser Beitrag erklärt, wie das Palettensystem von PAGEnza funktioniert und warum die Einschränkungen, die wir bei der Farbauswahl auferlegen, tatsächlich bessere Ergebnisse erzielen als die unbegrenzte Freiheit der KI.

Das Problem, eine KI zu bitten, „schöne Farben“ auszuwählen

Wenn Sie ein LLM bitten, Farben für eine Website auszuwählen, erhalten Sie Hex-Codes. Manchmal sehen sie zusammen gut aus. Manchmal nicht. Das Modell hat keine zuverlässige Möglichkeit zu beurteilen, ob die Farben tatsächlich funktionieren – ob der Text lesbar ist, ob die Palette für die Branche angemessen erscheint, ob die Kombination visuell kohärent ist und nicht zufällig zusammenpasst.

Wir sahen dieses Problem in frühen Tests deutlich. Die uneingeschränkte Farbgenerierung ergab Paletten, die von ausgezeichnet bis völlig unbrauchbar reichten. Es gab keine Konsistenz.

Die Lösung bestand darin, die Farbauswahl vollständig aus den Händen des LLM zu nehmen und ein algorithmisches System zu entwickeln, das bestimmte Eigenschaften garantiert.

Das 4-Farben-System

Jede PAGEnza-Website verwendet genau vier benannte Farben:

ink – die primäre Textfarbe. Immer dunkel (hoher Luminanzkontrast zu Hintergründen). Wird für Überschriften, Fließtext und UI-Elemente verwendet, die gelesen werden müssen.

bg1 – der primäre Hintergrund. Normalerweise die hellste Farbe in der Palette. Wird für den Hauptseitenhintergrund und helle Abschnitte verwendet.

bg2 – der sekundäre Hintergrund. Sorgt für visuelle Abwechslung zwischen den Abschnitten. Muss eine andere Farbtemperatur als bg1 haben – wenn bg1 ein warmer Cremeton ist, ist bg2 ein kühles Grau oder ein bläulich getöntes Weiß.

accent – die Markenfarbe. Wird für Schaltflächen, Links, Hervorhebungen und dekorative Elemente verwendet. Normalerweise die gesättigtste Farbe in der Palette.

Diese Einschränkung – vier benannte Rollen, keine willkürlichen Hex-Codes – ist es, was das Palettensystem zum Funktionieren bringt. Die KI entscheidet nie, welche Farbe wohin kommt; sie wählt nur aus einem vordefinierten Satz von Paletten aus.

Wie Paletten organisiert sind

Wir pflegen über 20 Palettengruppen, die jeweils um einen Archetyp aufgebaut sind:

• Fett: kontrastreiche, gesättigte Akzente – Tech, SaaS, Fintech
• Sanft: gedämpft, entsättigt – Wellness, Coaching, Kreativdienstleistungen
• Luxus: fast schwarze Hintergründe mit metallischen oder juwelenartigen Akzenten – Premium-Dienstleistungen, High-End-Einzelhandel
• Erdig: warme Neutraltöne mit Terrakotta- oder Salbei-Akzenten – Lebensmittel, Nachhaltigkeit, Handwerk
• Dunkel: Dark-Mode-first-Paletten – Entwickler, Agenturen, Gaming
• Neutral: sicher, professionell – Recht, Finanzen, Gesundheitswesen

Innerhalb jeder Gruppe gibt es mehrere Paletten mit unterschiedlichen Farbtemperaturen, Sättigungsgraden und Akzenttönen. Das System wählt eine Gruppe basierend auf Branche und Archetyp aus und wählt dann eine bestimmte Palette innerhalb der Gruppe aus.

WCAG-Kontrast: Die Einschränkung, die das Design verbessert

WCAG AA verlangt, dass normaler Text ein Kontrastverhältnis von mindestens 4,5:1 zu seinem Hintergrund hat. Großer Text benötigt 3:1. Interaktive Elemente benötigen 3:1 zu benachbarten Farben.

Jede Palette in unserem System wird vor der Aufnahme gegen diese Verhältnisse validiert. Insbesondere:

• ink muss einen Kontrast von ≥4,5:1 zu bg1, bg2 und jeder Oberfläche erreichen, auf der Text erscheint
• accent muss einen Kontrast von ≥3,0:1 zu bg1 und bg2 erreichen (zur Verwendung als Schaltflächenhintergründe)
• Die Validierung verwendet echte Luminanzberechnungen – L = 0,2126R + 0,7152G + 0,0722B nach Gammakorrektur – keine Annäherungen

Das Ergebnis ist, dass jede generierte Website standardmäßig lesbar ist. Aber es gibt einen sekundären Vorteil: Hochkontrastierende Designs konvertieren besser. Eine Schaltfläche, die deutlich sichtbar ist, erhält mehr Klicks als eine, die mit dem Hintergrund verschmilzt. Die Anforderung an die Barrierefreiheit erweist sich als Anforderung an die Konversion.

Farbtemperaturkontrast zwischen Abschnitten

Ein Detail, das leicht übersehen werden kann: bg1 und bg2 müssen kontrastierende Farbtemperaturen haben. Wenn beide Hintergründe warm sind, wirken abwechselnde Abschnitte eintönig – die Seite sieht aus wie ein einziger durchgehender Klumpen und nicht wie getrennte Inhaltsbereiche.

Die Regel in unserem System: Wenn bg1 einen warmen Farbton hat (Richtung Orange/Gelb oder ein warmer Neutralton wie Creme), muss bg2 kühl sein (Richtung Blau/Grau). Wenn bg1 ein kühles Weiß ist, kann bg2 ein warmes Off-White sein.

Deshalb wirken unsere Abschnitte auch ohne starke Trennlinien oder Schatten getrennt – allein die Verschiebung der Hintergrundtemperatur schafft einen klaren visuellen Bruch.

Branchenspezifische Farblogik

Einige Farbwahlen sind stark branchenspezifisch kodiert. Besucher haben Erwartungen, die sich aus jahrelanger Beschäftigung mit Websites in einer bestimmten Kategorie ergeben haben.

Gesundheitswesen und Wellness: Blau- und Grüntöne signalisieren Vertrauen und Ruhe. Gesättigte Rot- und Orangetöne wirken in diesem Kontext alarmierend.

Recht und Finanzen: Dunkle Marine-, Anthrazit- und konservative Grautöne. Helle Akzente sind akzeptabel, müssen aber zurückhaltend sein. Verspielte Paletten untergraben die Glaubwürdigkeit.

Lebensmittel und Gastgewerbe: Warme Töne – Terrakotta, Bernstein, Creme – wecken Appetitassoziationen. Kühle, klinische Paletten wirken falsch.

Technologie und SaaS: Blau bleibt dominant, aber es gibt mehr Spielraum. Elektrische Blautöne, Indigos und sogar Violett wirken zukunftsweisend. Reine schwarze Hintergründe eignen sich für Entwicklerwerkzeuge.

Luxus und Premium: Der Schlüssel ist Zurückhaltung. Begrenzter Farbbereich, fast schwarze oder tiefblaue Primärfarben, goldene oder platinfarbene Akzente. Hoher Kontrast, niemals gesättigt.

Die Archetyp-Auswahl im Design Mandate ordnet Branche + Geschäftstyp der entsprechenden Palettengruppe zu, sodass ein Wellness-Coach nicht die gleiche Palette wie eine Anwaltskanzlei erhält, auch wenn beide als „professionell“ beschrieben werden.

Was Kunden ändern können

Nach der Generierung können Kunden ihre Website in Gutenberg bearbeiten. Der Farbwähler im Editor zeigt nur die vier Markenfarben an – nichts anderes. Das bedeutet:

• Sie können Abschnittshintergründe zwischen bg1, bg2 und Oberflächen wechseln
• Sie können Schaltflächen- und Linkfarben zwischen accent und ink ändern
• Sie können keine willkürliche fünfte Farbe einführen, die die Palette zerstört

Die Einschränkung ist beabsichtigt. Die häufigste Art und Weise, wie Kunden eine professionell gestaltete Website ruinieren, ist die Auswahl von Farben aus dem vollen Farbrad. Die Beschränkung der Palette auf vier benannte Farben macht dies unmöglich, ohne in den Code einzugreifen.