Farbgestaltung: Farbenlehre und Farbschemata für Websites

Farbe ist oft das Erste, was Menschen an einer Website oder einem Logo wahrnehmen. Sie erzeugt Stimmung, lenkt den Blick und macht eine Marke wiedererkennbar. Gleichzeitig ist sie das Gestaltungsmittel, bei dem am schnellsten etwas schiefgeht: zu viele Töne, zu wenig Kontrast, Farben, die sich gegenseitig die Wirkung nehmen. Dieser Ratgeber erklärt die Grundlagen der Farbenlehre und wie daraus eine Palette für das eigene Projekt entsteht.

Der Farbkreis

Der Farbkreis ordnet die Farbtöne ringförmig an. Weit verbreitet ist der zwölfteilige Kreis nach Johannes Itten mit den Grundfarben Gelb, Rot und Blau, den daraus gemischten Sekundärfarben Orange, Violett und Grün und sechs Tertiärfarben dazwischen. Für die Bildschirmgestaltung ist das Prinzip wichtiger als die genaue Herleitung: Die Lage zweier Farben im Kreis sagt viel darüber, wie sie zusammen wirken.

Farbschemata, die funktionieren

Aus der Lage im Farbkreis ergeben sich klassische Schemata:

In der Praxis bewährt sich oft ein einfacher Aufbau: eine Hauptfarbe, eine dazu komplementäre oder deutlich abweichende Akzentfarbe und neutrale Töne. Diese Website nutzt zum Beispiel ein kräftiges Violett als Hauptfarbe, Magenta als Akzent und ein warmes Off-White als Fläche.

Farbwirkung und Farbpsychologie

Farben wecken Assoziationen. Blau wird häufig mit Vertrauen, Ruhe und Sachlichkeit verbunden, Rot mit Energie, Dringlichkeit oder Liebe, Grün mit Natur und Gesundheit, Gelb mit Optimismus, Violett mit Kreativität und Luxus, Schwarz mit Eleganz. Diese Zuschreibungen sind aber Tendenzen, keine Naturgesetze. Sie hängen vom kulturellen Hintergrund, von der Branche und vom Zusammenspiel mit anderen Farben ab. Ein helles Pastellrot wirkt anders als ein tiefes Weinrot. Wichtiger als die Symbolik einer einzelnen Farbe ist deshalb, dass die Palette zur Zielgruppe und zum Inhalt passt.

Farben beschreiben: HEX, RGB, HSL

Am Bildschirm werden Farben additiv aus Rot, Grün und Blau gemischt. Im Webdesign begegnen Ihnen vor allem diese Schreibweisen:

• HEX: sechs Zeichen, je zwei für Rot, Grün und Blau, zum Beispiel #5b21b6.
• RGB: dieselben Werte als Zahlen von 0 bis 255, etwa rgb(91 33 182).
• HSL: Farbton in Grad auf dem Farbkreis, Sättigung und Helligkeit in Prozent. HSL eignet sich gut, um Abstufungen einer Farbe zu bilden, weil man nur die Helligkeit ändert.
• OKLCH: ein neueres Farbmodell, das sich an der menschlichen Wahrnehmung orientiert und von aktuellen Browsern unterstützt wird. Helligkeitsstufen wirken damit gleichmäßiger.

Für den Druck gelten andere Regeln: Dort wird subtraktiv mit Cyan, Magenta, Gelb und Schwarz gearbeitet. Warum Bildschirmfarben im Druck oft stumpfer wirken, erklärt der Ratgeber Grafikdesign für Print.

Kontrast: wo Gestaltung auf Lesbarkeit trifft

Eine schöne Palette nützt wenig, wenn Text darauf schlecht lesbar ist. Die WCAG verlangen für normalen Text ein Kontrastverhältnis von mindestens 4,5 zu 1, für große Schrift 3 zu 1. Besonders tückisch sind helle Grautöne, Text auf Fotos und farbige Schrift auf farbigem Grund. Prüfen Sie jedes Text-Hintergrund-Paar mit einem Kontrastrechner und verlassen Sie sich nicht auf das eigene Auge am kalibrierten Monitor. Dazu kommt: Etwa jeder zwölfte Mann hat eine Farbsehschwäche, meist bei Rot und Grün. Informationen sollten deshalb nie nur über Farbe vermittelt werden, sondern zusätzlich über Text, Symbole oder Muster. Mehr dazu unter Barrierefreies Webdesign.

In fünf Schritten zur eigenen Palette

1. Ausgangspunkt festlegen: eine vorhandene Markenfarbe, ein Logo oder eine Stimmung, die die Website transportieren soll.
2. Hauptfarbe bestimmen und in mehreren Hell- und Dunkelstufen ausarbeiten.
3. Akzentfarbe wählen, die sich deutlich von der Hauptfarbe abhebt, etwa über den Farbkreis.
4. Neutraltöne ergänzen: ein fast schwarzer Ton für Text, ein bis zwei Grau- oder Cremetöne für Flächen und Linien. Leicht getönte Neutraltöne wirken oft harmonischer als reines Grau.
5. Kontraste prüfen und dokumentieren: Welche Farbe darf auf welchem Hintergrund stehen? Halten Sie die Codes in einem kleinen Styleguide fest.

Häufige Fehler

• zu viele gleich starke Farben, sodass nichts mehr hervorsticht,
• die Akzentfarbe für Dekoration statt für Aktionen,
• reines Schwarz auf reinem Weiß in großen Textmengen, was manche Menschen als grell empfinden,
• Farbcodes, die von Seite zu Seite leicht abweichen,
• ein Dunkelmodus, bei dem einfach alle Farben umgekehrt werden, statt eigene Töne zu wählen.

Wie Farbe mit Schrift und Layout zusammenwirkt, erklären die Ratgeber Typografie im Web und Grundlagen guter Gestaltung.