Ich schreibe meistens über Dinge, die mich begeistern oder eben nicht. Mehr zu uns findest du auf der Agentur-Seite.
Farben verstehen und wirkungsvoll gestalten
Designer sind wahre Farbenbändigerinnen. Sie wissen genau, was sie tun und warum, wenn es darum geht, ihrem Design den perfekten «Pop of Color» zu verleihen. Doch der gezielte Einsatz von Farben ist weniger intuitiv, als es auf den ersten Blick scheint, und erfordert mehr als nur ein gutes gestalterisches Auge. Wie in vielen anderen Disziplinen gibt es auch hier ein umfangreiches Regelwerk – ein Handbuch, das als Grundlage dient und den kreativen Prozess leitet.
Was ist Farbtheorie
Die Farbtheorie ist eine faszinierende Kombination aus Wissenschaft und Kunst. Sie beschreibt, wie wir Farben wahrnehmen und welche Wirkung sie auf uns haben – sei es durch ihre Kombination, ihren Kontrast oder ihre Harmonie. Dabei geht es nicht nur um das Mischen oder Abstimmen von Farben, sondern auch um die Botschaften, die sie transportieren, und die Techniken, mit denen sie reproduziert werden können.
Ein zentrales Element der Farbtheorie ist der Farbkreis, der die Farben in drei grundlegende Kategorien unterteilt: Primärfarben, Sekundärfarben und Tertiärfarben. Dieses System hilft uns, die Beziehungen zwischen Farben besser zu verstehen und sie gezielt einzusetzen, um stimmige visuelle Kompositionen zu schaffen.
Primärfarben: Rot, Gelb und Blau
Sekundärfarben: Sekundärfarben werden aus zwei Primärfarben gemischt. Dazu gehören Orange, Grün und Violett.
Tertiärfarben: Entstehen durch das Mischen einer Primärfarbe mit einer Sekundärfarbe.
In den Bereichen Branding und Webdesign kann die Farbtheorie dazu beitragen, eine konsistente visuelle Identität oder ein einheitliches Benutzererlebnis zu schaffen. Sie kann uns aber auch zeigen, wie die Farbpsychologie das Verhalten und die Emotionen der Betrachter beeinflusst oder wie sich unsere Wahrnehmung in verschiedenen Kontexten verändern kann.
Farbschemata
Ein Farbschema, auch Farbharmonie genannt, beschreibt die Beziehung zwischen Farben im Design. Es dient als Leitfaden und umfasst vier grundlegende Methoden, wie Farben stimmig und wirkungsvoll miteinander kombiniert werden können.
Komplementär
Verwendung von Komplementärfarben, die sich auf dem Farbkreis gegenüberstehen, wie Blau und Orange oder Rot und Grün. Dieses Schema eignet sich besonders gut für die Gestaltung kontrastreicher und lebendiger Webseiten.
Split Komplementär
Statt der gegenüberliegenden Komplementärfarbe werden die benachbarten Farbtöne verwendet. Ein Beispiel dafür ist die Kombination aus Blau, Orangerot und Orangegelb. Diese Variation wirkt visuell ebenso auffällig wie der klassische Komplementärkontrast, erzeugt jedoch eine harmonischere und weniger spannungsgeladene Farbwirkung.
Analog
Die Verwendung von Farben, die im Farbkreis nebeneinanderliegen, bietet eine gute Grundlage, um harmonische und ausgewogene Designs zu gestalten. Ein Beispiel dafür ist die Kombination aus Rot und Violettrot.
Triadisches Schema
Bei diesem Farbschema werden drei Farbtöne gewählt, die auf dem Farbkreis gleichmässig verteilt sind. Man kann sich den Farbkreis dabei als eine in drei Teile unterteilte Fläche vorstellen, die einem gleichseitigen Dreieck ähnelt. Ein Beispiel dafür ist die Kombination aus Blau, Grün und Rot. Dieses Farbschema erzeugt einen besonders lebendigen Effekt, da die Farben den maximalen Kontrast zueinander bieten.
Monochrom
Verwendung verschiedener Nuancen einer einzigen Farbe, die sich in Sättigung und Helligkeit unterscheiden. Die Abstufungen können von hell bis dunkel, von klar bis trüb oder von pastellig bis kräftig reichen. Monochrome Farbschemata wirken beruhigend, sorgen für ein cleanes, zeitloses Erscheinungsbild und strahlen zugleich Eleganz aus.
Die vier Elemente der Farbtheorie
Farbton
Der Farbton ist das, was wir als die eigentliche Farbe wahrnehmen, wie beispielsweise Rot, Blau oder Grün. Er wird durch die Wellenlänge des Lichts bestimmt und ordnet Farben im sichtbaren Spektrum. Farbton ist der grundlegende Aspekt, der eine Farbe von einer anderen unterscheidet.
Sättigung
Die Definition für die Reinheit einer Farbe also wie intensiv und kräftig die Farbe erscheint. Je höher die Sättigung, desto leuchtender und reiner ist die Farbe. Farben mit niedriger Sättigung erscheinen blass oder grau. Eine Farbe mit 100% Sättigung hat keine Beimischung von Grau, während eine Farbe mit 0% Sättigung nur als Grauton erscheint.
Lichtintensität
Beschreibt die Helligkeit oder Dunkelheit eines Farbtons. Das ergibt am meisten Sinn, wenn man sich ein Schwarz-Weiss Bild vom Farbkreis vorstellt. Das würde dann beispielsweise Gelb als helles Grau und Violett als dunkles Grau zeigen.
Farblicher Kontext
Eine Farbe kann je nach Kontext völlig unterschiedlich wirken. Kontrast, Lebendigkeit und sogar der Farbton selbst werden von umliegenden Farben beeinflusst. Daher sollten Farbpaletten in verschiedenen Kombinationen getestet werden, um ihre Wirkung in jedem Fall zu gewährleisten.
Farbanalyse von Brands
Schauen wir uns doch die Farbpaletten bekannter Brands mal genauer an. Wie haben sie Farben eingesetzt und warum haben sie sich wohl ausgerechnet für diese entschieden?
Apple
Apple’s Farbpalette ist bewusst schlicht und neutral gehalten – sie bewegt sich vorwiegend in Weiss-, Schwarz- und Grautönen. Diese Zurückhaltung spiegelt den hohen Anspruch der Marke an Design und Qualität wider. Gleichzeitig sind die verwendeten Farben so gewählt, dass sie auf unterschiedlichen Hintergründen und in verschiedenen Darstellungsmodi stets gut zur Geltung kommen. Sie passen sich zudem automatisch an die Systemeinstellungen für Lebendigkeit (liveliness) und Barrierefreiheit an.
Der Unterschied liegt im Detail: Gute Designs leben von subtilen Nuancen. Apple verzichtet bewusst auf reines Schwarz oder neutrale Grautöne und zieht stattdessen die Farbpalette leicht in eine blaue Richtung – eine Anspielung auf die Markenidentität. So wird ein tiefes Schwarz durch ein nahezu schwarzes Dunkelblau ersetzt. Diese minimale Abweichung fällt kaum auf, trägt jedoch entscheidend zum stimmigen Gesamtbild bei. Der Blaustich ist kein Zufall, sondern greift das Aluminium-Space-Grau auf, das Apple für seine Hardware verwendet. Diese Farbgebung spannt eine visuelle Brücke zwischen Hard- und Software und sorgt für ein durchgängiges, harmonisches Design.
Zudem hat die Entscheidung gegen 100 % reines Schwarz auch funktionale Gründe. Absolutes Schwarz kann auf Bildschirmen oft hart und unruhig wirken. Ein leicht abgedunkeltes, weicheres Schwarz hingegen schont die Augen und sorgt für ein angenehmeres Nutzererlebnis – besonders im Darkmode.
Spotify / Spotify.Design
Die Farbpalette von Spotify kombiniert sanfte, monochrome Grundtöne mit kräftigen, leuchtenden Akzentfarben.
Diese Farbgebung verleiht Spotify nicht nur einen einzigartigen Wiedererkennungswert, der die Plattform von anderen Streaming-Diensten abhebt, sondern sorgt auch für eine angenehme und intuitive User Experience. Die wichtigsten Farben sind Schwarz, verschiedene Grautöne und Grün.
Schwarz bildet die Hauptfarbe im Design. Dabei handelt es sich jedoch nicht um ein reines Schwarz, sondern um ein sehr dunkles Grau, das die Gestaltung harmonischer wirken lässt.
Abstufungen von Grau dienen als dezente Nuancen – sie kommen beispielsweise bei Texten, Icons und als Hover-Effekte auf Cards zum Einsatz.
Grün fungiert als Leitfarbe, die den User durch die Plattform führt. Der leuchtende Grünton sticht bewusst aus dem zurückhaltenden Design hervor und lenkt die Aufmerksamkeit auf zentrale Bedienelemente wie Play-Buttons und wichtige Icons.
Neben diesen Hauptfarben setzt Spotify auf eine Auswahl an Akzentfarben wie Gelb, Rot, Rosa, Grün, Lila und Blau. Diese werden gezielt und sparsam eingesetzt – vor allem, um benutzerspezifische Playlists visuell zu differenzieren.
Das Zusammenspiel dieser Farben schafft ein einzigartiges, einprägsames visuelles Erlebnis. Die personalisierte Farbgestaltung sorgt für eine individuelle Atmosphäre, die das Hörerlebnis visuell ergänzt und für alle Nutzer angenehm wirkt.
Ikea
Die Farben Blau und Gelb im Branding der schwedischen Möbelkette Ikea sind von der schwedischen Nationalflagge inspiriert und stellen somit eine bewusste Verbindung zur Herkunft und betonen die nationale Identität der Marke.
Der starke Kontrast zwischen dem kühlen Blau und dem warmen Gelb sorgt für eine hohe Signalwirkung und lässt das Erscheinungsbild von Ikea besonders ins Auge stechen. Aus farbpsychologischer Sicht steht Blau für Vertrauen, Stabilität und Ruhe, während Gelb, Optimismus, Lebensfreude und Kreativität symbolisiert.
Die Kombination der beiden Farben vermittelt so das Gefühl, dass ein Einkauf bei Ikea nicht nur verlässlich und unkompliziert ist, sondern auch dazu beiträgt, das eigene Zuhause freundlicher und einladender zu gestalten.
Auf der Ikea-Website kommen die Markenfarben dezent zum Einsatz – sie akzentuieren Interaktionen wie Aktivzustände oder Hintergründe und Icons.
Sooyou
In Korea und Japan sind Farben traditionell lebendig und ausdrucksstark. Dieses Prinzip spiegelt sich auch in der Farbpalette des japanisch-koreanischen Hautpflegeanbieters Sooyou wider.
Unsere Recherche zu koreanischen Beauty-Shops zeigte, dass Pastelltöne in der Branche dominieren. Um Sooyou von anderen Marken abzuheben und dennoch in die Kategorie zu passen, haben wir eine Palette aus sieben lebhaften Farben mit verschiedenen Abstufungen entwickelt.
Die Vielzahl an Farbtönen und Intensitäten eröffnet zahlreiche Möglichkeiten für den flexiblen Einsatz der Farbpalette. So entsteht ein Auftritt, der jung, lebendig und zugleich klar strukturiert wirkt.
Farben barrierefrei verwenden
Farben spielen eine entscheidende Rolle bei der Gestaltung eines inklusiven und barrierefreien Designs. Doch wie setzt man Farben richtig ein, und worauf sollte man achten?
Grundsätzlich ist keine Farbe von sich aus «barrierefrei» oder «nicht-barrierefrei». Entscheidend ist immer das Kontrastverhältnis zwischen zwei Farben. Daher sollten Farben bei Designentscheidungen stets im Zusammenspiel betrachtet werden, um sicherzustellen, dass die Barrierefreiheit gewährleistet ist.
Die 60-30-10-Regel
Für die Auswahl barrierefreier Farbkombinationen wird die 60-30-10-Regel empfohlen:
60 % Hauptfarbe (oft neutral wie Weiss, Grau oder Schwarz)
30 % Sekundärfarbe (oft die Brandfarbe)
10 % Akzentfarbe (oft die intensivste, auffälligste Farbe)
Diese Aufteilung sorgt für ein harmonisches Gesamtbild und gleichzeitig für klare, kontrastreiche Designs.
Bei der Wahl der Sekundär- und Akzentfarben sollte stets auf einen ausreichenden Kontrast zu der Hauptfarbe geachtet werden, um die Lesbarkeit und Zugänglichkeit für alle Nutzergruppen zu gewährleisten. Tools wie Contrast Grid helfen dabei, ein Farbsystem auf die Kontrastverhältnisse zu prüfen.
Kein Verlass auf Farbe
Farben sollten nicht die einzige Informationsquelle sein. Für Menschen mit Farbsehschwächen wie der weitverbreiteten Rot-Grün-Schwäche kann das problematisch sein. Deshalb ist es wichtig, bedeutungsvolle Inhalte immer zusätzlich durch Texte, Symbole oder andere visuelle Hinweise zu ergänzen.
Mit Tools wie WhoCanUse lässt sich überprüfen, wie Farbkombinationen von Menschen mit unterschiedlichen Sehbeeinträchtigungen wahrgenommen werden. Die Lesbarkeit wird dabei von AAA (sehr gut) bis Fail (unzureichend) bewertet. Idealerweise sollte eine Farbkombination für alle Personengruppen mindestens AA, besser noch AAA erreichen.
Barrierefreie Farbgestaltung ist kein Hexenwerk – und dank moderner Tools gibt es keine Ausreden mehr!
Accessibility Link danach dazu setzen
Fazit
Wenn du also das nächste Mal vor der Herausforderung stehst, mit Farben zu jonglieren, kannst du dir diesen Blog hervorholen und vielleicht hilft er dir, gezielter und sinnvoller deine Farben zu wählen. Im Zweifelsfall kannst du dich immer an die Agentur deines Vertrauens wenden (zum Beispiel uns zum Beispiel 😇 ), die gerne für dich ein Branding gestaltet, das im Gedächtnis bleibt.
