layout social linkedin
layout social junico

Farbpsychologie in UX – Der ultimative Leitfaden

Rot steht nicht für Liebe? Alles, was du jemals über Farben wissen wolltest. Ein Artikel mit Fokus auf Product- und Interface-Design.
07.03.2022
55 Minuten

Kurzfassung

  1. 1
    Farben haben eine starke Wirkung auf unsere Emotionen und können unsere Wahrnehmung beeinflussen.
  2. 2
    Die Farbpsychologie beschreibt, wie Farben unser Verhalten beeinflussen und welche Bedeutungen sie haben.
  3. 3
    Farben spielen eine wichtige Rolle im Marketing und können die Aufmerksamkeit der Kunden auf sich ziehen.
  4. 4
    Verschiedene Kulturen haben unterschiedliche Assoziationen und Bedeutungen für Farben.
  5. 5
    Die Auswahl der richtigen Farben für Ihre Marke kann Ihre Botschaft effektiv kommunizieren und Emotionen bei den Kunden hervorrufen.
300 Artikel Expertise in Person
Als zertifizierter UX Designer für Millionen Nutzer sichere ich das Wachstum deiner Software durch fundierte und skalierbare Designs.
layout justinschmitz opacity

Einleitung

Farben sind eine Herausforderung. Denn wir können sie künstlerisch und zugleich wissenschaftlich betrachten. Doch wie lernen wir, Farben effektiv zu nutzen? Willkommen beim umfangreichsten deutschsprachigen Artikel zur Farbtheorie. Wir befassen uns tiefgreifend mit der psychologischen Wirkung von Farben. Du lernst, wie Menschen Farben wahrnehmen und auf sie reagieren.

Summary

Nach diesem Artikel siehst du die Welt in anderen Farben. Du wirst Farben faktisch auswählen und stimmige Farbpaletten erstellen.

Wir beginnen mit grundlegenden Konzepten, die jeder Künstler und Designer verstehen sollte. Du lernst, Farben präzise zu beschreiben und erfolgreich zu kommunizieren. Danach befassen wir uns mit menschlichen Reaktionen auf Farben. Anschließend lernst du Schritt für Schritt, wie du die richtigen Farben wählst.

Dieser Artikel fundiert auf den Erkenntnissen aus über 200 wissenschaftlichen Artikeln und Studien. Das hilft dir, langfristig wirkungsvolle Entscheidungen zu treffen. Jedes Konzept trägt dazu bei, dass deine Arbeit dynamischer und kohärenter aussieht.

Farben sind ein System

Das effektive Verwenden von Farben ist schwierig. Es ist eine Herausforderung, schöne Farben zu wählen oder harmonische Farbschemata zu erstellen. Das hat einen simplen Grund:

Eine Farbe steht nie für sich. Lichtverhältnisse und umgebende Farben haben einen Einfluss auf die Wahrnehmung. Die variable Natur der Farbe gibt ihr die Komplexität und zugleich die hohe Kommunikationskraft. Ändert sich eine einzelne Farbe in einer Gruppe aus Farben, kann die gesamte Wahrnehmung aus dem Gleichgewicht geraten.

Die Harmonie wird durch einen falschen Farbton geschwächt.

Die Harmonie wird durch einen falschen Farbton geschwächt.

Das erfolgreiche Verwenden von Farben hängt also nicht unbedingt von Glück ab. Vielmehr ist es ein Verständnis von Regeln, Prinzipien und Techniken. Die Techniken sind in der Tiefe äußerst komplex. Doch gibt es auch praktische Erkenntnisse, die das Farbverständnis in deiner täglichen Arbeit verbessern.

Was ist Farbpsychologie?

Ich bevorzuge die braunen Smarties vor den blauen Smarties. Diese schmecken schokoladiger. Das ist zwar eine kindliche Einbildung, doch auch tatsächliche Erfahrung: Farben beeinflussen den Geschmackssinn.

Die Assoziationen sind noch in weiteren Bereichen sichtbar. Auch bei Studien aus dem medizinischen Bereich finden sich interessante Ergebnisse: Die Farbe von Placebo-Pillen ist ein Faktor für ihre Wirksamkeit. Warme Töne wirken besser als Stimulanzien und Pillen mit kühlen Farbtönen besser als Antidepressiva.

Die Farbpsychologie beschreibt, wie Farben sich auf das menschliche Verhalten auswirken. Lieblingsfarben gehören klar dazu, doch auch subtile Beeinflussungen unserer Wahrnehmung spielen eine große Rolle.

Und so wie Menschen unterschiedliche Lieblingsfarbe haben, so lösen Farben auch individuelle Emotionen aus. Zudem haben Farben in verschiedenen Kontexten und Kulturen unterschiedliche Bedeutungen.

Weiß kann Frieden oder Trauer vermitteln. Die ausgelöste Emotion ist stark vom Individuum abhängig. Welche Faktoren dabei eine Rolle spielen, besprechen wir in der Tiefe in diesem Artikel.

Farben im Marketing

Wir kategorisieren; und das schnell. Wir entscheiden innerhalb von Sekunden, was für uns interessant wirkt und unsere weitere Aufmerksamkeit verdient. Das gilt für Produkte im Schaufenster und für Angebote im Internet. Spannend daran ist, dass ein Großteil der Bewertung allein auf Farbe basiert. Die richtige Auswahl von Farben hat also schwerwiegende Auswirkungen.

Im Marketing sind Farben daher von besonderer Bedeutung. Wir beeinflussen Emotionen durch visuelle Reize. Die Manipulation durch Reize wird auch als Priming bezeichnet. Der YouTube-Kanal Ultralativ hat hierzu ein spannendes Video erstellt:

Unser Gehirn denkt in Schubladen. Und das ist nichts für das man sich schämen muss. Hätte der Mensch keine Schublade für die Silhouette des Mammuts entwickelt und wäre gezwungen gewesen jedes Mal aufs neue darüber nachzudenken, was das jetzt nochmal war, hätten wirs wahrscheinlich nicht lange gepackt.

Der intelligente Einsatz von Farben lässt Produkte von Wettbewerbern abheben und Gefühle beeinflussen. Das Beeinflussen durch Farben ist meist ein unbewusster Prozess, der permanent aktiv ist. Ein Beispiel? Du wirst eine leuchtend rote Getränkedose in den meisten Fällen mit der Marke Coca-Cola verbinden.

Rotes Leuchten. Weißer Schriftzug. Eindeutig Cola.

Rotes Leuchten. Weißer Schriftzug. Eindeutig Cola.

Farben verbinden

Diese Assoziation kommt daher, dass das Branding von Coca-Cola eines der stärksten der Welt ist. Coca-Cola etabliert seit Jahrzehnten durch erfolgreiches Marketing eine Verbindung zwischen dem Getränk und der leuchtend roten Farbe.

Coca Cola Moodboard

Coca Cola Moodboard

Für uns Designer existiert die Herausforderung, dass wir die visuelle Identität der Marke klar kommunizieren müssen. Diese wichtige Aufgabe wollen wir nicht dem Zufall oder unserer Lieblingsfarbe überlassen, oder? Die richtige Farbwahl sollte basierend auf Studien und Erkenntnissen der Farbtheorie erfolgen.

300 Artikel Expertise in Person
Als zertifizierter UX Designer für Millionen Nutzer sichere ich das Wachstum deiner Software durch fundierte und skalierbare Designs.
layout justinschmitz opacity

Farben beschreiben

Newton entwickelte Anfang des 17. Jahrhunderts als Ergebnis der Lichtreflexion von Prismen eine Farbscheibe. Diese rotierende Scheibe beinhaltete die Farben Rot, Orange, Gelb, Grün, Blau, Indigo und Violett.

Newton's Farbkreis

Newton's Farbkreis

Seine Entdeckungen haben zur Entwicklung des Farbkreises beigetragen, wie wir ihn heute kennen. Mithilfe des Farbkreises visualisieren wir, wie Farben miteinander in Beziehung stehen. Moderne Farbräder bestehen nicht nur aus einigen Primärfarben, sondern zeigen auch ihre Schattierungen, Tönungen und Tonungen.

Ein moderner, simpler Farbkreis

Ein moderner, simpler Farbkreis

Doch was sind Schattierungen, Tönungen und Tonungen?

Haut so weiß wie Schnee, Lippen so rot wie Blut, Haare so schwarz wie Ebenholz

Wagen wir ein Experiment: Such dir einen Gegenstand in deiner Umgebung und beschreibe seine Farbe. Die meisten Menschen erläutern die Farben eines Gegenstands, indem sie ihn mit einem anderen Gegenstand vergleichen.

Dabei können wir Farben durch eine Vielzahl von Begriffen definieren:

Farbton

Der Farbton beschreibt die reine Farbe. Schauen wir auf einen Farbkreis, ist der Farbton der Grad, in dem die Farbe positioniert ist. Er bezieht sich also nur auf die vollständig gesättigte Farbe, ohne eine Zugabe von Weiß oder Schwarz. Im Englischen wird der Begriff Hue genannt.

Reine Farbtöne sind außen im Farbkreis sichtbar

Reine Farbtöne sind außen im Farbkreis sichtbar

Das Modell lässt sich beliebig ausweiten und verkleinern. Wir können nur mit den dominantesten Farbwellenlängen der zwölf Farben arbeiten, oder beliebig viele Zwischenschritte hinzufügen.

Eine erhöhte Auswahl an reinen Farbtönen

Eine erhöhte Auswahl an reinen Farbtönen

Der Farbton ist unser Grundmaterial einer Farbe. Das Grundmaterial können wir über drei verschiedene Arten verändern: Schattierungen, Tönungen und Tonungen.

Schattierung

Die Schattierung ist eine dunklere Variante der reinen Farbe. Wir fügen unserem Farbton eine Menge Schwarz hinzu, wodurch wir die Helligkeit der Farbe verringern. Verschiedene Schattierungen erhalten wir aus verschiedenen Schwarzstufen, bis hin zu purem Schwarz. Im Englischen heißt der Begriff Shade.

Schattierungen

Schattierungen

Tönung

Die Tönung (Tint) ist das genaue Gegenteil der Schattierung und bezieht sich auf die hellere Farbvariante. Wir fügen einem Farbton eine Menge Weiß hinzu. Dadurch “verblasst” der eigentliche Farbton und wir nähern uns bis hin zu einem vollständigen Weiß.

Tönungen

Tönungen

Tonung

Die Tonung ist die Mischung aus einer Schattierung und Tönung, denn wir fügen unserem Farbton Grau hinzu. Ton ist ein relativ weit gefasster Begriff, um Farben zu beschreiben, die von einem reinen Farbton abweichen. Ton wird im Deutschen relativ selten genutzt. Im Englischen ist der Begriff Tone verbreiteter.

Tonungen

Tonungen

Farbintensität

Farbigkeit, Sättigung und Chroma beschreiben die Intensität der Farbe. Auch wenn die Begriffe verschiedene Aspekte der Intensität ausdrücken, werden sie häufig unklar voneinander unterschieden. Alle drei Begriffe beschreiben eine Skala, auf der unser Farbton bis zu einem festgelegten Maximalwert übergeleitet wird.

Farbigkeit

Farbigkeit (Colorfulness) ist ein allgemeiner Begriff, um mehr oder weniger Farbe zu bezeichnen. Eine Farbe mit niedriger Leuchtdichte oder geringer Sättigung hat eine geringe Farbigkeit. Eine Farbe mit hoher Buntheit hat eine hohe Sättigung und eine hohe Leuchtdichte.

Farbigkeit

Farbigkeit

Sättigung

Die Sättigung (Saturation) ist das Ausmaß, in dem ein Bereich kein Grau aufweist und eine reine Farbe ist. Die Grautöne in einem Bereich nehmen zu, wenn Rot, Grün und Blau alle zum gleichen Wert tendieren. Sie nehmen folglich ab, wenn wir Rot, Grün und Blau stärker voneinander trennen. Insbesondere, wenn der Abstand zwischen den Maximal- und Minimalwerten innerhalb der Bereiche größer ist.

Sättigung

Sättigung

Chroma

Chroma beschreibt Farbe auf einer Skala vom puren Farbton bis zur maximalen Schattierung, Tönung oder Tonung. Der Begriff stammt aus dem Englischen und wird in der deutschen Sprache gleichwertig genutzt. Je mehr wir unsere Farbe von ihrem Farbton entfernen, desto weniger Chroma besitzt sie.

Chroma

Chroma

Helligkeit

Helligkeit beschreibt die Stärke unserer visuellen Wahrnehmung von Licht. Die Wahrnehmung ist nicht objektiv messbar, da sie von ihrer Umgebung abhängt. Der Bildschirm deines Smartphones ist für dich abends im Schlafzimmer heller, als bei direkter Sonneneinstrahlung in freier Natur. Im Englischen sprechen wir von Lightness oder Brightness.

Leuchtkraft

Die Leuchtkraft wiederum beschreibt die messbare Helligkeit. Lass uns dafür auf eine Auswahl von primären und sekundären Farben schauen. Welche der Farben ist die dunkelste? Welche Farbe ist die hellste?

Eine Auswahl an Farbtönen

Eine Auswahl an Farbtönen

Vermutlich ist auch für dich Blau die dunkelste und Gelb die hellste Farbe. Das liegt an der Energie aus elektromagnetischen Lichtwellen. Ein helles Licht wird von unseren Augen als hell angesehen, weil es mehr Energie bzw. Leuchtkraft hat. Wir bestätigen die Annahme leicht, indem wir Farben entsättigen und mit Weiß vergleichen.

Farbtöne und ihre natürliche Leuchtkraft

Farbtöne und ihre natürliche Leuchtkraft

Das Auge erkennt verschiedene Energieniveaus. Ist das Niveau zu niedrig, sehen wir kaum etwas. Ist das Niveau zu hoch, beschädigen wir die Augen.

Die Leuchtkraft ist also ein Maß dafür, wie hell oder dunkel ein Farbton in seiner Wahrnehmung ist. Im Englischen sprechen wir von Luminosity. Die Leuchtkraftskala, die von Schwarz bis Weiß reicht, bezeichnen wir als Tonumfang oder Tonwertskala (tonal scale).

Leuchtdichte

Ein Begriff, der häufig mit Leuchtkraft verwechselt wird, ist der physikalische Begriff Leuchtdichte (Luminance). Sie misst die absolute Intensität des Lichts. Wir nehmen die gleiche Menge Lichtenergie und konzentrieren sie auf einen Punkt oder verteilen sie über einen größeren Bereich. Der Punkt erscheint heller als die Fläche, da die Intensität pro Flächeneinheit höher ist, obwohl die Gesamtenergie gleich ist. Leuchtkraft bezieht sich also auf die Zeit, Leuchtdichte auf die Fläche.

Temperatur

Jedes Licht hat eine andere Temperatur. Dein Fernseher hat eine andere Lichttemperatur als die Glühbirne in deinem Zimmer oder die Sonne. Die Farbtemperatur ist eine nützliche Möglichkeit, die Lichterscheinung zu beschreiben.

Farbtemperatur

Farbtemperatur

Die Temperatur wird in Kelvin gemessen. Farbtemperaturen über 5000 K werden als kalte Farben (bläulich violett) bezeichnet. Niedrigere Farbtemperaturen unter 5000 K beschreibt man als warme Farben (gelblich rot). Farbtemperaturen werden häufig verwenden, um emotionale Reaktionen zu erzeugen. Dazu später mehr.

Now it’s your turn.

Beschreibe erneut Gegenstände. Versuche jetzt, die oben genannten Begriffe zu nutzen:

  • Welchen Farbton hat der Gegenstand?
  • Hat der Farbton eine Schattierung? Eine Tönung? Einen Ton?
  • Wie hoch ist die Sättigung?
  • Wie hoch schätzt du die Leuchtkraft ein?
  • Wie wirkt die Helligkeit des Gegenstands in seiner Umgebung auf dich?
  • Ändert sich die Helligkeit entsprechend deiner Umgebung?
  • Welche Temperatur hat der Gegenstand?
  • Absorbiert der Gegenstand eventuell die Temperatur des Lichts?
Beispielhafte Beschreibungen für Farben. Quelle des Fotos: Kevin Mueller

Beispielhafte Beschreibungen für Farben. Quelle des Fotos: Kevin Mueller

300 Artikel Expertise in Person
Als zertifizierter UX Designer für Millionen Nutzer sichere ich das Wachstum deiner Software durch fundierte und skalierbare Designs.
layout justinschmitz opacity

Farben kategorisieren

Wir wissen jetzt, wie wir Farben beschreiben. Doch wie werden wir präzise? Wer legt fest, wie hoch die Sättigung einer Farbe wirklich ist? Und wie beschreiben wir die Sättigung überhaupt? Geben wir ihr einen Prozentwert von 0 (keine Sättigung) bis 100 (volle Sättigung)? Hat der rote Stoff von meinem Schal eine Sättigung von 67 % oder 68 %? Wer definiert, wo die Skala anfängt und endet? Wie viele Farben haben wir überhaupt?

Alle Fragen werden wir beantworten. Wir können Farben bereits grob sprachlich kommunizieren. Doch wir müssen deutlich präziser werden. Denn Präzision erlaubt uns, Farben zu speichern und wieder aufzurufen. Andernfalls entfernen wir uns vom Original:

Verschiedene Versionen des eigentlich gleichen Bildes, `falsch gespeichert`

Verschiedene Versionen des eigentlich gleichen Bildes, `falsch gespeichert`

Farben lassen sich systematisch und hierarchisch strukturieren:

  • Farbmodelle legen die Spielregeln fest,
  • die den darin enthaltenen Farbraum prägen.
  • Der Farbraum wiederum wird über eine Farbskala wiedergegeben,
  • die wiederum mit einer bestimmten Farbtiefe dargestellt wird.

Klingt kompliziert? Das ändert sich jetzt.

Farbmodelle

Im Kindergarten lernen Kinder die drei Grundfarben Rot, Gelb und Blau kennen. Aus den Farben lassen sich weitere Farben mischen. Wir mischen Gelb und Blau, um daraus die Farbe Grün zu erhalten. Hurra, ein Farbmodell.

Quelle: @bedneyimages

Quelle: @bedneyimages

Farbmodelle werden häufig auch als Farbsysteme bezeichnet. Sie bestehen aus Komponenten und Regeln. In diesem Artikel werden wir die Modelle vereinfacht erklären.

Komponenten sind in unserem Fall die Grundfarben, wie etwa Rot, Gelb und Blau. Regeln wiederum beschreiben, wie die Farben miteinander interagieren. In unserem Fall gibt es eine Regel: Jede Farbe muss aus einer Mischung der drei Grundfarben erzeugt werden. Beispiel: Die einzige Möglichkeit, mit der ich die Farbe Grün erhalte, ist eine Mischung aus unseren Grundfarben, insbesondere Gelb und Blau.

Quelle: @sersoll

Quelle: @sersoll

Das System aus dem Kindergarten ist einfach. Jedoch hat es einen Nachteil: Wir erzeugen nur eine geringe Anzahl an Farben. Zum Malen auf der Leinwand ist das Farbmodell ausreichend. Doch verschiedene Medien erfordern unterschiedliche Systeme und Regeln.

Zum Beispiel nutzen digitale Fotos ein anderes Farbmodell als gedruckte Fotos. Die Farben erscheinen im Vergleich mehr oder weniger kräftig, weil es physikalische Grenzen für die Möglichkeiten des Mediums gibt. Zum Beispiel ist das neuste iPhone rein theoretisch in der Lage, 1 Milliarde Farben darzustellen, während wir im Druck lediglich zwischen 16.000 verschiedenen Farben unterscheiden.

Quelle: @vikayatskina

Quelle: @vikayatskina

Additives Modell: RGB

Das additive Farbmodell ähnelt unseren Augen. Sie haben Rezeptoren für die Wellenlängen der Farben Rot, Grün und Blau sowie deren Kombinationen. Die drei Farben sind auch die Grundfarben des additiven Systems. Das RedGreenBlue Modell ist das bekannteste und wichtigste System, da wir es nahezu bei allen digitalen Medien verwenden.

Das System hat einen Ansatz: Jede Farbe erzeugt eine gewisse Menge Licht. Je mehr Licht wir hinzufügen, desto heller wird die Farbe und desto mehr nähern wir uns Weiß. Das RGB-System nutzt Zahlen von 0 bis 255. 0 stellt die dunkelste Version der gewählten Farbe (Schwarz) dar. 255 zeigt die Farbe in ihrer vollen Sättigung und Helligkeit an. Jede Farbe hat demnach 256 Möglichkeiten, was uns erlaubt, circa 16 Millionen verschiedene Farben zu erzeugen.

RGB

RGB

Eventuell fragst du dich: warum 255? Jede Primärfarbe im RGB-Modell besteht aus 8 Bit. Das bedeutet, dass der Bereich für jede einzelne Farbe 2^8 beträgt, was 256 Möglichkeiten ergibt. Da 0 (schwarz) die erste Möglichkeit ist, erhalten wir 255 Abstufungen.

256 Stufen von Rot im RGB-Modell

256 Stufen von Rot im RGB Modell

Subtraktives Modell: CMYK

Du arbeitest mit Lacken, Farben, Tinten oder anderen greifbaren Gegenständen? Dann findest du das additive Farbmodell vermutlich ziemlich kontraintuitiv, da du genau gegenteilig arbeitest.

Das subtraktive Modell wird bei physischen Mischungen wie dem Farbdruck angewandt. Durch das System erzeugen wir circa verschiedene 16.000 Farben. Weiß ist kein Ergebnis einer großen Menge an Farben, sondern das Resultat fehlender Farben. Beim Drucken starten wir mit einem weißen Blatt Papier. Je mehr Farbe wir hinzufügen, desto dunkler wird das Papier.

CMYK

CMYK

Das subtraktive Modell funktioniert auf der Grundlage des reflektierten Lichts. Die Art und Weise, wie ein Pigment Wellenlängen des Lichts reflektiert, bestimmt seine sichtbare Farbe für das menschliche Auge. Wir nutzen Farbstoffe und Filter, um bestimmte Wellenlängen des Lichts von der ursprünglichen Oberfläche zu absorbieren. Die sichtbare Farbe ist der Teil des Spektrums, der nicht durch den Farbstoff oder Filter absorbiert wurde.

Traditionell basierte das erste subtraktive Farbsystem auf einer Mischung von Rot, Gelb und Blau, unserem bekannten Modell aus dem Kindergarten. Das System ist jedoch unvollkommen. Die Pigmente, die uns zur Verfügung stehen, absorbieren das Licht unvollständig. Wir erhalten kein klares Schwarz, sondern nur ein dunkles Braun.

Als der Farbdruck aufkam, wurden sie durch **Cyan, Magenta, Gelb und Schwarz ** ersetzt. Die Farbkombination ermöglicht es Druckern, eine größere Vielfalt an Farben auf Papier zu drucken. Das Hinzufügen von Schwarz erlaubte es, dunkle Brauntöne durch einen klaren Schwarzton zu ersetzen.

Unterschied RYB <> CMYK

Unterschied RYB <> CMYK

Das YUV-Farbmodell

Das YUV-Farbmodell wird bei der Übertragung von analogem Farbfernsehen gebraucht. Es leitet sich aus dem RGB-Farbraum ab. YUV lässt sich effizienter kodieren und ist abwärtskompatibel mit dem Schwarz-Weiß-Fernsehen.

Das YUV-Modell definiert einen Farbraum durch eine Luma-Komponente und zwei Chrominanz-Komponenten, die U (blaue Projektion) und V (rote Projektion) genannt werden. Die Luma-Komponente überträgt die Leuchtdichte.

YUV. Quelle: Wikimedia.

YUV. Quelle: Wikimedia.

Alte Fernseher nutzen lediglich die Luma-Informationen bzw. Leuchtdichte Y, während neuere Fernseher auf die Farbinformationen U&V zurückgreifen. Beide zusammen liefern die vollständige Information über das Bild.

Der Hauptvorteil des YUV-Modells bei der Bildverarbeitung ist die Entkopplung von Luminanz- und Farbinformationen. Die Bedeutung der Entkopplung liegt darin, dass die Luminanzkomponente eines Bildes verarbeitet werden kann, ohne die Farbkomponente zu beeinträchtigen.

Das HSB und HSL Farbmodell

Zwei weitere bekannte Farbmodelle sind HSB (Hue, Saturation, Brightness = Farbton, Sättigung, Helligkeit) und HSL (Hue, Saturation, Lightness = Farbton, Sättigung, Leuchtkraft). HSB und HSL sind menschenfreundlichere, alternative Darstellungen des RGB-Farbmodells.

Wir beschreiben eine Farbe durch Farbton, Sättigung und Helligkeit einfacher, als dass wir Rot-, Grün- und Blauanteile zwischen 0 und 255 schätzen.

`Gesättigte, hell orange Federn` VS `Federn mit Rot-Wert 180, Grünwert 59 und 156er-Blauwert`

`Gesättigte, hell orange Federn` VS `Federn mit Rot Wert 180, Grünwert 59 und 156er Blauwert`

HSL ist ähnlich wie HSB. Bei beiden Modellen ist der Farbton derselbe und wird durch einen 360°-Grad Kreis veranschaulicht und gemessen. Der Hauptunterschied besteht darin, dass HSL symmetrisch zu Helligkeit und Dunkelheit ist.

In HSL geht die Sättigungskomponente immer von der voll gesättigten Farbe zum entsprechenden Grau. Die Helligkeitskomponente erstreckt sich immer über den gesamten Bereich von Schwarz über den gewählten Farbton bis hin zu Weiß. In HSB geht die Sättigungskomponente von der voll gesättigten Farbe zu Weiß. Die Helligkeitskomponente reicht nur halb so weit, von Schwarz bis zum gewählten Farbton.

HSL und HSV. Quelle: Wikimedia

HSL und HSV. Quelle: Wikimedia

Andere Farbmodelle

Natürlich gibt es auch andere Farbsysteme, die je nach Vorlieben und dem Zielmarkt eingesetzt werden. Das amerikanische Pantone und das deutsche RAL unterscheiden sich von den vorgenannten Systemen, da ihre Farbräume kein Farbmodell benutzen.

Pantone Matching System

Das Pantone Matching System ist ein standardisiertes Farbsystem, das fast 5.000 verschiedene subtile Farbnuancen und -variationen identifiziert. Das detaillierte Farbnummerierungssystem ermöglicht es Designern und Druckereien, Farben korrekt zu standardisieren und abzustimmen. So lassen sich die bei der Verwendung von CMYK üblichen Abweichungen von gedruckten Farben vermeiden.

Pantone ist weltweit als die Standardsprache für die Farbkommunikation in der Druckwelt bekannt. Das System wurde ursprünglich für die grafische Industrie entwickelt. Es hat sich aber auch in vielen anderen Branchen als nützlich erwiesen.

RAL

Das RAL Farbsystem definiert matte, glänzende und metallische Oberflächenfarben. RAL ist die Basis für Beschichtungen. Für spezielle Beschichtungen, z. B. für Automobile, werden eher andere Systeme beansprucht. Letztlich geht es darum, eine einheitliche Beschichtung z. B. von klassischen Fahrrädern zu erreichen. Das RAL-Farbsystem wird hauptsächlich für Pulverbeschichtungen, Lacke und Kunststoffeinfärbungen verwendet.

Auswahl eines Farbmodells

Welches Farbmodell du verwenden solltest, hängt von deiner Arbeit ab. Bei der Gestaltung von digitalen Medien kannst du dir sicher sein, dass Nutzer meist deine Farben so sehen, wie du sie selbst auf deinem Bildschirm siehst.

Erstellt du Medien für den Printbereich, solltest du bereits in deinem Designprogramm den CMYK Farbraum auswählen. Drucker konvertieren zwar RGB Dateien vor dem Drucken automatisch, die erstellten Farben weichen jedoch von deinen gewählten Farben ab.

Farbräume

Wir haben über das Farbmodell Regeln definiert, über die Farben erzeugt werden. Doch wie beschreiben wir jetzt die einzelnen Farben? Wir müssen jedem Farbton eine Adresse geben, die referenziert werden kann. Nur so stellen wir Farben reproduzierbar dar.

Ein Farbraum schafft Abhilfe. Er ist ein konzeptionelles Werkzeug, um die Farbfähigkeiten zu verstehen. Er ermöglicht die reproduzierbare Darstellungen von Farben, analog und digital.

Wir sprechen von einem Farbraum, weil er sich meist in einem dreidimensionalen Koordinatensystem durch seine Komponenten definiert. In dem Raum hat jeder Punkt eine feste Koordinate und Farbe. Wir sehen uns vier Farbräume ihrer Größe nach an:

sRGB

Der Farbraum sRGB steht für Standard Red Green Blue. Er wurde 1996 von HP und Microsoft entwickelt, um das Erscheinungsbild von Farben in der Elektronik zu standardisieren. Er ist der am häufigsten genutzte Farbraum und wird zum Beispiel in Windows, in Browsern und in Konsolen verwendet.

Adobe RGB

Der Adobe RGB Farbraum wurde 1998 von Adobe entwickelt. Er wurde entwickelt, um die meisten der mit CMYK-Farbdruckern erreichbaren Farben zu erfassen, aber unter Verwendung von RGB-Primärfarben auf einem Gerät wie einem Computerbildschirm.

ProPhoto

Der ProPhoto RGB-Farbraum wurde von Kodak entwickelt. Er bietet einen besonders großen Farbraum, der für die Verwendung bei der fotografischen Ausgabe konzipiert wurde.

CIELAB

Der CIE 1976 Lab*-Farbraum (auch CIELAB genannt) ist einer der beliebtesten Farbräume für die Messung von Objektfarben.

CIELAB ist ähnlich dem YUV-Farbmodell konzipiert, sodass es dem menschlichen Sehen nahekommt. Er gilt als geräteunabhängiger 3D-Farbraum, der die genaue Messung und den Vergleich aller wahrnehmbaren Farben anhand von drei Farbwerten ermöglicht. In dem Farbraum entsprechen die numerischen Unterschiede zwischen den Werten in etwa dem Ausmaß der Veränderung, die Menschen zwischen Farben wahrnehmen.

cielab farbmodell

Als Vergleich: Adobe RGB deckt etwa 52 % des CIELAB-Farbspektrums ab, während sRGB sogar nur 35 % abgedeckt.

srgb

Du merkst: Es wird überaus technisch. Doch keine Sorge, wir verlassen die mathematisch angehauchte Theorie in Kürze wieder. Falls dich das Thema interessiert, kannst du weitere Farbräume auf Wikipedia finden.

Farbskala

Der Farbraum ist ein Bereich objektiv messbarer Werte. Die Farbskala (“Gamut”) beschreibt alle Farben, die ein bestimmtes Gerät tatsächlich erzeugen kann.

Jedes Gerät hat seine eigene, einzigartige Farbskala. Bildschirme sind unterschiedlich in der Lage, gleiche Farbpaletten zu erzeugen. Pigmente reflektieren das Licht in einem ungleichmäßigen Verhältnis, wenn man ihre Sättigung verringert.

Das farbige Dreieck unten zeigt den für den sRGB-Farbraum verfügbaren Bereich, der üblicherweise in Computermonitoren zum Einsatz kommt. Wie du sehen kannst, deckt er nur einen Teil des gesamten sRGB-Farbraums ab.

Verfügbarer Bereich in sRGB. Quelle: Wikimedia

Verfügbarer Bereich in sRGB. Quelle: Wikimedia

Farbgenauigkeit

Wir wissen jetzt also, wie unsere Farben aufgebaut sind, welche Farben wir theoretisch erzeugen können und welche Farben unser Gerät praktisch erzeugt. Das letzte fehlende Element ist die Farbgenauigkeit.

Wenn wir eine Farbe digital speichern, hat sie einen ganz exklusiven Platz im Farbraum. Ein Beispiel: Du hast gelernt, dass wir im RGB Farbmodell 256 Möglichkeiten haben, um reine Rot-Töne zu erzeugen. Jede Farbe hat eine Kennzeichnung und wir haben eine maximale Anzahl an Abstufungen.

Doch was passiert, wenn wir einen Rotwert zwischen 200 und 201 benötigen? Wir müssen runden. 256 Stufen erlauben bereits eine hohe Variation. Doch besonders bei Farbverläufen auf großen Bildschirmen sehen wir schnell Rundungsfehler.

Die Farbgenauigkeit (Bittiefe) beschreibt die Anzahl an Farben und Abstufungen, die wir zur Verfügung haben. Im klassischen RGB Farbmodell sind das 8-Bit (256 Möglichkeiten = 2^8).

Am besten lässt sich der Unterschied über folgende Visualisierung erklären:

Verschiedene Bittiefen und Gamut Einstellungen

Verschiedene Bittiefen und Gamut Einstellungen

Wichtig: Die Farbgenauigkeit ist nicht als Teil eines Farbraums definiert. Sie ist ein Implementierungsdetail, das der Software überlassen wird. Mehr Bits bedeuten, dass mehr verschiedene Farben angezeigt werden, und zwar innerhalb eines Farbbereichs, der durch die Farbskala der Anzeige definiert ist.

Weitere Begriffe und Informationen

Gamma

Gamma gibt die Leuchtdichte der Pixel bei jeder Helligkeitsstufe an und beschreibt, wie fließend der Übergang von Schwarz zu Weiß ist. Dabei beeinflusst Gamma das Erscheinungsbild stark. Ein niedriger Gamma-Wert lässt Schatten heller erscheinen und kann zu einem flacheren, verwaschenen Bild führen. Ein höheres Gamma führt dazu, dass Details in den Schatten schwieriger zu erkennen sind.

Bilder mit unterschiedlichen Gamma Einstellungen

Bilder mit unterschiedlichen Gamma Einstellungen

Gamma ist in der Regel als Exponentialkurve beschrieben. Dadurch erhöht sich die Präzision bei dunkleren Farben, wo die menschliche Wahrnehmung empfindlicher ist. Ein richtiges Gamma führt zu mehr Tiefe und Realismus im Bild.

Farbraumkonvertierung

Farben lassen sich von einem Farbraum in einen anderen konvertieren. Häufig nutzen Experten dafür auch den Begriff der Farbtransformation. Farbraumkonvertierungen sind eine Wissenschaft für sich, die wir in diesem Artikel ignorieren.

300 Artikel Expertise in Person
Als zertifizierter UX Designer für Millionen Nutzer sichere ich das Wachstum deiner Software durch fundierte und skalierbare Designs.
layout justinschmitz opacity

Wie beeinflusst uns Farbe?

Wir wissen jetzt, wie wir Farben beschreiben und präzise speichern. Die Informationen helfen uns, Farben zu kommunizieren. Doch welche Farben sollen es sein und warum?

Farben begleiten und beeinflussen uns, seit wir noch in Höhlen gelebt haben. Sie haben eine tiefgreifende Wirkung auf uns und lassen sich in allen Lebensbereichen finden. Gut gewählte Farben und verschiedenen Farbkombinationen rufen intensive Emotionen hervor oder lenken unsere eigentlich als autonom wahrgenommenen Entscheidungen. Doch wie finden wir die richtigen Farben?

Es ist kein Zufall, dass Stoppschilder rot gefärbt sind. Der Mensch verbindet Farben mit Gefühlen. Auch wenn einige von ihnen evolutionär bedingt sind, ändern sie sich im Laufe des Lebens und sind auch stark vom jeweiligen Kontext und der Kultur abhängig. Während eine rote Farbe auf der Straße eine gewisse Gefahr signalisiert, fühlt man sich beim Anblick einer Coca-Cola-Flasche nicht gewarnt.

Stoppschilder in verschiedenen Situationen und Ländern

Stoppschilder in verschiedenen Situationen und Ländern

Warum assoziieren wir Farben mit Emotionen?

Das Kapitel spricht einem Großteil der vorhandenen Artikel zur Farbpsychologie die Glaubwürdigkeit ab. Wir entlarven die Mythen auf Marketing- und Psychologie-Webseiten, die einer Farbe ganz bestimmte Emotionen zuordnen. Der Ansatz ist grundlegend falsch. Ich erkläre dir die komplexe und wissenschaftliche Basis der Farbtheorie auf einfachem Weg.

Farben haben keine einzelnen Bedeutungen. Unsere Interpretation von Farbe ist nicht linear. Sie hängt von vielen Faktoren ab, wobei das Beispiel mit Coca-Cola nur eines von vielen ist. Die Farbe Rot kann im Kontext von Krieg mit Blut und Schmerz assoziiert werden. Im Kontext einer Hochzeit verbinden wir Rot eher mit Liebe und Leidenschaft. An der Börse bedeuteten rote Zahlen einen schlechten Kurs.

Viele Gründe für die Verbindungen sind einleuchtend, gehören jedoch noch final erforscht.

Grund 1: Evolution

Rein biologisch betrachtet macht eine Assoziation von Farben in unserer Menschheitsgeschichte Sinn. Wir nehmen helles, gelbes Sonnenlicht als erweckend wahr, während wir das dunkle Blau der Nacht mit Ermüdung in Verbindung bringen.

Auch in der Natur dominieren bestimmte Farben, weswegen wir wiederum für andere sensibler sind. Ein feuerroter Kreis in einer ländlichen (Grün/Blau/Grau/Braun) Landschaft erweckt eher unsere Aufmerksamkeit. Auch andere Tiere entwickelten Augenstrukturen zur Erkennung von Farben, die für ihr Überleben wichtig waren. Etwa sehen Vögel das UV-Licht.

Die Evolution mag eine wichtige Rolle bei der Ausprägung der Farberregung spielen. Wenn es jedoch um die Farbpräferenzen geht, bieten die beiden folgenden Theorien die überzeugenderen Erklärungen.

Grund 2: Kultur

Viele Bedeutungen der Farben stammen auch aus Kultur und Tradition. Die Farbsymbolik ist weitverbreitet, weil Farbe in der Kultur eine wichtige Form der Kommunikation ist. Wir verwenden sie, um Ideen, Gefühle und Emotionen darzustellen.

In einigen Kulturen steht Weiß für Unschuld, in anderen für den Tod. Die Liebe wird bei uns mit der Farbe Rot verbunden, in Indien ist es Gelb und in Afrika die Farbe Blau. Überall auf der Welt sind es dieselben Farben mit völlig unterschiedlichen Emotionen und Bedeutungen.

Inwieweit bestimmte Farben wie Rot oder Schwarz eine kulturübergreifende Bedeutung haben, ist eine weitaus schwierigere Frage. Farbe ist eines der auffälligsten Merkmale der menschlichen Erfahrung, wurde aber in der Forschung oft ignoriert oder übersehen.

Grund 3: Erfahrung und Kontext

Wie das Beispiel der Coca-Cola Dose im Supermarkt beweist: Unser Gehirn verknüpft verschiedene Gefühle, Sinneserfahrungen und Bedeutungen. Je nach Grad der Ähnlichkeit und Häufigkeit wird die Verknüpfung verstärkt.

Im Laufe unseres Lebens bauen wir das assoziative Netzwerk ständig aus. Mit jeder Erfahrung schaffen wir neue Knoten und passen vorhandene Verknüpfungen an. Auch für Farben existieren solche Bindungen, die je nach Erfahrung und Nähe zu anderen Erfahrungen geprägt werden. So erinnert die Farbe Rot an den leckeren Erdbeere-Smoothie, oder das übersehene Stoppschild.

Damit wir die richtigen Farben für unsere Zielgruppe auswählen, müssen wir sie besser verstehen. Analyse-Tools zeigen uns geografische Standorte oder Gerätenamen. Doch wir müssen deutlich mehr wissen: Woher kommen sie? Woran glauben sie? Was sind ihre Erfahrungen? Was ist ihnen wichtig?

Grund 4: Sprache

Eine Studie aus dem Jahr 2006 ergab, dass Angehörige des Himba-Stammes den blauen Kreis innerhalb eines Kreises mit grünen Kreisen nicht finden konnten. Für Englischsprachige ist der blaue Kreis offensichtlich. Für die Studienteilnehmer war er jedoch nur ein weiterer grüner Kreis im Kreis. Das liegt daran, dass es in der Sprache des Himba-Stammes kein Wort für Blau gibt.

Stattdessen hat der Stamm zahlreiche Wörter für verschiedene Grüntöne. Hier konnten die Teilnehmer die verschiedenen Kreise klar voneinander differenzieren, während Englischsprachige keinen Unterschied sahen.

Sprache ist eine Form des Ausdrucks, immer verbunden mit Emotionen. Insofern kann es Verbindungen zwischen Assoziationen von Emotionen mit Farben und der sprachlichen Präzision geben. Diese Vermutung bedarf noch einer größeren wissenschaftlichen Bestätigung.

Welchen Einfluss hat Farbe auf unsere Bewertung?

Wann immer du einer Farbe ausgesetzt bist, werden deine Knoten im Gehirn für diese Farbe aktiviert. Sobald die Knoten aktiviert werden, werden verbundene weitere Knoten ebenfalls aktiviert. Wenn die umliegenden Knoten aktiviert werden, werden alle die Inhalte dieser Knoten vorübergehend in deine Wahrnehmung der Welt integriert.

Wenden wir diese Erkenntnis also auf die Farbe an. Wenn wir einen Salat sehen, werden Knoten aktiviert, die Informationen zu Salat gespeichert haben. Ebenso werden alle umliegenden Verbindungen aktiviert. Dazu zählen die Relation zur Farbe Grün, geschmackliche Verbindungen wie Essig, kategorisch ähnliche Verbindungen wie Tomaten und Gurken oder symbolische Verbindungen wie Gesundheit.

Potenzielle Verbindungen zu Salat

Potenzielle Verbindungen zu Salat

Das Aktivieren des Knotens sorgt auch dafür, dass wir weitere visuelle Eindrücke in der Farbe Grün leichter verarbeiten. Das Gehirn schätzt die erhöhte Geschwindigkeit der Verarbeitung und wertet somit den visuellen Reiz auf. Folglich würden die meisten daher ohne Vorkenntnisse eher zu einem grün gestalteten Salatdressing-Flasche greifen.

Der Einfluss funktioniert auch in die umgekehrte Richtung. Wenn wir die Farbe Grün auf einer Lebensmittelverpackung sehen, assoziieren wir das Produkt mit Gesundheit. Oder wenn Nutella sich sprachlich und visuell als gesundes Frühstück mit Haselnüssen und Proteinen verkauft, hat das einen ähnlichen Erfolg:

Nutella hat ganz viele unentbehrliche Lebensbausteine. Oder?

Erst auf einen zweiten Blick erkennen wir, dass das Produkt zu einem Großteil aus Fetten und Zucker besteht.

In Bezug auf die Farbpsychologie ist es wichtig zu begreifen, dass die visuelle Natur der Farbe nahezu irrelevant ist. Die Forschung zeigt, dass das bloße Nachdenken über eine Farbe die gleiche Wirkung hat wie die visuelle Wahrnehmung.

In einer Studie führte der Gedanke an die Farbe Gelb zu denselben neurologischen Veränderungen wie die visuelle Wahrnehmung. So zum Beispiel auch beim Wort Grüne Verkehrspolitik, die auch ohne visuellen Reiz für Gesundheit und Nachhaltigkeit steht.

Farben sind aufgrund unseres konzeptuellen Wissens einflussreich. Farbtöne sind fast bedeutungslos. Die Bedeutung von Farben und ihr anschließender Einfluss hängt von den emotionalen Semantiken ab, die wir mit einer Farbe verbinden.

Sollten wir uns ausschließlich auf die Farbe konzentrieren?

Viele unten genannten Assoziationen für Farben fokussieren sich auf den Farbton, vernachlässigen aber weitere Eigenschaft wie die Helligkeit und Sättigung. Dabei hat sich gezeigt, dass Helligkeit und Sättigung wesentlich stärkere Auswirkungen auf die Emotionen als der Farbton haben.

Welche weiteren Faktoren spielen bei der Bewertung eine Rolle?

Semantischer Kontext

Die meisten Menschen möchten ungern ein grün-rot kariertes Auto fahren, an einem leuchtend gelben Schreibtisch arbeiten oder neongrüne Tabletten schlucken. Erfahrungen in einem spezifischen Kontext sind enorm wichtig, um die Akzeptanz sicherzustellen. Tabletten gegen Kopfschmerzen sollten nicht leuchtend rot sein, da Menschen Rot eher mit Schmerzen, als mit Schmerzlinderung assoziieren.

Der YouTube-Kanal 5 Minute Crafts nutzt diesen Effekt. Der Kanal spielt mit dem kuriosen Zusammensetzen von Elementen und kontrastreichen Farben, und ebenfalls durch unerwartete Farbnutzung wie die einer weißen Erdbeere:

Thumbnail von 5 Minute Crafts

Thumbnail von 5 Minute Crafts

Verkaufst du ein Produkt, ist der semantische Kontext umso wichtiger. Denn in diesem speziellen Fall müssen wir auch den Typ des Produkts beachten. Wir unterscheiden zwischen utilitaristischen und hedonistischen Produkten.

Utilaristisch und Hedonistisch

Ist dein Produkt utilitaristisch oder hedonistisch ist? Eine kleine Farbauswahl vermittelt Nützlichkeit und Ernsthaftigkeit, während eine große Auswahl hedonistische und lustige Qualitäten vermittelt. Wähle daher weniger Farben für Produkte, die einen ernsten Charakter haben. Wähle mehr Farben für Produkte, die von Natur aus fröhlich sind.

Buntes Design. Quelle: SOCIAL.CUT

Buntes Design. Quelle: SOCIAL.CUT

Der utilitaristische Konsum bezieht sich auf Gegenstände, die vorrangig zur Erfüllung bestimmter Zwecke dienen. Der hedonistische Konsum bezieht sich auf Gegenstände, die durch ihren Gebrauch oder Besitz Emotionen, Freude und Vergnügen bereiten.

Utilitäre Käufe sind anfälliger für die Auswirkungen von Zeitdruck und dem Auswahl-Paradoxon als hedonistische Käufe. Zudem entwickelten Menschen in Studien eine stärkere Affinität zu Produkten, wenn die Farben mit dem Produkt kongruent waren.

Funktionale Farben wie Schwarz, Grau, Blau oder Grün verstärken nützliche Produkte. Sozial-sensorische Farben wie Rot, Rosa und Lila verstärken hedonische Produkte.

Farbe sollte zudem sparsam eingesetzt werden, wenn sie die Aufmerksamkeit auf wichtige Informationen lenken soll. Ein rotes Dreieck, das vor einem kritischen Problem warnt, ist weniger effektiv, wenn die Anwendung die Farbe Rot an anderer Stelle aus unkritischen Gründen gebraucht.

Funktionalität

Farben schaffen nicht nur eine emotionale Bindung, sondern sind ebenfalls funktional. Sitze in Zügen haben gefleckte oder gemusterte Bezüge mit hellen Akzentfarben, um Schmutz unauffälliger aussehen zu lassen. Autos in silbernen Farben verbergen Kratzer.

Quelle: Gemma Evans

Quelle: Gemma Evans

Sozialer Status

Farben vermitteln abhängig von ihrem Kontext auch einen Status. Auch wenn sich Schmutz auf einem Auto mit schwarzer Lackierung schneller sehen lässt, steht Schwarz in der Automobilbranche als Prestige-Farbe. Ich freue mich jedenfalls darauf, die erste Führungskraft eines DAX Unternehmens in einem pinken Mercedes zu sehen.

Farben vermitteln Status. Quelle: Jack Lucas Smith

Farben vermitteln Status. Quelle: Jack Lucas Smith

Erregung

Zahlreiche Studien und Auswertungen belegen, dass die Temperatur der Farbe einen Einfluss auf unser Verhalten hat. Dabei verringern kühle Farben die Erregung, während warme Farben sie erhöhen.

Kühle Farben lösen Entspannung aus. Sie beschleunigen die Zeit in unserer Wahrnehmung. Die Farbtöne senken den Stresslevel und erhöhen die kortikale Funktion. Das führt zu einer erhöhten systematischen Verarbeitung der Informationen in unserem Gehirn. Möchtest du deine Zielgruppe länger an dich binden (z. B. zeitlich in einem Supermarkt) oder mit Argumenten überzeugen, wählst du eine kühle Farbe.

Kühles Layout in Supermärkten. Quelle: Eduardo Soares

Kühles Layout in Supermärkten. Quelle: Eduardo Soares

Hohe Anregung durch warme Farben verlangsamt die wahrgenommene Zeit, regt allerdings auch zu Impulsivität an. Möchtest du deine Zielgruppe zu schnellen Entscheidungen bewegen, wählst du eine warme Farbe. Erregung erhöht die Impulsivität, weil sie die kortikale Funktion hemmt und zu heuristischer Verarbeitung neigt. Die Menschen verbringen weniger Zeit mit Rationalisieren oder Debattieren, und sie handeln mit größerer Wahrscheinlichkeit sofort.

Auf kleinste Elemente gedacht, können wir etwa den Ladebalken in einer Software blau gestalten, um so die wahrgenommene Zeit zu verringern.

loading

loading

Aufmerksamkeit

Farbe erregt unbewusst unsere Aufmerksamkeit. Die beste Art, um Aufmerksamkeit zu erregen, sind starke Kontraste. Wir legen die Aufmerksamkeit von Natur aus auf Reize, die visuell hervorstechen. Das Konzept lässt sich im digitalen und analogen Marketing nutzen.

Kontrast erregt Aufmerksamkeit. Quelle: Etienne Girardet

Kontrast erregt Aufmerksamkeit. Quelle: Etienne Girardet

Webseiten können wichtige Bereiche in einer Farbe mit hoher Sättigung oder hohem Kontrast-Potenzial markieren. Produkthersteller können ihr eigenes Produkt mit einer grünlichen Verpackung gestalten, wenn Wettbewerber im Regal auf rote Verpackungen zurückgreifen. Eine neuartige Verpackung erhöht die Wahrscheinlichkeit einer unwillkürlichen Aufmerksamkeitsreaktion.

contrast product

contrast product

Wichtig dabei ist, die anderen im Kapitel erwähnten Prinzipien zu beachten. Aufmerksamkeit ist ein sehr kurzfristiges Prinzip und weniger ein langfristig bindender Faktor.

Alter

Mit zunehmendem Alter steigt die Vorliebe für Farben mit kürzerer Wellenlänge (Blau, Grün, Violett) gegenüber Farben mit längerer Wellenlänge (Rot, Orange und Gelb). Der Fakt sollte weniger signifikant für die Farbwahl sein, jedoch eine vorhandene Wahl bestätigen oder abschwächen.

Geschlecht

Zahlreiche Studien zeigen, dass Männer helle und kühlere Farben mit hohen Werten, hoher Sättigung und Schattierung bevorzugen. Frauen hingegen bevorzugen warme, weiche Farben mit niedrigen Werten und geringerer Sättigung.

Die Vorliebe könnte sich durch das klassische Geschlechterschema ergeben, bei dem wir von klein auf Männer an Blau und Frauen an Rosa orientieren. Sie sind nicht als fix anzusehen und passen sich im Verlaufe des gesellschaftlichen Wandels an.

Die Vorlieben lassen sich besonders gut bei Hygiene-Artikeln beobachten. Während Frauenprodukte häufig mit leicht entsättigten Pastellfarben und viel Weißraum arbeiten, werden Männerprodukte mit gesättigten Farben und einer Menge Schwarz präsentiert.

beauty woman

beauty woman

beauty man

beauty man

Wie bewerten Menschen Farbkombinationen?

Farben werden selten isoliert erlebt. In der Natur sieht man gelbe Narzissen vor grünem Gras, in der Nacht einen weißen Mond vor einem tiefblauen Himmel. In all den Beispielen beeinflussen die Farbkombinationen unsere ästhetische Erfahrung.

Kontrastreiche Ebenen in der Natur. Quelle: Guzmán Barquín

Kontrastreiche Ebenen in der Natur. Quelle: Guzmán Barquín

Wie bewerten Menschen einen Stimulus, der mehrere Farben enthält? Welche Farben sehen in Kombination visuell ansprechend aus? Bei der Diskussion über Farbästhetik ist es wichtig, nicht nur zu berücksichtigen, wie sehr Menschen einzelne Farben mögen. Vielmehr müssen wir darauf achten, wie Farben in komplexeren Farbkompositionen zusammenwirken.

Studien über die Vorlieben und Harmonien von Farbkombinationen haben widersprüchliche Ergebnisse erzielt. Die Widersprüche entstanden daraus, dass die Studien hauptsächlich Unterschiede im Farbton fokussierten. Sie lassen Hierarchie, Layout oder Schattierungen unberücksichtigt.

Neuere Studien schlagen drei Arten der Bewertung von Wahrnehmungsreaktionen auf Farbkombinationen vor. Die empirische Unterstützung für die Unterscheidung zeigt, dass sowohl die Paar-Präferenz als auch die Paar-Harmonie mit zunehmender Farbtonähnlichkeit steigen, während Kontraste bei Hintergründen (Figuren-Präferenz) an Bedeutung gewinnen.

Paar-Präferenz

So ist Rot und Orange für viele Menschen eine angenehme Kombination. Diese Bewertungen hängen jedoch stark von der Vorliebe für die einzelnen Farben und dem Kontrast zur Helligkeit ab.

Die Paar-Präferenz beschreibt genau diesen Grad der Vorliebe eines Beobachters für ein bestimmtes Farbpaar. Sie lässt sich schwierig kategorisieren. Es gibt jedoch einige empirische Beweise, bei denen die Paar-Präferenz mit zunehmender Ähnlichkeit im Farbton zunimmt. Rot und Orange werden in dieser Logik also als schöneres Paar wahrgenommen, als Rot und Grün.

Paar-Präferenzen. Quelle: Brandon Mowinkel

Paar Präferenzen. Quelle: Brandon Mowinkel

Paar-Harmonie

Paar-Harmonie ist das Ausmaß, in dem ein Beobachter die Farben in der Kombination als zusammengehörig empfindet. Sie gilt unabhängig davon, ob er die Kombination mag. Etwa sind Rot und Grün bei vielen Menschen weniger erfolgreich in der Paar-Präferenz. Doch im Kontext eines Schottenrocks würde die kontrastreiche Farbkombination vielen als angemessen und harmonisch erscheinen.

Figuren-Präferenz

Die Figuren-Präferenz ist der Grad der Vorliebe des Betrachters für die Farbe der Figur selbst, wenn er sie vor ihrem Hintergrund betrachtet. Die Figuren-Präferenz ist nur indirekt ein Maß für die Wahrnehmung der Farbkombination, da der Beobachter speziell gebeten wird, nur auf die Farbe der Figur zu reagieren.

Dennoch ist sie für die ästhetische Reaktion auf Farbkombinationen relevant, da dieselbe Farbe vor verschiedenen Hintergrundfarben ganz anders aussehen kann.

Paare mit stark kontrastierenden Farbtönen im Allgemeinen weder als vorteilhaft noch als harmonisch eingestuft. Doch es steigt die Bewertung der Farbpräferenz von Figuren mit zunehmendem Farbtonkontrast zum Hintergrund.

Kontrastreiche Farbtöne in verschiedenen Ebenen. Quelle: Dejan Zakic

Kontrastreiche Farbtöne in verschiedenen Ebenen. Quelle: Dejan Zakic

Fazit

Mehrere Studien haben ergeben, dass ein Faktor alle drei Komponenten beeinflusst: das Verhältnis zwischen Vorder- und Hintergrund. Farben in gegenüberliegenden Ebenen sind optisch ansprechender, wenn sie ungleiche Farbtöne haben.

Das bedeutet, dass z. B. wärmere Figuren auf kühleren Hintergründen bevorzugt werden und kühlere Figuren auf wärmeren Hintergründen. Farben in der gleichen Ebene sind dagegen optisch ansprechender, wenn sie ähnliche Farbtöne haben.

300 Artikel Expertise in Person
Als zertifizierter UX Designer für Millionen Nutzer sichere ich das Wachstum deiner Software durch fundierte und skalierbare Designs.
layout justinschmitz opacity

Die richtige Farbe wählen

Die große Anzahl an Millionen von Farben und Farbkombinationen wirkt schnell überwältigend. Wie wählen wir aus dieser großen Palette die richtigen Farben? Welche Farben kommunizieren optimal die Emotionen, die wir weitertragen wollen?

Zunächst solltest du dir im Klaren über die Persönlichkeit und das Ziel von dem sein, was du kommunizieren möchtest. Wählst du zum Beispiel die Farben für das Branding deiner eigenen Webseite, liefern folgende Fragen gute Anhaltspunkte:

  • Wer bin ich und was biete ich? Was macht mich besonders?
  • Mit welchen Adjektiven beschreibe ich meine Persönlichkeit?
  • Welchen Eindruck möchte ich bei anderen Menschen machen?

Letztlich sind diese Fragen eine Form der Markenpersönlichkeit. Der Begriff Markenpersönlichkeit bezieht sich auf eine Reihe von menschlichen Eigenschaften, die einem Markennamen zugeschrieben werden. Eine wirksame Marke erhöht ihren Markenwert, indem sie über eine Reihe konsistenter Eigenschaften verfügt, die ein bestimmtes Verbrauchersegment genießt.

Erforsche deine Zielgruppe

Doch nicht nur eigene Eigenschaften sind wichtig. Wie wir gelernt haben, verbinden wir Farben mit Emotionen. Die Emotionen variieren, basierend auf vielen Faktoren wie kultureller Erfahrung und Alter.

Bevor du mit der Auswahl deiner Farbpalette beginnst, solltest du herausfinden, wer deine Zielgruppe ist:

  • Wie lebt deine Zielgruppe? Welche Eigenschaften haben sie?
  • Worauf legt sie wert? Was ist ihr wichtig? Wie fühlen sie sich?
  • Was sind ihre Erwartungen? Nach welchen Ergebnissen suchen sie?
  • Was sind ihre Erfahrungen im Allgemeinen und mit dem Thema deiner Botschaft?
  • Welche verwandten Marken sind bei deiner Zielgruppe beliebt?
  • Haben sie häufig Erfahrungen mit bestimmten Farben?
  • Sind die Erfahrungen und Assoziationen hilfreich oder schädlich?
  • Welche Themen bewegen sie am meisten?

Finde heraus, welche Emotionen deine Kunden am meisten bewegen. Erst dann kannst du Farben und Inhalte auswählen, die deine Besucher beeinflussen.

Quelle: rawpixel.com

Quelle: rawpixel.com

Nutze analytische Daten

Im besten Fall kennst du die Eigenschaften deiner Zielgruppe bereits. Wenn dir die Eigenschaften unklar sind, sind analytische Daten hilfreich. Suche nach relevanten Umfragen und Studien. Nutze Tools zur Web-Analyse, um etwa folgende Metriken zu erfassen:

  • Identifiziere ihren geografischen Standort, damit du die verschiedenen Kulturen bestimmen kannst. Auch die Sprache ist eine vielversprechende Möglichkeit, um die kulturellen Unterschiede in bestimmten Ländern zu erkennen.
  • Schau dir die Wörter und Begriffe an, die die Leute benutzen, um zu deiner Website zu gelangen oder nach denen sie auf deiner Website suchen.
Quelle: @goumbik

Quelle: @goumbik

Analysiere vorhandene Marken

Menschen machen jeden Tag Erfahrungen mit anderen Marken. Häufig ist es hilfreich anzusehen, wie Marken in deiner Branche sich positionieren. Letztlich geht es um die Relevanz einer Farbe und Marke, die eventuell wichtiger ist, als die Farbauswahl selbst.

Das Gehirn filtert unbewusst heraus, was mit vergangenen Erfahrungen übereinstimmt. Viele Menschen assoziieren Gesundheit mit der Farbe Grün. Wenn dein Gesundheitsprodukt ebenfalls einen grünen Farbton nutzt, fühlt sich die Wahl intuitiv für deine Kunden richtig an. Leuchtendes Rot löst hier entweder ein ungutes Gefühl beim Kunden aus, oder Aufmerksamkeit aufgrund des starken Kontrasts zu anderen Marken(Von Restorff Effect).

Alles, was zunächst von unseren Erwartungen abweicht, ist mehr oder weniger irritierend. Doch das bedeutet nicht, dass die Form der Angemessenheit ein Fundament für Erfolg ist. Viel wichtiger ist, sich eine durchdachte Marke zu erschaffen.

Sammel Feedback

Es ist verlockend, Marken zu erschaffen und theoretische Farbwahlen zu treffen. Dabei solltest du schnell praktisch werden. Sammel Feedback von deiner Zielgruppe. Stell sicher, dass die Beziehung zwischen deiner Marke und deinen Kunden gegeben ist. Erst dann vermittelst du eine Botschaft, die deine gewünschten Emotionen transportiert.

Erschaffe deine Marke

Dabei stellen wir uns folgende Fragen:

  • Zeit: Ist meine Marke modern oder klassisch?
  • Alter: Ist meine Marke jugendlich oder reif?
  • Energie: Ist meine Marke laut oder zurückhaltend?
  • Geschlecht: Ist meine Marke traditionell männlich oder weiblich?
  • Tonfall: Ist meine Marke verspielt oder ernst?
  • Wert: Ist meine Marke luxuriös oder erschwinglich?
  • Mainstream: Ist meine Marke massentauglich oder für bestimmte Individuen?
  • Material: Ist meine Marke industriell oder natürlich?
  • Design: Ist meine Marke elegant oder gewöhnlich?

Farben verraten die wichtigsten Werte deiner Marke. Wenn deine Zielgruppe deine Botschaft sieht, weiß sie im Idealfall, wer du bist, was du verkaufst und wofür du stehst. Studien haben gezeigt, dass unser Gehirn sofort erkennbare Marken bevorzugt, was Farben zu einem wichtigen Element bei der Schaffung einer Markenidentität macht.

Was bedeutet die jeweilige Farbe?

Wie bereits erwähnt, ist die Zuordnung kontext- und kulturabhängig. Während Schwarz im Autohandel oft als Farbe des Luxus und der Macht gilt, wird es in östlichen Regionen der Welt eher als Symbol des Todes interpretiert. Ich beziehe mich nachfolgend auf den deutschsprachigen Raum.

Wer sich für die internationalen Unterschiede interessiert, der findet zum Beispiel auf six-degrees eine anschauliche Grafik:

Quelle: six-degrees.com/pdf/International-Color-Symbolism-Chart.pdf

Quelle: six degrees.com/pdf/International Color Symbolism Chart.pdf

Auch Informationisbeautiful hat hierzu eine gute Grafik:

Quelle: informationisbeautiful.net/visualizations/colours-in-cultures/

Quelle: informationisbeautiful.net/visualizations/colours in cultures/

Warme Farben

Farbtemperaturen über 5000 K werden als kalte Farben (bläulich violett) bezeichnet, während niedrigere Farbtemperaturen unter 5000 K als warme Farben (gelblich rot) beschrieben werden. Warme Farben stehen in starkem Kontrast zu kalten Farben und werden mit Energie und Aktion assoziiert. Zu den warmen Farben gehören Rot, Orange und Gelb sowie Variationen der drei Farben. Sie lösen häufig Emotionen wie Anregung, Leidenschaft, Freude und Energie aus.

blog farbpsychologie grid warm

Kalte Farben

Kalte Farben werden meist mit Ruhe, Entspannung, Natur und Frieden assoziiert. Zu den kühlen Farben gehören Grün, Blau und Violett, die oft gedämpfter sind als warme Farben. Blau ist die einzige Primärfarbe im kühlen Spektrum. Die anderen Farben entstehen durch die Kombination von Blau mit einer warmen Farbe (Gelb für Grün und Rot für Violett).

blog farbpsychologie grid cold

Neutrale Farben

Neutrale Farben sind wie die Nebenrollen. Auch wenn sie im Hintergrund stehen oder die meiste Aufmerksamkeit erzeugen, sind sie elementar für das richtige Setting. Sie können warm, kühl, hell oder dunkel sein, oder auch einfach ein pures Weiß oder Schwarz.

Das Nutzen von neutralen Farben geht mit der Rolle von negativem Platz überein. Das ist der Raum, den du bewusst in dein Design einfügst, um es zu betonen und zu strukturieren. Der Raum wird absichtlich ausgelassen und leer gehalten, um den Inhalt stärker in den Mittelpunkt zu rücken und ein Element vom anderen abzugrenzen.

Rot

Rot ist eine sehr kontextabhängig Farbe, die von Leidenschaft, Liebe und Energie, über Wut, Aggression und Aufregung bis hin zu Krieg, Macht und Gefahr reicht. Die Bandbreite hat Rot der visuellen Intensität zu verlangen, die stark aufmerksamkeitserregend ist.

Rot hat die längste Wellenlänge aller Farben. Ihre Auswirkungen auf die Psyche sind nicht gerade subtil und so hat sie sich in vielen Bereichen als Farbe der Warnung und Aufregung etabliert. Das zeigt sich sowohl in der Nutzung von Rot als negative Farbe bei Bewertungen und Finanzen als auch bei Stoppschildern im Straßenverkehr oder Preisschildern mit Rabatt. Rot ist die Farbe der Wahl, wenn du starke Präsenz zeigen und schnell Aufmerksamkeit erregen willst.

Marken: Sparkasse, Miele, Bosch, e-on, Bild, Henkel

Gelb

Gelb ist die Farbe mit der höchsten Leuchtkraft. Gelb kann in kleinen Mengen zum Einsatz kommen, um Aufmerksamkeit zu erregen, zum Beispiel auf Verkehrsschildern oder in der Werbung. Gelb zieht schnell die Aufmerksamkeit auf sich, wirkt aber auch abweisend, wenn es überstrapaziert wird.

Gelb ist die Farbe, die das Auge am meisten ermüdet, da sie eine große Menge Licht reflektiert. Die Verwendung von Gelb als Hintergrund auf Papier oder Computermonitoren ist daher zu vermeiden.

Marken: DHL, ADAC, Lufthanse, Lidl, Commerzbank

Blau

Es gibt Hinweise darauf, dass der Mensch vor 5.000 Jahren begann, blaue Farbstoffe zu entwickeln. Der Halbedelstein Lapis Lazuli, ein tiefblaues metamorphes Gestein, wurde von den Ägyptern geschätzt.

Farbpsychologische Studien haben ergeben, dass Blau die häufigste Lieblingsfarbe der Weltbevölkerung ist und besonders Männer sie bevorzugen. Besonders digitale Unternehmen greifen auf Blau als primäre Farbe zurück.

Die genaue Bedeutung hängt bei Blau stärker als bei anderen Farben von der Schattierung ab. Helle Blautöne wirken in der westlichen Welt entspannter, freundlicher und kindlicher, während dunkelblaue Töne häufig mit Werten wie Sicherheit und Stärke verbunden werden.

Blau gehört zu den am wenigsten appetitlichen Farben, da sie ein Indikator für Verderb und Gift ist. Blau kommt in der Natur nur selten in Lebensmitteln vor, abgesehen von Heidelbeeren und einigen Pflaumen.

Marken: SAP, Siemens, Nivea, Allianz, RWE, Fresenius

Orange

Die Stärke von Rot und Energie von Gelb vereinen sich in Orange, würde ein Poet sagen. Orange wird häufig mit Energie, Abenteuer, Aktivität und Kreativität in Verbindung gebracht.

Aufgrund der Assoziation mit den wechselnden Jahreszeiten steht Orange für Veränderung und Bewegung im Allgemeinen. In Designs zieht Orange die Aufmerksamkeit auf sich, ohne so aufdringlich zu sein wie Rot. Es ist ein energiegeladener Farbton, der im Branding vieler Sportmannschaften zu finden ist.

Marken: Fanta, Obi, ZDF, Saturn, Globus, Stihl

Grün

Grün ist eine der am häufigsten vorkommenden Farben in der Natur. Sie wird in der westlichen Welt in den meisten Kontexten mit Wachstum, Frische, Geld und Gesundheit in Verbindung gebracht. Seit Jahren nimmt der Anteil von Grün bei Produktverpackungen zu, um ein natürliches Gefühl zu vermitteln.

Tatsächlich sieht das menschliche Auge Grün besser als jede andere Farbe des Spektrums. Die große Variation an Schattierungen erlaubt viele verschiedene Assoziationen. Helle Grüntöne sind energiegeladener und lebendiger, während Olivgrün eher die Natur repräsentiert.

Marken: DFB, Bundespolizei, Die Grünen, Knorr, Der Grüne Punkt, DEKRA, AlNatura

Lila

Als traditionell königliche Farbe wird Lila seit Jahrhunderten mit Königswürde und Majestät assoziiert. Lila vermittelt uns ein Gefühl von Luxus, Magie und Spiritualität. Der Ursprung der Assoziation liegt vermutlich in der Antike. Die Farbstoffe, die zur Herstellung von Purpurtönen verwendet wurden, wurden aus Schnecken gewonnen und waren kostenintensiv, sodass nur vermögende Menschen sie sich leisten konnten. Zudem gehört Lila zu den seltensten Farben in der Natur.

Lila liegt sowohl auf der warmen als auch auf der kühlen Seite des Farbkreises, je nachdem, wie hoch der Rot- oder Blauanteil ist. Helle Lila-Töne sind weicher und werden mit Frühling und Romantik assoziiert. Violett liegt in der kürzesten Wellenlänge und ist die letzte Farbe, die sichtbar ist.

Im Deutschen existieren wenige bekannte Marken mit lila Logo, bis auf Milka. Im amerikanischen Raum ist die Farbe weiter verbreitet, etwa für Yahoo, Twitch, Cadbury und FedEx.

Grau

Grau ist eine neutrale Farbe, die im Allgemeinen am kühlen Ende des Farbspektrums angesiedelt ist. Grau ist im Allgemeinen konservativ und formell. Reine Grautöne sind Schattierungen von Schwarz, andere Grautöne können jedoch auch farbliche Nuancen enthalten. Im Design sind graue Hintergründe verbreitet, ebenso wie graue Typografie. Da grau keine starke Suggestivkraft hat, sieht man sie selten in Logos. Hier ist sie meist nur in einem versilberten Look vorzufinden.

Marken: Mercedes Benz, MAN, Audi

Weiß

Während Schwarz die Absorption allen Lichts und die Verkörperung aller Farben ist, ist Weiß die Reflexion und Abwesenheit. Weiß wird in der westlichen Welt mit Sauberkeit und Unschuld assoziiert. Zudem hat Weiß einen hohen Stellenwert im Gesundheitsbereich für Sterilität und Sauberkeit. In der christlichen Religion steht sie für Hoffnung.

Sie hat einen hohen Kontrast zu ziemlich allen anderen Farben und lässt andere Farben durchscheinen, sodass sie eine gute Wahl für Hintergrundfarben ist. Weiß gilt als neutraler Hintergrund, der den anderen Farben in einem Entwurf mehr Raum lässt. Es trägt dazu bei, Sauberkeit und Einfachheit zu vermitteln, und ist in minimalistischen Designs beliebt.

Marken: Krombacher, Rewe, Nivea, SAP, Miele, BMW

Schwarz

Schwarz selbst ist keine richtige Farbe, sondern eher die Abwesenheit von Licht. Sie hat einen sehr hohen Kontrast. Mit Schwarz sind viele gemischte Assoziationen und Gefühle verbunden, genau wie mit Weiß. Es kann unter anderem Macht, Eleganz, Ernsthaftigkeit und Klasse vermitteln. Negative Assoziationen sind Angst, Tod, Traurigkeit und ein Gefühl der Leere.

Marken nutzen Schwarz häufig als Kontrast zu Weiß, um starke Kontraste zu erzeugen. Im Web unterstützt Schwarz wegen seiner Neutralität häufig die Typografie und andere funktionale Teile.

Marken: Adidas, BMW, Schwarzkopf, Boss, Braun, Puma

Weitere Farben

Selbstverständlich können wir noch weitere Farben auf ihre Bedeutung in eher westlichen Kulturkreisen analysieren:

  • Türkis ist eine Farbe zwischen Blau und Grün und kann als kühl und beruhigend bezeichnet werden. Türkis ist eine transformative Farbe, die ihre spektrale Position zwischen der kontemplativen Sicherheit von Blau und der organischen Leichtigkeit von Grün verkörpert. Sie suggeriert Klarheit im Denken und in der Kommunikation. Auf dem Markt findet man Türkis häufig bei Marken, die sich auf Kommunikation konzentrieren.
  • Rosa vermittelt ein Gefühl von Freundlichkeit. Rosa ist eine sanftere, weniger intensive Version von Rot, die ein Gefühl des Mitgefühls und der Liebe vermittelt. Obwohl es eine körperliche Farbe ist, wirkt sie eher beruhigend als anregend, was sie zu einer perfekten Farbe für Fürsorge macht.
  • Koralle wird allgemein als positive Farbe angesehen. Sie ist intensiv, warm und dynamisch und verbindet die Weiblichkeit von Rosa mit der Energie von Orange.
  • Beige wird in der Regel für Hintergründe genutzt. Es nimmt die Eigenschaften der Farben in seiner Umgebung an, was bedeutet, dass es für sich genommen wenig Einfluss auf den endgültigen Eindruck eines Designs hat.
  • Elfenbein ist eine ruhige Farbe, die etwas von der Reinheit von Weiß hat, obwohl sie etwas wärmer ist. In der Gestaltung verleiht Elfenbein einem Ort ein Gefühl von Eleganz und Ruhe. Es kann auch dunklere Farben aufhellen, ohne dass der Kontrast so stark ist wie bei Weiß.
  • Indigo ist eine tiefe Farbe, die dem primären Blauton sowie einigen Varianten von Ultramarin nahe kommt und auf dem gleichnamigen antiken Farbstoff basiert. Es wird traditionell als eine Farbe im sichtbaren Spektrum sowie als eine der sieben Farben des Regenbogens betrachtet: die Farbe zwischen Blau und Violett.
  • Flieder ist eine weich aussehende Farbe, die einen Hauch von Unschuld ausstrahlt. Es ist ein helles Lila, das ein Gefühl von Ruhe, Frieden und Freundschaft vermittelt. Marken können die Farbe wählen, um die Persönlichkeit ihrer Marke als aufgeschlossen und freundlich auszudrücken.
  • Burgunderrot ist etwas heller als Kastanienbraun und wird als Farbe für Macht, Reichtum und die Oberschicht angesehen. Es ist eine der raffinierteren Farben auf dem Farbkreis. Viele Weinunternehmen verwenden Burgunderrot als Farbe für ihr Branding, da Burgunderrot zur Familie der Weinfarben gehört.
  • Braun ist die Farbe der Erde und in der Natur reichlich vorhanden. Sie hat die Verlässlichkeit und Authentizität von Holz oder Leder und wird von Männern häufiger bevorzugt als von Frauen. Sie hat ruhige, unterstützende Obertöne. Im Design wird Braun häufig als Hintergrundfarbe verwendet. Man findet sie auch in Holz- und manchmal in Steinstrukturen.
  • Gold steht meist für Luxus. Es kann auch ein Element der Freundlichkeit, des Überflusses und des Wohlstands haben. Zu viel Gold kann egoistisch, stolz und selbstgerecht wirken. Ähnlich wie bei Farben wie Braun und Schwarz sollte Gold sparsam eingesetzt werden, um Betonungen zu erzeugen.
  • Blaugrün gilt als eine dunklere Version von Cyan. Blaugrün kombiniert Grün und Blau, aber seine geringere Sättigung macht es für die Augen angenehmer. Bis heute haben viele Blockbuster eine auffallend orange und blaugrüne oder bernstein und blaugrüne Farbpalette.
  • Neongrün wird neben der Werbung auch auf Schildern und Arbeitskleidung zur Anwendung gebracht. Als gut sichtbare Farben sollten sie die Aufmerksamkeit der Passanten auf ein Warnschild lenken oder die Sichtbarkeit von Arbeitern erhöhen, die an gefährlichen Orten tätig waren.
  • Minze ist ein lebendiger, heller Grünton. Sein Name leitet sich von der grünen Pflanze Minze ab. Die Farbe macht sich die Assoziation zunutze und wird dementsprechend mit Frische und Kühle in Verbindung gebracht.
  • Kastanienbraun ist eine dunkle, bräunlich-rote Farbe, düsterer als Burgunderrot und weniger kräftig wie die Farbe Rot. Kastanienbraune Farben sind häufig im Herbst und zur Erntezeit zu sehen, in der Regel auf Dekorationen und auf Bäumen, wenn sich die Blätter verfärben.
300 Artikel Expertise in Person
Als zertifizierter UX Designer für Millionen Nutzer sichere ich das Wachstum deiner Software durch fundierte und skalierbare Designs.
layout justinschmitz opacity

Richtige Farbkombination wählen

Typische Farbschemata

Farbkombinationen werden häufig auch als Farbschemata bezeichnet. Designer greifen auf Farbschemata zurück, um Stil und Attraktivität zu erzeugen. Farben, die bei gemeinsamer Verwendung ein ästhetisches Gefühl vermitteln, werden in Farbschemata miteinander kombiniert. Du kannst völlig frei deine eigenen Schemata erstellen. Oft lohnt es sich jedoch, auf etablierte Farbschemata zurückzugreifen.

Komplementäres Farbschema

Das komplementäre Farbschema setzt sich aus zwei Farben zusammen, die im Farbkreis gegensätzlich voneinander angeordnet sind. Eine Seite des Farbkreises besteht aus warmen Farben, während die gegenüberliegende Seite die kühle Kontrastfarbe darstellt, z. B. Rot und Grün oder Blau und Orange.

Komplementäres Farbschema

Komplementäres Farbschema

Komplementäre Farbschemata zielen darauf ab, maximale Kontraste zu erzeugen. Sie bringen Bilder und Elemente gut zur Geltung, wirken jedoch bei übermäßiger Verwendung ermüdend und unruhig.

Designer wählen in der Regel weniger gesättigte Farben in diesem Farbschema sowie eine dominante Farbe, die durch die Kontrastfarbe als Akzent ergänzt wird.

Alligatoah nutzt in seinem Musikvideo Nachbebenden Effekt eindrucksvoll. Es werden kühle blaulich gesättigte Farben durch hellen orangen Kontrast gebrochen:

Alligatoah Musikvideo

Alligatoah Musikvideo

Triadisches Farbschema

Das triadische Farbschema ist eine Kombination aus drei Farben, die im gleichen Abstand auf dem Farbkreis angeordnet sind. Ein triadisches Farbschema besteht entweder aus zwei warmen und einer kühlen Farbe oder aus zwei kühlen und einer warmen Farbe.

Triadisches Farbschema

Triadisches Farbschema

Das triadische Farbschema ist in der Regel sehr lebhaft, da hohe Kontraste erzeugt werden und jede Farbe im Gesamtbild hervorsticht. Auch wenn das Farbschema weniger kontrastreich wie das komplementäre Schema ist, müssen Farben richtig ausbalanciert oder getont werden, um den Betrachter nicht zu überwältigen.

Die meisten Designer wählen eine Grundfarbe und setzen die weiteren zwei Farben als Akzente. Ein Dreiklang aus Primärfarben sorgt für ein lebendiges und lebhaftes Farbschema, ein Dreiklang aus Sekundärfarben wirkt dagegen meist neutraler.

Einen neutraleren Look sieht man im Musikvideo 909von Eden, um die Landschaft angenehm darzustellen:

Eden Musikvideo

Eden Musikvideo

Teilkomplementäres Farbschema

Das teilkomplementäre Farbschema ist eine Kombination aus drei Farben. Nach der Wahl einer Grundfarbe werden zwei im Farbrad gegenüberliegende Farben gewählt. Sie sind 150 und 210 Grad von der Grundfarbe entfernt.

Teilkomplementäres Farbschema

Teilkomplementäres Farbschema

Das Farbschema bietet eine nuanciertere Farbpalette als bei komplementären Farbschemata. Gleichzeitig hat sie den Vorteil, dass der Kontrast erhalten bleibt. Solche Farbschemata wirken im Allgemeinen ansprechend, sofern der Künstler die richtige Dominanz zwischen den Farben berücksichtigt.

Teilkomplementäre Farbschema sind leicht auszubalancieren und sorgen mit helleren Varianten für beide Akzentfarben für den nötigen Bedarf an Tiefe.

Im Musikvideo Earthsoll zwischen Mensch und Weltall ein Kontrast geschafft werden, der dennoch harmonisch und angenehm wirkt:

Earth Musikvideo

Earth Musikvideo

Analoges Farbschema

Ein analoges Farbschema wird häufig auch als Dominanzharmonie bezeichnet. Sie besteht aus drei oder mehr Farben, die im Farbkreis nebeneinander liegen. Dadurch entstehen stark harmonische Farbkombinationen, die deutlich weniger Kontrast als z. B. komplementäre Schemata aufweisen.

Analoges Farbschema

Analoges Farbschema

Das analoge Farbschema solltest du verwenden, wenn Kontraste sekundär sind, etwa bei der Gestaltung von Räumen. Dabei ist es hilfreich, eine Farbe als Dominanzfarbe zu nutzen, während die anderen Farben unterstützen oder Akzente setzen.

Achte auf ausreichenden visuellen Unterschied, damit Farben nicht miteinander konkurrieren. Drei Farben der gleichen Temperatur wirken harmonisch zusammen und erlauben das Erstellen schöner Farbverläufe. Eine Mischung aus zwei warmen und einer kühlen Farbe hilft dir, in harmonischen Designs Kontraste zu fördern.

Wir finden das analoge Farbschema überall in der Natur, insbesondere an den Farbverläufen am Himmel. In Musikvideos findet es oft Gebrauch, um Landschaften harmonisch aussehen zu lassen, wie auch im bereits erwähnten Musikvideo Earth:

Earth Musikvideo

Earth Musikvideo

Tetradisches Farbschema

Wir bilden das tetradische Farbschema aus zwei komplementären Farbschemata. Vier Farben bilden ein Quadrat im Farbkreis. Die Wahl ist für erfahrene Designer gedacht, da vier Farben schwierig zu harmonisieren sind. Ein tetradisches Farbschema wirkt schnell lebendig, bunt und extrem.

Tetradisches Farbschema

Tetradisches Farbschema

Wenn du kaum Erfahrungen mit diesem Farbschema gesammelt hast, solltest du eine Farbe dominant nutzen und die anderen drei Farben als Akzente einsetzen. Eventuell erstellst du auch zunächst ein Design in Grautönen und ersetzt das dann schrittweise mit Farben.

Charlie Puth’s neustes Musikvideo Light Switchnutzt das tetradische Farbschema, um einen sehr bunten und lebendigen Kontrast gegenüber den zwei Lebensphasen des Protagonisten zu erzeugen:

Charlie Puth Musikvideo

Charlie Puth Musikvideo

Monochromes Farbschema

Das monochrome Farbschema nutzt lediglich einen Farbton. Alle weiteren Farben werden von dem Grundfarbton abgeleitet und durch Schattierungen, Tönungen und Tonungen erweitert. Das Ergebnis ist eine ruhige, subtile und harmonische Farbpalette, die geringe Kontraste vorweist. Mit der richtigen Priorisierung ergeben sich interessante Kompositionen aus hellen und dunklen Bereichen.

Monochromes Farbschema

Monochromes Farbschema

Abseits davon ist es für Anfänger gut geeignet, da sich nur schwer unbalancierte Eindrücke schaffen lassen. Für zweidimensionale Grafiken ist das Schema gut geeignet, da Kontraste weniger benötigt werden. Achte jedoch auch darauf, dass das Design nicht zu monoton aussieht.

Nutzt du das monochrome Farbschema, ist die richtige Wahl der Basisfarbe umso wichtiger. Es ist erforderlich, mit verschiedenen Schattierungen Kontraste zu erzeugen oder reines Schwarz oder Weiß zu nutzen, um Hierarchien zu erzeugen.

Der Künstler The Weeknd hat in seinem Musikvideo von Sacrificefür den Großteil der Zeit ein monochromes Farbschema mit dunklen Blautönen. Sie werden lediglich durch seine Brille und die später sehr bunten Zwischenspieler kontrastreich komplementär gebrochen:

Musikvideo Weeknd

Musikvideo Weeknd

Achromatisches Farbschema

Das achromatische Farbschema ist eine spezielle Form des monochromen Farbschemas, bei dem die Basisfarbe eine Farbe ohne Sättigung ist. Wir starten also mit einem Grauton und bewegen und nur in neutralen Farben zwischen Schwarz und Weiß.

Das achromatische Farbschema wirkt durch das Fehlen von Farbe effizient und rein, sieht unter Umständen aber auch schnell langweilig und unfertig aus. Designer nutzen es häufig als guten Startpunkt, um die Harmonie im Design zu testen.

Ein Fokus auf Grautöne hilft dir, den Fokus auf andere Sinne zu lenken. Solltest du dich zunächst für ein achromatisches Farbschema entscheiden, dann prüfe, ob eine eventuelle leichte Sättigung dein Design bestärkt. Etwa verwandelst du Grautöne in ein sehr getöntes Blau.

Viele Künstler nutzen Graustufen, um andere visuelle Elemente in den Fokus zu rücken oder Emotionen wie Trauer, Uniformität oder Ungewissheit auszudrücken. Ein schönes Beispiel ist Oh My God von Adele:

Musikvideo Adele

Musikvideo Adele

Schattierungen und Tönungen

Haben wir uns einmal für Farben entschieden, benötigen wir häufig Abwandlungen dieser Farben. Ein Farbsystem besteht nur selten aus ein bis vier Farben. Für ein vollständiges System benötigen wir hellere und dunklere Variationen. Das Erstellen von Varianten ist schnell und einfach, wenn man das dahinterliegende Konzept einmal verinnerlicht hat.

Wichtig für das Erstellen von Varianten ist eine Anpassung der Helligkeit und Sättigung. Dunklere Farbvariationen werden durch Verringerung der Helligkeit und Erhöhung der Sättigung erreicht. Hellere Farbvariationen werden durch Erhöhen der Helligkeit und Verringern der Sättigung erreicht. Die Regeln stammen aus der echten Welt:

Beispiele für Schattierungen

Beispiele für Schattierungen

Die richtige Bewegung des Farbtons verstärkt den Effekt. Eine Verschiebung des Farbtons in Richtung Rot (0°), Grün (120°) oder Blau (240°) verringert die Leuchtkraft bzw. die wahrgenommene Helligkeit der Farbe. Eine Verschiebung des Farbtons in Richtung Gelb (60°), Cyan (180°) oder Magenta (300°) erhöht die empfundene Helligkeit der Farbe.

Wenn wir eine dunklere Variante erstellen, bewegen wir unseren Farbton leicht an die jeweils nächstgelegene Farbe Rot, Grün oder Blau. Für hellere Varianten bewegen wir den Farbton in Richtung Gelb, Cyan oder Magenta.

Nutze natürliche Farben

Häufig werden in digitalen Designs Schwarz für Schatten und Weiß für Licht verwendet. Doch Schatten sind nie schwarz und Lichter sind nie weiß. Schatten sind auch meistens nicht grau, sie sind das Kompliment der Farbe des Lichts. Wenn das Licht, das du auf deine Hand wirfst, einen Gelbstich hat, erscheint der Schatten lila. Das ist ein nützliches Wissen, wenn du Designs mit Schatten erstellst.

Schaue die Schatten in deiner Umgebung an: Dunkelheit ist niemals schwarz. Dunkelheit ist der Farbton des Objekts, das mit Werttönen schattiert wird. Der Schatten der Zitrone ist ein sehr dunkles Grün und der Schatten des Holzbretts ist ein sehr dunkles Braun. Auch wenn die Töne meist düster sind, sind sie nie Schwarz. Schwarz sind sie nur dann, wenn es kein Licht mehr gibt.

Exkurs: Farbschemata in Filmen und Serien

Bei vielen künstlerischen Inszenierungen wählen Künstler für jedes Bühnenbild eine dominante Farbe. Es ist die Farbe, die für das Publikum am auffälligsten ist. Die zweite Farbe wird als Kontrast gewählt. Einzelne Farben können schnell eintönig werden. Obwohl Schwarz-Weiß-Filme eine Menge zu bieten haben, hat die Welt sie schnell vergessen, als die Farbe aufkam. Schwarz-Weiß hat jedoch einen gewissen Charme.

So lenkt es deine Aufmerksamkeit auf die Dinge im Bild, ohne dass die Farben vom eigentlichen Thema ableiten. In den Anfängen des Farbfilms war es extrem schwierig, die besondere Schwarz-Weiß-Qualität zu erreichen. Heutzutage ist es möglich, die Intention mit zwei Farben zu erzielen. Eine Kombination aus zwei Farben erzeugt ein reiches, einheitliches Erscheinungsbild, das die Welt, in der die Figur lebt, definiert.

Es gibt viele Filme, in denen die Haut orange bzw. bernsteinfarben ist, während alles andere türkisfarben ist. Es ist damit möglich, eine Art Schwarz-Weiß-Effekt zu erzielen, indem man nur die Farben hervorhebt und alles andere unterdrückt.

Wann immer es möglich ist, bemühen sich Produktionsdesigner, Farben zu finden, die im Kontrast zueinander stehen oder sich ergänzen. Die zweite Farbe verleiht der Primärfarbe mehr Tiefe und unterstreicht sie, da sie für die Stimmung der Geschichte verantwortlich ist.

Wer sich mehr mit dem Thema auseinandersetzen möchte, kann sich das Video von ScreenCrush ansehen, die die Farbnutzung in Breaking Bad ausführlich beschrieben:

Quelle: www.behance.net/gallery/18811915/Colorizing-Walter-Whites-Decay

Quelle: www.behance.net/gallery/18811915/Colorizing Walter Whites Decay

Breaking Bad wird für seine scharf umrissenen Charaktere, seine Symbolik und seinen exquisiten Schreibstil gefeiert. Aber es ist auch eine Geschichte, die mit Farbe erzählt wird. Nichts, was du in Breaking Bad siehst, ist ein Zufall. Jedes Kleidungsstück, die Farben der Hintergründe, die Requisiten - sie alle wirken zusammen, um eine einzige, zusammenhängende Geschichte zu erzählen. Jede Farbe in der Serie hat eine symbolische Bedeutung, jede Figur wird mit einer Farbe in Verbindung gebracht und ihre Beziehungen in der Serie werden sogar durch ihre Position auf dem Farbrad definiert.

Ein Beispiel westlich orientierter Farbkombinationen

Werbung soll eine Botschaft vermitteln. Der gezielte Einsatz von Farbe unterstützt die Botschaft. Dabei ist es wichtig zu beachten, dass wir die Farbe entsprechend des gewählten Stils der Botschaft wählen.

Soll das Produkt ein Problem vorbeugen? Dann eignen sich Warnfarben wie Rot, die eine Vermeidungshaltung ausdrücken. Soll das Produkt einen Vorteil bieten? Dann eignen sich Farben wie Blau, die eher eine Form der Annäherung ausdrücken.

Die westliche Kultur assoziiert die Farbe Blau normalerweise mit Frieden und Ruhe assoziiert. Es ist wahrscheinlich, dass Blau eine Annäherungsmotivation aktiviert, da die Assoziationen eine freundliche Umgebung signalisieren.

Voltaren nutzt das Konzept der Farben (bewusst oder unbewusst) intelligent. Auf der Verpackung wird Schmerz als roter Kreis symbolisiert. Das vor Freude hüpfende Männchen ist in blau designt.

Voltaren Produktverpackung

Voltaren Produktverpackung

300 Artikel Expertise in Person
Als zertifizierter UX Designer für Millionen Nutzer sichere ich das Wachstum deiner Software durch fundierte und skalierbare Designs.
layout justinschmitz opacity

Tipps für die Farbgestaltung

Neben den oben genannten Faktoren existieren noch weitere Aspekte, die man bei dem Erstellen eines Farbschemas berücksichtigen kann. Ist dein Farbsystem für User Interfaces gedacht, sollte Barrierefreiheit jederzeit eine große Rolle spielen. Ist dein Farbsystem für Plakate oder Illustrationen von Bedeutung, solltest du umliegende Inhalte beachten und dein Werk auch in Graustufen beobachten.

Werde kreativ bei Typografie

Reines Schwarz gibt es nur Digital. An fast allen schwarzen Objekten in unserer Umgebung prallt etwas Licht ab, was darauf hindeutet, dass sie eigentlich Schattierungen sind. Die Farbe Schwarz ist eine neutrale Farbe, die sich mit allen Farben ergänzt. Aber manchmal gibt uns das Hinzufügen anderer Farbtöne einen anderen Eindruck von Farbe. Wenn wir Texte mit einem bestimmten Farbton verwenden, haben wir mehr Möglichkeiten, eine bessere Harmonie mit der Umgebung zu erzielen.

Berücksichtige dynamische Lichtverhältnisse

Lichtverhältnisse sind nie gleich, ob bei Plakaten, Webseiten oder Schaufenstern. Die Beleuchtung variiert je nach Raumambiente, Tageszeit und anderen Faktoren erheblich. Prüfe daher deine Wahl immer unter verschiedenen Lichtverhältnissen, um zu sehen, wie die Farben wirken. Passe die Farben so an, dass sie in den meisten Anwendungsfällen bestmöglich dargestellt werden.

Dynamische Lichtverhältnisse

Dynamische Lichtverhältnisse

Berücksichtige auch, wie sich nahe gelegene Grafiken und die Lichtdurchlässigkeit auf die Farben auswirken. Farben verlieren ihre Wirkung, wenn sie über einem nicht neutralen oder lichtdurchlässigen Hintergrund liegen oder neben einem hellen, farbigen Bild positioniert werden.

Beachte umliegende Inhalte

Auch Farben benötigen Verarbeitungsressourcen. Wenn deine Anzeige viel Inhalt in Form von Text oder Bildern und viel Farbe enthält, ist das Design zu überwältigend für deine Zielgruppe. Forschungsergebnisse legen nahe, dass die Menschen einen schlechteren Eindruck von deinem Produkt bekommen.

Faustregel: Wenn dein Design sehr komplex ist, viele Bilder beinhaltet oder nutzergenerierten Content unterstützt, solltest du Farbwerte reduzieren. Wenn dein Entwurf simpel ist und wenig Illustrationen beinhaltet, kannst du mit stärkeren Kontrasten und mehr Farben spielen.

Teste Harmonie mit Graustufen

Fast genauso wichtig wie die Farbe selbst ist die Helligkeit. Denn ohne ausreichenden Kontrast zwischen Hell und Dunkel ist das Bild undeutlich. Ein geringer Kontrast ist frustrierend und schreckt die Leute von deiner Arbeit ab.

Eine kontrastarme Darstellung macht es schwer, etwas zu lesen, zu sehen oder zu erleben. Sie führt auch dazu, dass deine Botschaft schwer zu verstehen ist.

Ungesättigte Farben und Graustufen eliminieren den Farbton aus der Gleichung, sodass nur noch Licht und Schatten übrig bleiben. Der Kontrast zwischen Licht und Schatten sorgt für ein Gefühl von Realismus und Tiefe. Wenn wir ausschließlich mit Graustufen arbeiten, sehen wir, dass es einen Unterschied zwischen den Tönen gibt. Dadurch entsteht ein Gefühl der Harmonie und des Kontrasts zwischen ihnen.

Wenn du deine Designs zuerst in Graustufen entwirfst, konzentrierst du dich eher auf die Hierarchie der Elemente und das Layout. Konzentriere dich darauf, wie die Elemente angeordnet sind und optimiere den Weißraum.

Illustration in Graustufen

Illustration in Graustufen

Lass dich von der Natur inspirieren

Du bist bereits von einer großen Menge an Inspiration umgeben. Du kannst dich aus allen möglichen Quellen inspirieren lassen, z. B. aus dem Print Design, der Inneneinrichtung und der Mode.

Die besten Farbkombinationen findet man oft in der Natur. Halte einfach ein Bild von einem inspirierenden Moment fest und verwende es, um dein Farbschema zu formulieren. Die Umwelt für die Gestaltung zu nutzen, hat den Vorteil, dass sich die Farbpalette ständig ändert.

Inspiration aus der Natur

Inspiration aus der Natur

Verwende die 60-30-10 Regel

Die Methode eignet sich optimal für Anfänger. Sie wurde früher häufig in der Innenarchitektur angewandt und soll für ein optisches Gleichgewicht sorgen. Die Formel funktioniert, weil sie es dem Auge ermöglicht, sich bequem von einem Brennpunkt zum nächsten zu bewegen. Außerdem ist sie unglaublich einfach zu handhaben: 60 % sind für den dominanter Farbton vorgesehen, 30 % für die Sekundärfarbe und 10 % für eine Akzentfarbe.

60-30-10 Regel

60 30 10 Regel

Denke über Farbverläufe nach

Ein Farbverlauf ist der allmähliche Übergang von einer Farbe zur anderen. Er ermöglicht es, Objekte hervorzuheben und mit Dimensionalität zu spielen. Häufig fügen Farbverläufe einen gewissen Grad an Realismus hinzu, wenn sie sich an Farbverläufen aus der Natur orientieren.

Farbverlauf aus der Natur

Farbverlauf aus der Natur

Farbverläufe sind ein tiefgreifendes Konzept und benötigen ein eigenes Kapitel. Eventuell werde ich in Zukunft ein Kapitel mit detaillierten Erklärungen und Beispielen hinzufügen.

Sorge für Barrierefreiheit

Viele Menschen haben eine Form der Farbenblindheit – dazu gehören auch Rot-Grün-Schwächen oder Achromatopsie. Ohne ausreichenden Kontrast ist es für eine Person mit Sehschwäche oder Farbenblindheit schwierig, Text vor einem Hintergrund zu erkennen.

Barrierefreiheit sollte der Eckpfeiler eines Farbsystems für User Interfaces sein. Einer der wichtigsten Punkte bei der Auswahl einer Farbe ist der Kontrast. Dabei können auch Farbe in deinem System auf jedem Hintergrund von den WCAG Standards abweichen.

Doch wenigstens Text sollte so gestaltet sein, dass er für deine Zielgruppe klar lesbar ist. Er sollte so gut wie möglich ein breites Spektrum von Behinderungen berücksichtigt wie eine Rot-Grün-Schwäche.

Neben der Überzeugungskraft und der Hervorhebung bestimmter Emotionen muss die Farbe auch dazu dienen, Klarheit zu schaffen und das Lesen Ihres Inhalts zu erleichtern. Achte darauf, dass die gewählten Farben mit der gesamten Seite harmonieren, andere Elemente und vor allem den Text unterstützen.

Als Designer bestimmst du den Grad des Kontrasts auf der Grundlage des Ziels der Schnittstelle. Professionelle Designer streben ein geringes Kontrastniveau an und verwenden kontrastreiche Farben nur für Elemente, die hervorstechen sollen – wie z. B. Call-to-Action-Schaltflächen.

300 Artikel Expertise in Person
Als zertifizierter UX Designer für Millionen Nutzer sichere ich das Wachstum deiner Software durch fundierte und skalierbare Designs.
layout justinschmitz opacity

Interface Farbsysteme

In diesem Kapitel setzen wir die bisherigen Erkenntnisse in die Praxis um. Da ich mich auf User Interface-Design spezialisiert habe, erkläre ich Farbwahl anhand von zwei Apps und einer Landingpage. Auch gehe ich auf einige Besonderheiten bei der Gestaltung von Interfaces ein. Wenn UI-Design dich weniger interessiert, kannst du hierzum Fazit springen.

Einleitung

Als Interface-Designer habe ich durch die tägliche Arbeit erkannt, wie problematisch Farben ohne System sind. Die Konsistenz des Produkts über verschiedene Medien hinweg sinkt und auch die Produktentwicklung verlangsamt. In diesem Abschnitt nutzen wir all das in den vorherigen Kapiteln gelernte Wissen, um drei Farbsysteme zu entwickeln.

Alle Farbsysteme werden systemisch und einfach skalierfähig sein. Das ermöglicht eine vertrauensvolle Nutzung der Systeme und verbessert die allgemeine Benutzerfreundlichkeit des Produkts. Dafür legen wir zunächst eine Tonskala an, wählen dann unsere Farbtöne und färben die Tonskala dann mit den ausgewählten Farbtönen.

Neobanking App

Das erste Farbsystem ist sehr kontrastreich. Wir treffen Farbwahlen für eine Neobank App. Die Zielgruppe liegt zwischen 18 und 30 Jahren, ist zu 60 % männlich, hat einen guten Bildungsstand und ein finanzielles Interesse, das Qualität vor Preissenkungen bevorzugt. Die Marke soll Transformation, Leistung und einen gewissen Grad an Freiheit vermitteln. Nutzer verwenden sie App bevorzugt im Dark-Mode.

Beauty App

Das zweite Farbsystem ist für ein Unternehmen, dass für eine weibliche Zielgruppe zwischen 16 und 45 verschiedene Beauty-Produkten über eine App anbietet. Um der App das nötige Leben zu geben, nutzen wir beispielhaft einige Produkte von L’Oreal Paris (die in keiner sonstigen Verbindung zu mir stehen).

Architektur Landing Page

Das dritte und letzte Farbsystem ist für ein Design- und Architekturbüro in Berlin, dass Großkunden im B2B Bereich durch elegantes Design ansprechen soll.

Tonskala

Ein barrierefreies und sinnvoll gestaltetes Farbsystem benötigt eine Tonskala. Sie ermöglicht es, verschiedene Farbtöne miteinander zu kombinieren und die Helligkeitsverteilung zu strukturieren. Die Skala sollte mindestens 6 Stufen haben, sodass sie bei der Gestaltung die nötige Flexibilität vorweist. Häufig lohnt es sich, den klassischen Ansatz von 9 Tönen zwischen Weiß und Schwarz zu wählen, da viele UI-Frameworks auf diesem Prinzip aufbauen.

Die Tonskala bestimmt, wie stark die Kontraste in deinem Produkt sein werden. Legst du hohen Wert auf eine ruhige, angenehme und barrierefreie Darstellung, bevorzugst du lineare Abstände. Soll dein Produkt hohe Kontraste enthalten, erzeugt eine stärkere Übergangskurve bessere Resultate.

Easing Kurven

Easing Kurven

Ebenso kannst du festlegen, wie die Extremwerte deines Produktes sind. Nutzt du pures Weiß oder Schwarz, oder doch eine leicht getönte Variante? Denk bei der Verteilung deiner Grautöne auch daran, in welchen Lichtverhältnissen Nutzer dein Produkt verwenden.

Tipp: Spielt Barrierefreiheit in deinem Produkt eine große Rolle, ist eine lineare Verteilung deutlich besser dafür geeignet, die erforderlichen Mindest-Kontrastwerte einzuhalten.

Tonskala

Tonskala

Colorbox Link
Neobanking App

Die Neobanking App beabsichtigt ein jüngeres Publikum ansprechen. Um Aufmerksamkeit zu erregen und anschließend zu lenken, werden erhöhte Kontraste sowie pures Weiß und Schwarz verwendet.

Beauty App

Die Beauty App soll Harmonie ausstrahlen und innerhalb des User Interface wenig Kontraste ausstrahlen. Die Ausgewogenheit der UI soll die Produkte und den Warenkorb in den Vordergrund heben. Wir verwenden daher stark getönte Maximalwerte. Ein Quad Easing mit einem Fokus auf den Weißanteil sorgt für eine Palette aus Grautönen, die nahezu verwechselbar sind und fast einem Farbverlauf ähneln.

Architektur Landing Page

Die Landing Page für das Architekturbüro soll Fotos der Bauwerke in den Vordergrund stellen. Wir entscheiden uns hier für eine sehr kontrastreiche Tonskala, die nur auf 5 Grautöne sowie die beiden Maximalwerte in Form von purem Weiß und Schwarz zurückgreift. Durch die Reduktion an möglichen Helligkeitswerten und dem Fokus auf ein Sinus Easing schaffen wir ein neutrales und ablenkungsfreies Interface, dass Bilder optimal in Szene setzt.

Systematisierung

Mit Ausnahme der Tonskala für die Architektur-Landingpage erhalten wir 11 Farbtöne, bestehend aus jeweils zwei Maximalwerten und insgesamt 9 Grautönen.

In der Entwicklung verwenden Schriftarten ein numerisches System von 100 bis 950 für unterschiedliche Schriftschnitte. Auf der Grundlage von Schriftarten, insbesondere durch Elemente wie den Schriftschnitt, ist es möglich, ein entsprechendes, effektives numerisches System für Farben zu erstellen.

Ähnlich wie verschiedene Schriftschnitte numerische Werte verwenden, können auch wir numerische Werte für verschiedene Farbtöne verwenden. Die Zahlen geben dann an, wie hell oder dunkel ein Farbton ist. Wenden wir die Gedanken auf unsere Farbsysteme an, dann erhalten wir folgende Tonskalen:

Beschriftete Tonskala

Beschriftete Tonskala

Die Verwendung einer Skala von 100 bis 900 mit einem Ton bei jeder Zehn ist einfach zu verstehen. Ein Grau-100 ist verständlicherweise der hellere Ton im Vergleich zu einem Grau-500. Die Vertrautheit eines solchen Ansatzes ermöglicht es dem System, sich vorhersehbar zu entwickeln.

Jeder neue Farbton, der in das System hinzugefügt wird, ist automatisch organisiert. Wir benennen jeden Farbton mithilfe der oben gezeigten Klammern in Bezug auf die Helligkeit, mit der er entwickelt wurde.

Wenn in Zukunft mehr Farbtöne für eine Farbe benötigt werden, berücksichtigt es das numerische System, wodurch wir einen hohen Grad an Vorhersehbarkeit erhalten.

Farbtöne wählen

In diesem Schritt wählen wir die Primär- und Akzentfarben für unsere vier Farbsysteme. Die Festlegung der Farbtöne ist von zentraler Bedeutung.

Um ein skalierbares Farbsystem zu entwickeln, muss sichergestellt werden, dass ein einzelner Farbton bei der Erzeugung von Tönen unverändert bleibt. Wenn der Farbton konstant ist, führen Variationen in der Helligkeit oder Sättigung zu einer monochromen Harmonie. Farben harmonieren auch, wenn sie unabhängig vom Farbton die gleiche Helligkeit und Sättigung aufweisen (Nuancenharmonie).

Sobald wir die Auswahl getroffen haben, müssen wir Töne erstellen und sie gemäß unserem Schema benennen, so wie wir es bei Grau getan haben.

Neobanking App

Unsere Neobanking App möchte eine junge Zielgruppe ansprechen. Sie soll das Gefühl von Transformation, Freiheit und Frische mit Werten wie Reichtum und finanziellem Aufschwung kombinieren.

Gold wäre für den semantischen Kontext passend. Jedoch ist Gold eine zu riskante Wahl, da die Marke eventuell als zu exklusiv interpretiert werden könnte und somit den sozialen Status verfehlt. Blau ist in Betracht auf bekannte Assoziationen in der westlichen Welt zu neutral. Ein reines Grün wirkt im ersten Moment wie eine gute Wahl, wirkt jedoch in User Interfaces nach Sekunden ermüdend, zumal es einige Wettbewerber bereits nutzen.

Vorhandene Anbieter wie Kontist, Penta, Klarna oder Chime setzen auf starke Kontraste und Farbschemata mit Lila oder Grün als Primärfarbe. Einige Anbieter aus den USA wie Curve möchten sich von diesem etablierten Schema abheben und setzen auf kontrastreiche Schemata mit Rot als Primärfarbe.

Unsere Neobanking App greift auf ein triadisches Farbschema mit Grün als Primärton sowie Lila und Orange als Akzentfarben zurück. Das erzeugt starke Kontraste, die jedoch aufgrund des primär genutzten Dark-Modes sowie der kurzen Nutzungsdauer der App nicht direkt ermüdend wirken.

Das Grün soll mit einem hohen Anteil an Blau kombiniert werden und letztlich Innovation, Frische und Reichtum symbolisch vereinen. Für Hintergründe nutzen wir eine Grauton-Palette, die durch leichte Sättigung subtil grün ist.

Neobanking App Farbwahl

Neobanking App Farbwahl

Beauty App

Da alle möglichen Varianten von rötlichen Farben bei Beautyprodukte für Frauen maximal überrepräsentiert sind, wollte ich es uns bei diesem Farbsystem schwieriger machen. Es lag die Frage im Raum, wie wir uns von der Konkurrenz abheben. Stark gesättigte Farben wären eine Möglichkeit gewesen, doch zeigen viele Studien auf, dass Frauen entsättigte Pastell-Farben bevorzugen.

Ergebnisse für rötliche Beauty-Produkte

Ergebnisse für rötliche Beauty Produkte

Ich testete mit dem Adobe Color Wheel nach einigen Farbverwandtschaften. Grün war aus meiner Sicht eine suboptimale Wahl, da auch die Farbe in den letzten Jahren stark als Akzentfarbe zugenommen hat. Insbesondere um den Hype von “natürlicher” Kosmetik oder sonstigem Greenwashing war Grün als Primärfarbe unbrauchbar, um sich von anderen Marken abzuheben.

Ergebnisse für grünliche Beauty-Produkte

Ergebnisse für grünliche Beauty Produkte

Ich experimentierte ein wenig im tetradischen Farbschema. Ich fand einen entsättigten Blauton, der harmonisch wirkt, allerdings noch genug Farbe besitzt, um sich von den Rosatönen abzuheben.

Das ausgewählte Blau soll entspannt, loyal und ehrlich wirken. Unser Farbsystem ist monochrom bzw. komplementär, um Produkte in den Vordergrund zu stellen und eine angenehme Atmosphäre zu schaffen. Für Hintergründe dient wieder eine leicht gesättigte Grauton-Palette.

Beauty App Farbwahl

Beauty App Farbwahl

Landing Page Architektur

Für das Architektur-Büro hatte ich zunächst an einen schwarz-weiß Look gedacht. Die achromatische Palette trägt wie in Schwarz-Weiß-Filmen dazu bei, Inhalt (Bilder, Videos) ohne weitere Ablenkung in den Mittelpunkt zu stellen.

Ich entschied mich letztlich doch für eine leicht blau gefärbte Variante, um den edlen und metallischen Look der Bilder harmonischer zum Farbschema wirken zu lassen. Dadurch sinkt der Kontrast zwischen Interface und Bild, und Kontraste im Bild selbst sind spürbarer.

Architektur Landingpage Farbwahl

Architektur Landingpage Farbwahl

Die finalen Paletten

All unsere Systeme verfügt über die Kapazität zu skalieren, um solche Akzentfarben als Teil einer alternativen Palette zu integrieren.

Jedes unserer Systeme kann systematisch skaliert werden. Nehmen wir an, wir benötigen mehr Grautöne zwischen Weiß und Grau-10, weil die Schnittstelle ein Layout mit verschiedenen Kernkomponenten erfordert, die visuelle Tiefe benötigen. Mit der Tönungstechnik können wir der Palette leicht weitere Töne hinzufügen. In ColorBox ist das relativ einfach, indem wir in den weiteren Einstellungen einen Zwischenschritt hinzufügen.

Systematische Skalierung des Farbsystems

Systematische Skalierung des Farbsystems

Finale User Interfaces

Auf Basis der vier erstellten Farbsysteme erhalten wir folgende Interface Designs:

Neobanking App UI

Neobanking App UI

Beauty App UI

Beauty App UI

Architecture Landingpage UI

Architecture Landingpage UI

300 Artikel Expertise in Person
Als zertifizierter UX Designer für Millionen Nutzer sichere ich das Wachstum deiner Software durch fundierte und skalierbare Designs.
layout justinschmitz opacity

Fazit und Leitfaden

Wollen wir Menschen emotional bewegen, spielen Farben eine große Rolle. Als Designer müssen wir uns von eigenen Präferenzen entfernen und unsere Zielgruppe in den Mittelpunkt stellen. Der Prozess muss tiefgreifend vollzogen werden: Die richtige Auswahl von Farben ist keine Frage von wenigen Minuten.

Durch die Berücksichtigung der oben genannten Tipps fällt es dir in Zukunft leicht, passende Farben und Farbkombinationen zu wählen. Im Anschluss an den Artikel findest du einen kurzen Leitfaden, den du gern als Checkliste nutzen kannst. Ebenso liste ich eine Reihe von Tools auf, die ich in meiner täglichen Arbeit häufig verwende.

Ich hoffe, dass dir der Artikel geholfen hat. Solltest du Fragen haben, wende dich gern per Mail an mich oder schreib mir auf:

Checkliste

1 Inhalt: Was ist dein Ziel?

  • Möchtest du ein Produkt verkaufen?
  • Möchtest du eine Marke erschaffen?
  • Möchtest du eine Botschaft vermitteln?

2 Eigenschaften: Was ist deine Persönlichkeit?

  • Erschaffe eine Marke
  • Bewerte deine Marke mit Adjektiven
  • Ordne deine Marke ein

3 Kontext: Mit welchen Medien vermittelst du dein Ziel?

  • An welchen Orten soll dein Ziel kommuniziert werden?
  • Existieren umliegende Inhalte?
  • Sind Lichtverhältnisse dynamisch?
  • In welchem Bereich arbeitest du bevorzugt? Print? Digital?
  • Welche Farbräume erlauben deine Medien?

4 Zielgruppe: Wer ist deine Zielgruppe?

  • Beurteile Kultur, Erfahrung, Alter, Geschlecht, Kontext, Erwartungen, Wünsche und Ziele
  • Nutze analytische Daten, analysiere vorhandene Marken, suche Umfragen und Studien

5 Bewerte deine Marke und ihr Angebot

  • Semantischer Kontext
  • Funktionalität
  • Sozialer Status
  • Erregung
  • Aufmerksamkeit

6 Wähle deine ersten Farben

  • Fasse deine Erkenntnisse zusammen
  • Wähle Primär- und ggf. Akzentfarben

7 Wähle dein Farbschema

  • Beachte die Paar-Präferenz und Paar-Harmonie
  • Achte auf die Figuren-Präferenz
  • Nutze ggf. ein klassisches Farbschema
  • Erstelle Schattierungen und Tönungen

Weitere Tasks und Tipps

  • Erstelle ein skalierbares Farbsystem für digitale Ziele
  • Achte auf Barrierefreiheit
  • Gestalte Schatten natürlich
  • Nutze Weißraum und neutrale Farben
  • Sammel Feedback

Tools

Farbinformationen erhalten

Farbmanagement

Farbwahl Inspiration

Komplementärfarben finden

Farbsysteme erstellen

Bilder aus Farben extrahieren

Browser Erweiterungen

Tools für Farbverläufe

Tools für Barrierefreiheit