Farbkompositionen im Webdesign

Im heutigen Gastartikel von Kerstin Schubert geht es um Farbkompositionen. Wie wirken Farbkombinationen im Webdesign?

Der letzte Teil der Serie (Wirkung einzelner Farben im Web Design) hatte ja eine – auch für mich – interessante Diskussion ausgelöst. Daher sollen nun einige Farbkombinationen und deren Wirkung vorgestellt werden.

Dazu möchte ich jedoch gleich erwähnen, dass diese Liste bei weitem nicht vollständig ist und nur ein Gespür dafür geben soll, wie die Farbe auch durch ihre Umgebung beeinflusst wird.

Farbkompositionen

Schwarz – Weiß
Die Unfarben stehen für Sachlichkeit und Nüchternheit – also etwas für Anwälte.

Rot – Schwarz
Wenn ihr darstellen möchtet, dass ihr jemanden an die Gurgel wollt, dann seit ihr bei dieser Farbkombination richtig. Aggressiver geht es eigentlich fast gar nicht mehr – Provokation pur.

Das gleiche gilt für Orange – Schwarz.

Rot – Grau / Silber
Diese Farbkombination symbolisiert Vitalität. Überwiegt jedoch die rote Farbe, kann das Empfinden wieder ins Negative umschlagen. Also hier die Farben dezent und vor allem gezielt sinnvoll einsetzen.

Rot – Gelb
Die klassischen Signalfarben, die meistens für Gefahr aber auch oft für Flaggen stehen. Wenn ich mir das genauer überlege: Kein Wunder sind das die typischen Farben für Discounterläden: Die Farben schreien förmlich nach „Billig“ und „Kauf mich, sonst gibt es Ärger“ Minimal eingesetzt, können aber auch diese beiden Farben Vitalität ausdrücken – wie gesagt, alles in Maßen 😉 Ich würde jedoch davon abraten, diese Farbkombination zu wählen.

Rot – Blau
Warm – kalt, aktiv – passiv, nah – fern; eine Farbkombination voller Gegensätze. Ein Kontrast eben. Hier bitte vorsichtig mit umgehen, da die beiden Farben direkt nebeneinander vor allem im Web ein flackern im Auge bewirken, dass sehr unangenehm wirkt.

Rot – Grün
Ein Kontrast, der noch schlimmer im Auge flackert als Rot – Blau. Also Vorsicht! Auch die Farbabstufungen der beiden Farben haben diese Auswirkungen. Das ist eine Farbkombination, die wirklich nur eingesetzt werden sollte, wenn man provozieren möchte.

Rot – Orange, Rot – Braun
Feuer, Wärme, Begierde… eine Farbkombination, der man gerne näher kommen möchte 😉

Natürlich gilt das auch wieder für die jeweiligen Farbabstufungen.

Gelb – Orange
Anders sieht es da bei Gelb-Orange aus. Die Kombination strahlt Angeberei aus und irgendwie auch etwas hinterhältiges. Eine Farbgebung, um den Leuten etwas unterzujubeln…

Gelb – Blau
Diese Kombination ist mit den Kontrast Rot – Blau gleichzusetzen. Diese beiden Farbkombinationen nennt man übrigens Komplemetärkontraste. Dazu später aber noch einen kurzen Ausflug.

Gelb – Grün
Frisch, frischer, am Frischesten. Vor allem Farbabstufungen wirken sehr frech, auffordernd, knackig,… machen eben Spaß. Gut, manch einer mag jetzt an Zitrone denken. Aber auch die hat etwas erfrischendes. Eine Bitte: jetzt aber nicht alle gelbgrüne Internetseiten gestalten, sonst wird das Internet langweilig 😉

Gelb – Braun
Gemütlicher geht es nicht mehr. Diese beiden Farben nebeneinander strahlen Ruhe und Geduld aus. Vielleicht wurden deswegen in den 70’ern alle Tapetenmuster so gestaltet.

Gelb – Schwarz
Ein Kontrast, der Stärke zeigt und Warnungen ausdrückt. Schon die Natur verwerndet hierfür diese Farben. Denkt mal an die Wespen,…

Grünblau – Weiß
Willkommen in den Arztpraxen. Die Farben sind einfach nur steril und sie werden es wohl auch immer bleiben. Wer also etwas mit Sauberkeit ausdrücken möchte, der ist hier richtig.

Blau – Weiß
Ein kleiner Schritt im Tonwert und schon ist man von der Arztpraxis im Urlaub gelandet.

In dieser Kombination haben wir jedoch wieder die Sauberkeit im Mittelpunkt.

Apropos Blau. Ein kleiner Ausflug in die Farbwirkung einzelner Farbabstufungen.

Blau
Dieses Blau wirkt sauber, nass, kalt, steril und zurückhaltend.

Ultramarinblau
…steht dafür eher „mit beiden Beinen im Leben“, ist standhaft, direkt, seriös. Noch ein Beispiel?

Rosa:
Ballett, Baby, Kosmetik – eben niedlich, zart, rein… das wird mit dieser Farbe verbunden.

Lavendel
…steht dagegen für Einsamkeit und Schwäche. Wirkt also ein Tick mehr als nur das Rosa.

Lila
Die klassische Farbe für Magie, Trauer und Eimsamkeit. So kann aus eine ursprünglich niedliche Farbe ein Trauerspiel werden, wenn die Farben zu stark und an falscher Stelle eingesetzt werden.

Wie ihr seht: Es kommt auch auf die Farbabstufung innerhalb einer Farbe an… und damit würde der Artikel mal wieder noch länger werden, wenn ich das alles auseinander nehmen würde. Aber machen wir einfach mal weiter…

Ultramarin – Grün
Ehrlichkeit und Beruhigung, das wird mit diesen Farben ausgedrückt. Der Klassiker, was Versicherungen und Banken angeht.

Ultramarin – Braun
Die Männer unter den Lesern werden sich hier angesprochen fühlen.

Ultramarin – Orange
Wieder einer dieser Komplementärkontraste, mit denen ihr vorsichtig umgehen solltet.

Grün – Orange
Natur pur. Mehr muss man dazu nicht sagen. Vor allem, wenn Wanderer oder sonstige aktive Naturfreaks angesprochen werden sollen, seit ihr hier absolut richtig.

Grün – Braun
Soll es dagegen mehr um die Naturgenießer gehen, dann empfehle ich direkt Grün – Braun.

Das gleiche gilt für Orange – Braun

Grün – Schwarz / Grün – Weiß
Diese beiden Kombinationen sind zwar frisch,… aber ein Tick zu Frisch in meinen Augen. Damit also eher Vorsicht.

Braun – Schwarz
Zu den Farben muss ich – glaube ich – nichts sagen. Hier hat jeder einen negativen Geschmack auf der Zunge.Obwohl die Farbkombination selber eigentlich eher warm, alt und gemütlich ist, haben politische Ereignisse erreicht, dass man besser die Finger davon lässt.

Jetzt wisst ihr, warum es nicht „das Rezept“ gibt, welche Farben verwendet werden sollten und welche nicht. Es geht zum einen um die Farbe und ihre Abstufung ansich und zum anderen um das Umfeld, in dem sich die Farbe befindet. Diese Serie sollte eigentlich nur dazu dienen, euch ein wenig „empfindlicher“ auf das Thema zu machen.

Wer jetzt immer noch unsicher ist, dem sind folgende Internetseiten empfohlen:

colourlovers.com (Wird aktuell gerade überarbeitet)
oder auch
Color Schemer Online v2

Hier wird einfach der jeweilige Farbwert angegeben und die Seite spuckt entsprechend harmonische Farbvorschläge aus.

Hier findet ihr einiges an Modulen zum Thema Farbe.

Achja: Für alle, die keine Software haben, um Farben entsprechend umzurechnen: Hier eine Tabelle, die alle Webfarben jeweils in RGB und HEX angibt.

Und hier die Möglichkeit, die Farben direkt umrechnen zu lassen.

Viel Spaß 🙂

Die Autorin

Target Grafix ist ein „Full-Service-Netzwerk“, das im Jahr 2002 von Kerstin Schubert gegründet wurde.

Die Arbeiten konzentrieren sich auf Usability, Print- und Onlinemedien. Dabei richtet Target Grafix den Blick auf Analyse, Konzeption, Beratung, Design und Evaluation.

Weitere Teile dieser Artikel-Serie:
“Farbwahrnehmung, Farberleben und die subjektive Farbbeurteilung im Webdesign”
“Die verschiedenen Wirkungsweisen von Farben”

Du hast Interesse einen Gastartikel hier auf “Selbständig im Netz” zu veröffentlichen? Dann einfach eine eMail mit kurzer Vorstellung und Artikelideen an autor@selbstaendig-im-netz.de senden.

• Über
• Letzte Artikel

Peer Wandiger

Studium der BWL und langjährige Arbeit in einem mittelständischen Unternehmen. Seit 2006 selbständig als Webentwickler und Website-Betreiber, 2007 Gründung von Selbständig im Netz.

Wer wir sind und wie wir arbeiten. In unserem Büro im Zentrum von Köln arbeiten gegenwärtig sieben ausgebildete Redakteur/innen an der Ausarbeitung erstklassiger Inhalte, auf die du dich verlassen kannst. Sämtliche Artikel werden nach dem Vier-Augen-Prinzip publiziert: Nach Fertigstellung der Rohfassung werden die Texte von (mindestens) einem/r anderen Redakteur/in auf orthografische und inhaltliche Richtigkeit hin überprüft.

Diese Seite ist ein Angebot der 4pub GmbH mit Sitz in Köln. Wir haben uns auf den Betrieb hochwertiger redaktioneller Online-Portale spezialisiert und berichten stets redaktionell unabhängig.

Letzte Artikel von Peer Wandiger (Alle anzeigen)

• Danke für 16 tolle Jahre - 13. Juli 2023
• So erstellst du deine erste Newsletter-Mail in 10 Schritten mit CleverReach - 13. Juli 2023
• Die 5 besten Features des Amazon Affiliate WordPress Plugin – AAWP - 12. Juli 2023