Einführung in die Farbenlehre: So wirken Farben

Den meisten Leserinnen und Lesern springt beim Überfliegen ihres Newsfeeds vor allem eines ins Auge: visuelle Inhalte wie YouTube-Videos, Fotos oder auch animierte GIF-Dateien. Das soll natürlich nicht heißen, dass Texte nicht gelesen werden – schließlich lesen Sie diesen Beitrag ja auch.

Aber es soll heißen, dass sich farblich abgestimmte, visuelle Inhalte wie Infografiken, Diagramme, animierte GIF-Dateien und ähnlicher Content hervorragend dazu eignen, die Aufmerksamkeit von potenziellen Kunden und Kundinnen zu gewinnen und die Ergebnisse Ihres textbasierten Contents zu verbessern.

Daher haben wir in diesem Beitrag zahlreiche Informationen zu den gängigen Begriffen und Tools sowie einige Tipps zur Wahl der perfekten Farben für Ihren visuellen Content zusammengestellt.

Eine Einführung in die Farbenlehre: Die Töne und Nuancen des Farbkreises

Zunächst einige allgemeine Informationen zu den Grundlagen der Farbenlehre und Wirkung der Farben:

Schon Issac Newton und Johann Wolfgang von Goethe beschäftigten sich ihrerzeit mit der Wirkung und Zusammensetzung von Farben und Licht. Insbesondere Goethes Farbenlehre, der „Farbenkreis zur Symbolisierung des menschlichen Geistes- und Seelenlebens“, bildet die Grundlage für Farbtheorien, die im Laufe der Zeit aufgestellt wurden.

Quelle: Screenshot Wikimedia

Farben werden grundsätzlich in Primär-, Sekundär- und Tertiärfarben eingeteilt. Auf dieser Einteilung bauen sämtliche Regeln zu Farbschemata auf, sie gehört also zu den absoluten Grundkenntnissen.

Primär-, Sekundär- und Tertiärfarben im Farbkreis

Primärfarben sind die Farben Gelb, Rot und Blau. Dies sind die Grundfarben, das heißt, sie können nicht aus anderen Farben gemischt werden.

Sekundärfarben hingegen sind die drei Farben, die entstehen, wenn man die Primärfarben miteinander mischt, also Grün, Violett und Orange. 

Tertiärfarben entstehen, wenn Sie eine Primärfarbe mit einer Sekundärfarbe mischen. So entsteht beispielsweise aus der Mischung der Primärfarbe Blau mit der Sekundärfarbe Grün (je nach individuellem Anteil der Farbe) ein sattes Blaugrün als Tertiärfarbe. Mischen Sie hingegen Blau mit Violett, erhalten Sie als Tertiärfarbe Blauviolett bzw. Purpur.

Um nachvollziehen zu können, wie Expertinnen und Experten bei der Farbauswahl vorgehen, müssen Sie neben diesen Grundlagen jedoch auch all die anderen Farbkomponenten kennen.

Die Farbnuancen: Farbton, Schattierung, Tönung und Tonwert

Von diesen zwölf Grundfarben gibt es zahlreiche Nuancen – hellere, dunklere, blassere, kräftigere und so weiter. Diese entstehen, wenn Sie die Grundfarben mit Schwarz, Weiß oder Grau mischen. Und jede dieser Nuancen hat einen eigenen Namen.

Farbton: Der Begriff „Farbton“ ist im Prinzip als Synonym zu „Farbe“ zu verstehen. Alle Primär- und Sekundärfarben sind „Farbtöne“.

Schattierung: Den Begriff „Schattierung“ kennen Sie vielleicht als Bezeichnung für hellere und dunklere Varianten desselben Farbtons. Fachsprachlich gesehen entsteht eine Schattierung jedoch, wenn Sie einen Farbton mit Schwarz mischen. Je nachdem, wie viel Schwarz Sie beimischen, entstehen dann unterschiedliche Schattierungen.

Tönung: Bei der Tönung handelt es sich um das Gegenteil der Schattierung. Im allgemeinen Sprachgebrauch wird jedoch eher selten zwischen Schattierung und Tönung unterschieden. Tönungen entstehen, wenn Sie einen Farbton mit Weiß mischen. Jeden Farbton gibt es also in verschiedenen Schattierungen und Tönungen.

Tonwert (oder Sättigung): Wenn Sie eine Farbe mit Weiß und Schwarz mischen, verändern Sie den Tonwert des Farbtons. Im Grunde bezeichnet der Tonwert dasselbe wie die Sättigung. Allgemein wird im Kontext von Farbschemata für visuellen Content jedoch meistens von Sättigung gesprochen. Der Begriff des Tonwerts findet eher im Kontext der Malerei Anwendung.

Additive und subtraktive Farbmischung

Wenn Sie schon einmal in einem Computerprogramm mit Farben gearbeitet haben, sind Sie mit Sicherheit früher oder später auf ein Bedienfeld gestoßen, indem für die Abkürzungen RGB und CMYK Zahlen angegeben waren. Hinter diesen Abkürzungen verbirgt sich Folgendes:

CMYK-Farbmodell

CMYK steht für Cyan, Magenta, Yellow und Key (Schwarz). Dies sind dieselben Farben, die auch auf den Farbpatronen für Drucker angegeben sind – und das nicht ohne Grund.

Denn das CMYK-Farbmodell ist ein subtraktives Farbmodell, das heißt, je mehr Farben Sie abziehen, also subtrahieren, desto heller – sprich weißer – wird Ihre Farbe. Im Umkehrschluss heißt das: Je mehr Farbe Sie hinzufügen, desto dunkler – sprich schwärzer – wird das Ergebnis. Das Pendant zu diesem Modell bildet das der additiven Farbmischung.

Ein kleines Beispiel zur Veranschaulichung: Sie möchten etwas ausdrucken und legen dazu ein weißes Blatt Papier in den Drucker. Indem nun Farbe auf das weiße Blatt Papier gedruckt wird, wird das weiße Licht verdrängt.

Wenn Sie dieses bedruckte Blatt Papier nun wieder zurück in den Drucker legen, um es erneut zu bedrucken, erscheinen die doppelt bedruckten Flächen dunkler, also schwärzer als zuvor.

Im CMYK-Modell werden Farben auch in Prozent, also auf einer Skala von 0 bis 100, angegeben. Wenn alle vier Farben – Cyan, Magenta, Yellow und Key – zu 100 % verwendet werden, erhalten Sie die Farbe Schwarz. Weiß erzielen Sie, wenn alle Farben zu 0 % verwendet werden. 

RGB-Farbmodell

Das RGB-Farbmodell wurde für elektronische Displays, wie Computerbildschirme, entwickelt.

RGB steht für Rot, Grün und Blau. Bei diesem Farbmodell werden die drei Grundfarben hinzugefügt, das heißt addiert. Daher wird dieses Modell auch als additives Farbmodell bezeichnet. Hier gilt: Je mehr Farbe Sie hinzufügen, desto heller – also weißer – wird das Ergebnis.

Auf Computern steht Ihnen hier eine Intensitätsskala von 0 bis 255 zur Verfügung. Wählen Sie für alle Farben die Intensität 0, erhalten Sie Schwarz. Wählen Sie dagegen für alle Farben den Wert 255, erhalten Sie Weiß. 

Wenn Sie in einem Computerprogramm Farben definieren, werden für diese für gewöhnlich sowohl die RGB- als auch die CMYK-Werte angezeigt. Welches Farbmodell Sie wählen, spielt theoretisch keine Rolle. Denn wenn Sie RGB-Werte auswählen, werden automatisch auch die CMYK-Werte berechnet und umgekehrt.

Beachten Sie jedoch, dass in vielen Web-Programmen nur die RGB- oder Hex-Farbwerte (die Farbcodes für CSS und HTML) verwendet werden. Daher empfiehlt es sich, für digitale Inhalte generell das RGB-Modell zu verwenden.

Die Farbfamilien als übergeordnete Gruppe

Wenn Sie einem Farbton Schwarz oder Weiß hinzufügen, bleibt die Grundfarbe dennoch zu erkennen. Auch wenn sie verschiedene Farben mischen, entsteht nicht zwangsläufig eine völlig neue Farbe. 

Ein Beispiel: Wenn Sie der Farbe Grün ein wenig Gelb hinzufügen, bleibt sie dennoch Grün, nur in einer anderen Nuance. Nur wenn Sie sehr viel Gelb beimischen, überwiegt irgendwann der Gelbanteil und das Grün ist verschwunden.

Alle Schattierungen, Tönungen und Tonwerte eines Farbtons sowie bestimmte Mischungen verschiedener Farben gehören zur gleichen Farbfamilie. Das ist so lange der Fall, wie der Grundton in der Mischung überwiegt.

Einfach ausgedrückt: Alle Grüntöne gehören zur Farbfamilie Grün, sämtliche Gelbtöne zur Farbfamilie Gelb und alle Brauntöne zur Farbfamilie Braun.

Farbschemata erstellen: So setzen Sie Farbkontraste und -harmonien gezielt ein

Manche Farben passen gut zueinander, andere gar nicht, und es ist wichtig, dass Sie ein stimmiges Farbkonzept auswählen. Denn dieses wird sich ganz entscheidend darauf auswirken, wie Ihr Content auf die Leserinnen und Leser wirken wird.

Wenn Sie Farben für visuelle Inhalte auswählen, sollten Sie stets bedenken, dass wir Farben kontextabhängig wahrnehmen. Dabei wird der Begriff „Umgebung“ verwendet, um alle weiteren verwendeten Farben und den Kontrast zu bezeichnen, der zwischen den verwendeten Farben besteht.

Sehen Sie sich beispielsweise einmal die nachstehenden Kreise an.

Die inneren Kreise der in beiden Kreisen eines Paares sind immer gleich groß, gleich geformt und gleichfarbig. Der einzige Unterschied ist die Farbe des äußeren Kreises, also die Hintergrundfarbe auf der der jeweils innere Kreis zu sehen ist. Und je nach Hintergrundfarbe wirken die inneren Kreise entweder blasser oder heller. Eine Veränderung im Kontrast kann sogar als Bewegung wahrgenommen werden oder ein Objekt dreidimensional wirken lassen.

Das liegt daran, dass unsere Farbwahrnehmung je nach Kontrast variiert. Daher sollten Sie die Farben für Ihren visuellen Content auch danach auswählen, wie kontrastreich der Inhalt letzten Endes sein soll.

So bietet es sich bei einem einfachen Balkendiagramm eher nicht an, dunkle Farben für sowohl die Balken als auch den Hintergrund zu wählen. Stattdessen sollten sich die Balken ganz klar vom Hintergrund abheben, sodass sich die Betrachterinnen und Betrachter auf die Balken – und nicht den Hintergrund – konzentrieren. Vielleicht wählen Sie hier sogar Komplementärfarben.

Während die Auswahl kontrastreicher Farben recht einfach sein kann, stellt die Wahl von Farben, die gut zueinanderpassen, häufig eine wahre Herausforderung dar. Doch glücklicherweise gibt es einige logische Regeln, an denen Sie sich bei der Erstellung von Farbschemata orientieren können.

Analoge Farbschemata

Bei einem analogen Farbschema wird eine Hauptfarbe mit zwei Farben kombiniert, die auf dem Farbkreis direkt neben der Hauptfarbe liegen. Wenn Sie zusätzlich zu den drei Farben zwei weitere verwenden möchten, können Sie die zwei Farben hinzufügen, die auf dem Farbkreis direkt neben den zwei äußeren Farben folgen.

Da der Kontrast bei analogen Farbschemata eher gering ausfällt, werden diese Schemata in der Regel für harmonische, kontrastarme Elemente gewählt. Ein Beispiel hierzu wäre eine Grafik in Herbst- oder Frühlingsfarben. Herbstfarben sind dabei traditionell eher warme Farben, während Frühlingsfarben kalte Farben sind.

Hier können Sie auch zwischen wärmer (Rot, Orange und Gelb) und kühler (Violett-, Blau- und Grüntöne) wirkenden Kombinationen wählen. Wie Sie im Beispiel unten sehen, ist der Kontrast zwischen den einzelnen Farben nicht hoch, sie harmonieren aber perfekt.

Dieses Schema eignet sich eher für Bilder als für Infografiken oder Balkendiagramme, da es bei Bildern gewünscht ist, dass die einzelnen Komponenten nahezu nahtlos ineinander übergehen.

Monochrome Farbschemata

Bei einem monochromen Farbschema wird nur eine einzige Farbe verwendet, allerdings in verschiedenen Schattierungen oder Tönungen. Hier fehlt zwar der Kontrast zu anderen Farben, doch monochrome Farbschemata lassen Ihre Inhalte strukturiert und elegant wirken. Ein weiterer Vorteil dieser Schemata ist, dass Sie die Helligkeit der Farben ganz einfach anpassen können.

Sofern kein hoher Kontrast erforderlich ist, eignen sich monochrome Farbschemata sehr gut für Diagramme. Wenn Sie allerdings erreichen möchten, dass Ihr Content den Betrachtenden direkt ins Auge springt, dann ist ein solches Schema die falsche Wahl.

Triadische Farbschemata

Bei einem triadischen Farbschema werden drei Farbtöne verwendet, die gleich hell sind, aber in starkem Kontrast zueinander stehen. Hier wird denjenigen Farbtönen der Vorzug gegeben, die den gleichen Abstand im Farbkreis zueinander besitzen.

Triadische Schemata eignen sich hervorragend für kontrastreiche, lebendige Inhalte. Beachten Sie jedoch, dass Ihr Content schnell etwas grell wirken kann, wenn Sie für alle drei Farbtöne dieselbe Tönung wählen.

Um dies zu vermeiden, empfiehlt es sich, entweder eine Hauptfarbe zu wählen und die anderen zwei Farben als Akzentfarben einzusetzen, oder zwei der Farben etwas zu dämpfen, indem Sie etwas weichere Nuancen dieser zwei Farbtöne wählen.

Ein triadisches Farbschema wirkt gerade in Grafiken wie Balken- oder Kreisdiagrammen besonders gut, da der starke Kontrast Vergleiche visuell hervorhebt.

Wenn Sie ein solches Farbschema für eine Infografik verwenden möchten, erreichen Sie einen optimalen Kontrast, indem Sie eine der helleren Farben (wie das Gelb oder Hellgrün) als Hintergrund verwenden und als Hauptfarbe der Grafik eine der dunkleren Farben wählen. Die drei übrigen Farben können Sie dann verwenden, um Akzente zu setzen. Um wichtige Aspekte und die Kernpunkte hervorzuheben, können Sie einfach die Farbintensität anpassen.

Komplementäre Farbschemata

Bei einem komplementären Farbschema werden zwei Farben (und deren Tönungen) gewählt, die auf dem Farbkreis einander direkt gegenüber liegen.

Dieses Schema ist das kontrastreichste Farbschema und sollte daher mit Bedacht eingesetzt werden.

Wenn Sie Komplementärfarben wählen, sollten Sie eine der beiden Farben als Hauptfarbe verwenden und die andere nur, um Akzente zu setzen.

Auch dieses Schema eignet sich hervorragend für sämtliche Formen von Diagrammen. Dank des starken Kontrasts lassen sich wichtige Aspekte und die Kernpunkte recht einfach hervorheben.

Bei Infografiken in Komplementärfarben empfiehlt es sich jedoch, für den Hintergrund eine sehr helle Tönung des Farbtons zu wählen. Wählen Sie beispielsweise nicht einen Orangeton als Hintergrund und für den Text und die Akzente einen Blauton. Hier wäre das Ergebnis vermutlich etwas zu knallig und schwierig zu lesen.

Eine Variante des komplementären Farbschemas

Sie können das komplementäre Farbschema auch etwas abschwächen, indem Sie eine Hauptfarbe wählen und diese durch die zwei Farben ergänzen, die auf dem Farbkreis rechts und links direkt an die Komplementärfarbe dieser Hauptfarbe angrenzen. Dadurch schwächen Sie den Kontrast zwar etwas ab, behalten die Vorteile des Komplementärfarbschemas aber bei.

Anders als bei analogen oder monochromen Farbschemata besteht hier – ähnlich wie beim Komplementärfarbschema – immer ein Kontrast zwischen den Farben. Daher kann es mitunter etwas schwierig sein, das richtige Verhältnis der Farben zu finden.

Wie Sie im Beispiel unten sehen, eignet sich dieses leicht abgeschwächte komplementäre Farbschema ebenfalls hervorragend für Diagramme. Während der gewünschte Kontrast weiterhin gegeben ist, harmonieren die Farben dennoch gut miteinander.

Auch für eine Infografik würde sich ein solches Schema anbieten. Dazu müssten Sie allerdings ein wenig herumexperimentieren, um herauszufinden, welche Farbpaare am besten zueinanderpassen.

Diese Variante hat den Vorteil, dass Sie relativ freie Wahl bei der Kombination von Farben haben und dennoch immer den gewünschten Kontrast erzielen können. Der Nachteil ist, dass es eine wahre Herausforderung sein kann, das richtige Verhältnis der beiden Farben zu wählen. Bei diesem Farbschema kann es verglichen mit den anderen Schemata also etwas länger dauern, bis Sie die richtige Kombination und das passende Verhältnis gefunden haben.

Bei der Wahl des Farbschemas sollten Sie immer im Hinterkopf behalten, welche Ziele Sie mit Ihrem Content verfolgen. Wenn dazu ein Kontrast erforderlich ist, sollten Sie ein entsprechendes Farbschema wählen. Wenn Sie dagegen nur nach den schönsten Nuancen bestimmter Farbtöne suchen, hilft Ihnen ein monochromes Farbschema dabei, den Farbton mit der perfekten Schattierung oder Tönung zu finden.

Generell wird Ihnen die Wahl des passenden Schemas wesentlich leichter fallen, nachdem Sie die Prinzipien hinter den einzelnen Schemata verinnerlicht haben. Denn dann können Sie das jeweils passende Schema ganz einfach anhand des Kontrasts, der für Ihre Grafik erforderlich ist, auswählen. Dazu müssen Sie sich lediglich fragen, welches Ziel die Grafik erfüllen soll.

Hinweis: Wenn Sie ein Farbschema mit fünf Farben erstellen, müssen Sie nicht zwangsweise auch alle fünf Farben verwenden. Manchmal wirkt eine Grafik wesentlich ansprechender, wenn Sie nur zwei Farben aus Ihrem Schema auswählen und die anderen drei außer Acht lassen.

Farbdesign-Tools

Es gibt zahlreiche Theorien und hilfreiche Artikel dazu, welche Farben am besten miteinander harmonieren und warum dies so ist. Die größte Hilfe bei der Auswahl eines Farbschemas für visuelle Inhalte sind jedoch die dafür entwickelten Tools. Denn diese vereinfachen und beschleunigen diesen Prozess erheblich. 

Dabei können Sie zwischen einer ganzen Reihe von Tools wählen: 

Adobe Color

Adobe Color (früher Adobe Kuler) eignet sich für sämtliche visuelle Inhalte – von komplexeren Infografiken bis hin zu einfachen Tortendiagrammen.

Mit diesem kostenlosen Online-Tool können Sie schnell und einfach auf Basis der in diesem Beitrag erklärten Grundregeln Farbschemata erstellen. Sobald Sie sich für bestimmte Farben eines Farbschemas entschieden haben, können Sie die zugehörigen HEX- oder RGB-Werte kopieren und in das von Ihnen bevorzugte Programm einfügen.

Außerdem bietet das Tool auch unzählige vordefinierte Farbschemata, die Ihnen Ideen liefern oder die Sie für Ihren eigenen Content verwenden können. Wenn Sie über ein Adobe-Konto verfügen, können Sie Ihre erstellen Schemata auch ganz einfach speichern.  

Quelle: Screenshot Adobe Color CC

Die Farbhilfe von Adobe Illustrator

Wenn Sie in der Farbhilfe von Adobe Illustrator eine Farbe auswählen, erstellt das Tool automatisch auf Basis dieser Farbe ein Farbschema mit fünf Farben. Zusätzlich schlägt Ihnen das Tool für jede der fünf Farben eine Reihe von passenden Tönungen und Schattierungen vor.

Wenn Sie dann Ihre Hauptfarbe ändern, passt das Tool alle anderen Farben des Schemas automatisch an. Ein Beispiel hierzu: Sie haben ein komplementäres Farbschema mit der Hauptfarbe Blau ausgewählt. Wenn Sie nun die Hauptfarbe in Rot ändern, wechselt die Komplementärfarbe automatisch von Orange zu Grün.

Genau wie Adobe Color bietet auch die Farbhilfe verschiedene vordefinierte Modi, dank der Sie ein passendes Farbschema wählen und dieses dann auf Ihr bevorzugtes Programm übertragen können. 

Zudem haben Sie auch hier die Möglichkeit, Ihre erstellten Farbschemata unter „Farbgruppen“ zu speichern, um sie künftig wiederverwenden zu können.

Quelle: Screenshot Adobe Illustrator

Vordefinierte Farbschemata

Falls Sie Adobe nicht nutzen, haben Sie vermutlich mindestens erste Erfahrungen mit einem Microsoft-Office-Produkt gesammelt. In allen Microsoft-Office-Produkten sind bereits einige Farben vordefiniert, die Sie verwenden können, um Farbschemata zu erstellen. In PowerPoint finden Sie zudem verschiedene vordefinierte Farbschemata, die Sie als Basis für Ihr eigenes Schema verwenden können.

In welchem Menü Sie diese Schemata finden, hängt von Ihrer PowerPoint-Version ab. Doch eines ist in allen Versionen gleich: In den Farbeinstellungen sind sowohl die RGB-Werte als auch die HEX-Werte der ausgewählten Farben angegeben. 

Diese können Sie dann kopieren und in Ihr bevorzugtes Design-Programm übertragen. 

Quelle: Screenshot PowerPoint

Von der Theorie zur Praxis

Wir haben in diesem Beitrag die wichtigsten theoretischen Grundlagen behandelt, die Sie benötigen, um die Prinzipien hinter verschiedenen Farbschemata zu verstehen. Wir hoffen, dass Ihnen dieses Wissen bei der Erstellung neuer visueller Inhalte behilflich sein wird. Zum Schluss noch einige allgemeine Tipps:

• Begnügen Sie sich nicht mit den Voreinstellungen. Nahezu jedes Programm, mit dem visuelle Inhalte erstellt werden können, bietet eine Reihe von vordefinierten Farben. Beschränken Sie sich jedoch nicht auf diese, sondern definieren Sie Ihre eigenen Farben. Geben Sie wichtige Entscheidungen wie diese nicht einfach an das Programm ab, sondern treffen Sie sie selbst.
• Wählen Sie zunächst nur eine Farbe aus. Bilden Sie anschließend ein passendes Farbschema auf Basis dieser ersten Farbe. Wenn Sie mit mehr als einer Farbe beginnen, ist es schwieriger, ein harmonisches Verhältnis der Farben zu finden. 
• Speichern Sie Ihre benutzerdefinierten Farbschemata. Wenn Sie ein Farbschema gefunden haben, das Ihnen gut gefällt, können Sie es künftig erneut verwenden. Sie sollten zwar nicht für jede Grafik oder jedes Diagramm ein und dasselbe Farbschema immer wieder verwenden, es spricht aber nichts dagegen, Ihre Farbschemata später einfach in anderer Form oder etwas abgeändert erneut einzusetzen. 
• Übung macht den Meister. Ihr erstes Werk muss nicht perfekt sein! Geben Sie sich ein wenig Zeit, denn je mehr Erfahrung Sie im Farbdesign sammeln, desto routinierter werden Sie auch.

Titelbild: NeonShot / iStock / Getty Images Plus