Farben im Design: Auswahl und Verwendung der Farbpalette

Nachdem wir uns vor wenigen Wochen mit den Grundlagen der Farbtheorie auseinandergesetzt haben, wird dieser Blogartikel detaillierter auf die Auswahl von Farben in einem praxisnahen Umfeld eingehen. Mittels Primär-, Sekundär- und Akzentfarben schaffen wir ein stimmiges Design und lenken den Blick des Nutzers auf die relevantesten Elemente.

Bestimme eine grundsätzliche Farbstimmung

Im ersten Schritt sind der Kreativität keine Grenzen gesetzt. Wenn auf ein bestehendes Design aufgebaut werden kann, empfiehlt es sich, nicht zu weit von der bestehenden Designsprache abzuweichen. Haben wir freie Hand bei der Auswahl der Farben, kann die Farbpsychologie als Inspiration herangezogen werden. Designen wir für ein besonders temperamentvolles Produkt, könnte Rot als Primärfarbe eine gute Wahl sein. Möchten wir Vertrauen erzeugen, ist Blau eine bewährte Wahl. In diesem Schritt sind wir in unserer Wahl völlig frei. Dennoch sollte die Entscheidung gut überlegt sein: Die Farbe ist ein mächtiges psychologisches Mittel, und Nutzer werden das Produkt in Zukunft immer mit der gewählten Farbe assoziieren.

Ergänze die passende Sekundärfarbe und Akzentfarben

Entscheiden wir uns für #5D91E3 als Primärfarbe, die grundlegende Farbe dieses Blogs, ergeben sich die abgebildeten Möglichkeiten für die Auswahl von Sekundär- und Akzentfarben. Wie wir wissen, gibt es drei besonders bewährte Konzepte, um diese Farben zu ermitteln: analoge Farben, Komplementärfarben und Triaden. Die ausgewählten Beispiele zeigen, dass analoge Farben ein sehr gleichmäßiges, harmonisches Bild ergeben würden. Die Komplementärfarben ergeben ein sehr farbenreiches Bild mit hohem Kontrast. Die abgebildete Version der Triade weist harmonische Sekundär- und Akzentfarben auf, die in starkem Kontrast zur dominanten Primärfarbe stehen.

Für welches Konzept wir uns entscheiden, ist im Wesentlichen freie Entscheidung der Stakeholder, sollte aber unbedingt auf die anvisierte Zielgruppe abgestimmt werden. Als Faustregel können wir die Farben im Verhältnis 60/30/10 verwenden. Entscheiden wir uns für die dargestellte Triade, können wir die Farben im Verhältnis 60% Blau (#5D91E3), 30% Koralle (#E36D5D) und 10% Limonengrün (#D3E35D) nutzen.

Doch was bedeuten die abgebildeten Farbcodes und wie wurde der Farbkreis an die neuen Farben angepasst?

Einschub: Der Farbmodell

Abhängig von Einsatzzweck und Berufsgruppe haben sich verschiedene Farbmodelle entwickelt, die heute parallel genutzt werden. Im Druck treffen wir häufig auf das CMYK-Farbmodell. Die Grundfarben Cyan, Magenta und Gelb werden auf eine Oberfläche aufgetragen. Durch die Mischung der Grundfarben entstehen weitere Farben. Schwarz (Key) wird ergänzend verwendet, um eine dunklere Farbtiefe zu erreichen. Je mehr Farbe verwendet wird, desto stärker verdunkelt sich das Druckerzeugnis. Daher sprechen wir von einer subtraktiven Farbmischung.

Auf Bildschirmen ist der umgekehrte Effekt zu beobachten: Je mehr Farbe verwendet wird, desto heller strahlt die entsprechende Stelle des Bildschirms. Daher handelt es sich um eine additive Farbmischung. Da hierbei die Grundfarben Rot, Grün und Blau verwendet werden, sprechen wir vom RGB-Farbmodell. Farben können direkt in ihrem entsprechenden RGB-Wert angegeben werden. Unser gewählter Blauton entspricht beispielsweise RGB(93,145,227). Jede der drei Farben wird dabei mit einem Wert von 0 bis 255 wiedergegeben. 0 bedeutet, dass die Farbe nicht vorhanden ist, 255 entspricht der maximalen Intensität.

Der Hex-Code #5D91E3 ist eine hexadezimale Darstellung der Farbe RGB(93,145,227). Ein Hex-Code besteht aus sechs Zeichen: #RRGGBB. Diese Zeichen sind Paare, die die Intensitäten der Rot-, Grün- und Blauanteile in hexadezimalen Zahlen darstellen. Der Hex-Code bietet eine präzise und standardisierte Methode zur Darstellung von Farben.

Dieses aus technischer Sicht präzise System hat einen Haken: Es ist aus menschlicher Perspektive nicht intuitiv. Die wenigsten von uns könnten wohl herleiten, wie die Farbe RGB(93,145,227) aussehen könnte. Der hohe blaue Wert deutet an, dass es sich um einen Blauton handeln könnte. Aber ist es eine intensive Farbe? Ist sie eher hell oder dunkel? Dieses Problem möchte das HSB-Farbmodell lösen, das auf dem RGB-Modell beruht. Die Koordinaten sind H = Hue, S = Saturation und B = Brightness. Grundlegend sind hier also nicht die physikalischen Anteile der Farbe, sondern eine möglichst intuitive Darstellung in Form von Farbton, Sättigung und Helligkeit.

Unser Blau #5D91E3 entspricht HSB(217°, 59%, 89%). 217° gibt die Position im Farbkreis wieder (0° Rot, 120° Grün und 240° Blau). 59% entspricht 59% der höchstmöglichen Sättigung, 89% entspricht 89% der höchstmöglichen Helligkeit. Haben wir den Aufbau des Farbkreises verinnerlicht, sind die übrigen Werte intuitiv ablesbar und damit auch einfach anzupassen. Das macht HSB zu einer beliebten Darstellung des RGB-Modells für Designer.

Entsprechend baut sich auch der dargestellte Farbkreis auf: Sättigung und Helligkeit sollen unserem Blau entsprechen, lediglich der Farbton soll angepasst werden. Dank HSB-Modell ist das einfach umzusetzen. Unser Kreis enthält 12 Farben, jedes Feld umfasst also 30° des Kreises (360°/12 = 30°). Die nächste Farbe im Kreis ist also HSB(247°, 59%, 89%), darauf folgt HSB(277°, 59%, 89%) etc.

Erstelle deine Farbpalette

Zusätzliche Farbwerte und -tiefen geben uns die benötigte Flexibilität für ein geschmackvolles Design mit gutem Kontrastverhältnis. In der Praxis werden wir nie die volle Anzahl von Variationen benötigen, die in der Abbildung dargestellt sind. Sie veranschaulicht aber deutlich, welchen Spielraum wir aus lediglich drei Farben erhalten können.

Kleiner Tipp: Verlasse dich nie auf reines Weiß oder Schwarz für deine neutralen Farben. In den meisten Anwendungsfällen ergibt sich ein unangenehm starker Kontrast zu den verwendeten Farben und es entsteht kein stimmiges Gesamtbild. Viel sinnvoller ist es, auf die verwendeten Primär- und Sekundärfarben zurückzugreifen und die Sättigung zu reduzieren. In unserer Darstellung beträgt die gewählte Sättigung 2%.

Mithilfe der ausgewählten Farben kann die visuelle Hierarchie festgelegt werden. Wichtige Elemente wie Call-to-Action-Buttons sollten sich deutlich von weniger wichtigen Elementen abheben. Kräftige Farben sind ein gutes Mittel, um die Aufmerksamkeit auf primäre Handlungsaufforderungen zu lenken.

Die Primärfarbe repräsentiert unsere Marke und sollte konsistent über alle digitalen und physischen Medien hinweg eingesetzt werden. Die Sekundärfarbe ist hierarchisch unter der Primärfarbe eingeordnet. Sie kann beispielsweise verwendet werden, um untergeordnete Call-to-Action zu markieren. Im Zusammenspiel zwischen Primär- und Sekundärfarbe ergibt sich eine Hierarchie der Elemente unserer Website oder App.

Neutrale Farben helfen, spannende Kontraste zu erzeugen und wichtige Elemente zusätzlich hervorzuheben. Außerdem eignen sie sich gut als neutraler Hintergrund.

Beziehe den Nutzer ein

Schlussendlich ist jede Farbkombination nur so gut, wie sie der Nutzer wahrnimmt. Geschmäcker sind verschieden, und mancher Farbakzent, den wir als deutlichen Hinweis auf einen Call-to-Action eingeplant haben, bleibt unentdeckt. Das beste Mittel ist, Nutzer in den Designprozess einzubinden. Mittels A/B-Testing kann die Effektivität unserer Farbwahl überprüft werden. Insbesondere Call-to-Action-Buttons und ähnlich wichtige Elemente sollten in verschiedenen Farbvarianten getestet und die Reaktion der Nutzer analysiert werden. Befolgen wir die aufgeführten Schritte und stimmen in enger Kooperation mit den Testern ein finales Farbschema ab, erhalten wir einen Auftritt, der die Nutzer emotional abholt und sie mittels gezielt gesetzter Akzente durch die Anwendung führt.