Farb-Layout: Welche Grundfarben (Farb-Typen) gibt es?

Hr Titelgrafik Planen Farben Hr Titelgrafik Planen Farben Hr Titelgrafik Planen Farben

Die Farben eines Webseiten-Layouts bestimmen im Wesentlichen, wie wir sie wahrnehmen. Sie kann kühl und distanziert wirken oder warm und freundlich. Auch werden Farben und Farbtöne mit bestimmen Branchen oder Inhalten assoziiert. Deshalb zeigen wir Dir hier, welche Grundfarben es gibt. Wir erläutern deren Wirkung, gehen auf die damit verbundenen Assoziationen ein und wir nennen Dir dazu passende Farbkombinationen.


1. Weiß

Das wichtigste Merkmal von Weiß ist, dass ihm jegliche Farbigkeit fehlt. Aus diesem Grund wird es als unbunte Farbe bezeichnet. In der Natur entsteht es durch eine Mischung der einzelnen Spektralfarben des Sonnenlichts. Auf dem Monitor wird Weiß durch gleich stark leuchtendes Rot, Grün und Blau erzeugt. In westlichen Kulturen wird Weiß mit Unschuld, Unsterblichkeit oder Reinheit assoziiert. Aber auch Stille, Leere oder Neutralität werden der Farbe gern zugeordnet. Während beispielsweise Orange als besonders warm oder Hellblau als sehr kühl wahrgenommen werden, wird Weiß keine Temperatur zugeordnet.


Auf Webseiten eignet sich Weiß besonders gut als Hintergrundfarbe. Besonders mit schwarzer Schrift ergibt sich ein sehr gut lesbarer Kontrast. Außerdem ist diese Farbkombination allen Website-Besuchern vertraut. Sie kennen sie von jedem Buch, jeder Zeitung usw. Umgedreht geht es natürlich auch. Auf einem schwarzen Hintergrund kann weiße Schrift aufgebracht werden. Hierbei ist zu beachten, dass die gleiche Schriftgröße in Weiß auf schwarzer Fläche schwerer lesbar ist als bei schwarzer Schrift auf weißer Fläche.

Hr Grafik Farben 1 Hr Grafik Farben 1 Hr Grafik Farben 1

Eine große weiße, leere Fläche auf einer Website kann außerdem den Eindruck von Großzügigkeit erwecken. Hier wird dem Text oder Bild Platz eingeräumt, um zu wirken. Nichts lenkt von ihm ab.

Hr Grafik Farben 1A Hr Grafik Farben 1A Hr Grafik Farben 1A

Wirkung:

hell, aufgeräumt, leer

Assoziation:

Neutralität, Reinheit, Stille, Ruhe

Geeignet für:

Keine Zuordnung. Weiß ist für alle Arten von Websites geeignet.

Mögliche Farbkombination:

Weiß ist als unbunte Farbe mit allen Farben kombinierbar.


2. Schwarz

Hr Grafik Farben Bild2 Hr Grafik Farben Bild2 Hr Grafik Farben Bild2

Schwarz ist ebenfalls eine unbunte Farbe. Es kommt zustande, wenn auf unsere Netzhaut keine Lichtwellen kommen. Wenn also ein Körper kein Licht reflektiert, sieht er schwarz aus. Kurz: Schwarz ist das Fehlen von Licht. Schwarz wird in Gegensatz zu Weiß als schwer empfunden. Schwarz zieht zudem weniger Aufmerksamkeit auf sich als helle Farben. Sind beispielsweise auf einem Bild ein schwarzer und ein heller Gegenstand, wird der helle Gegenstand zuerst betrachtet werden.


Assoziiert wird Schwarz sehr oft mit Tod, Trauer, Einsamkeit und anderen negativen Gefühlen. Andererseits wirkt es auch modern, funktional, sachlich und mit Gold und Silber im Kontrast sehr edel. Oft polarisiert Schwarz. Während es die Einen mögen, lehnen es die Anderen absolut ab. Das ist unbedingt zu bedenken, wenn viel Schwarz auf einer Website eingesetzt werden soll, beispielsweise als Hintergrundfarbe.

Wirkung:

modern, edel

bedrückend, schwer

es polarisiert

Assoziation:

Funktionalität, klassische Eleganz

Tod, Trauer, Einsamkeit

Geeignet für:

Schwarz ist als Schriftfarbe auf hellen Hintergründen ideal.

Schwarz als Hintergrundfarbe kann auf Webseiten für hochpreisige Produkte und Dienstleistungen sehr gut genutzt werden. Kombiniert am besten mit Weiß, Silber und Gold.

Auf Fanseiten der Metall- und Wave-Gothic-Szene sowie ähnlicher Subkulturen ist es als Hintergrundfarbe beliebt.

Nicht zu empfehlen ist es als Hintergrundfarbe für Seiten die Gesundheit, Fitness und Vitalität ausstrahlen sollen. Seine bedrückende Wirkung und die Assoziation mit Tod schreckt Besucher potenziell ab.

Mögliche Farbkombination:

Schwarz ist als unbunte Farbe mit allen Farben kombinierbar.

Farbkreis Farbkreis Farbkreis

3. Blau

Hr Grafik Farben Bild3 Hr Grafik Farben Bild3 Hr Grafik Farben Bild3

Die Farbe Blau gibt es in zwei Grundfarben: Violettblau und Cyanblau.


Wird Blau mit anderen Farben gemischt, entstehen Farbvarianten wie:

Grünblau = Blau + Gelb (Grün)

Taubenblau = Blau + Schwarz + Weiß

Nachtblau = Blau + Schwarz


Blau gehört zu den Farben, die als kühl empfunden werden. Wobei das nicht immer eindeutig ist. Hellblau oder Cyan sind eindeutig kühl, aber wenn Rottöne dem Blau beigemischt werden, wirkt es wärmer.


Blaue Dinge nehmen wir als weiter entfernt wahr als beispielsweise rote Objekte. Deshalb wird in der Malerei die Farbe verwendet, um eine Tiefe zu vermitteln.

Farbperspektive Farbperspektive Farbperspektive
Je weiter die Landschaft entfernt ist, desto mehr Blau fügt der Maler hinzu.

Blau ist eine der beliebtesten Farben bei Männern wie Frauen. Es wirkt beruhigend und entspannend. Es wird vor allem mit positiven Dingen assoziiert. So steht Blau für Freundschaft, Sympathie, Harmonie, Unendlichkeit oder Weite (Weite des Himmels).

Wirkung:

entspannend, beruhigend, stil

Assoziation:

Freundschaft, Harmonie, Weite, Vertrauen, Verlässlichkeit

Geeignet für:

Kühle Blautöne sind für Sportvereine, Versicherungen, Krankenkassen und Banken interessant. Auch alle Vereine und Dienstleister, die mit Wasser zu tun haben, sind mit Blau gut beraten.


Warme Blautöne sind bei Gourmet- und Barwebseiten beliebt, aber auch Schauspiel- und anderen Künsten.

Mögliche Farbkombinationen

Hr Grafik Farben Blau Hr Grafik Farben Blau Hr Grafik Farben Blau

4. Rot

Rot ist die Farbe, auf die wir Menschen am empfindlichsten reagieren. Kein Wunder also, dass sie besonders häufig bei Warnsignalen oder Werbung anzutreffen ist. Sie erregt einfach Aufmerksamkeit. Rot kann sehr unterschiedliche Farbtöne haben. Diese reichen von Purpurrot bis Orangerot.


Rot nehmen wir generell als warme Farbe wahr. Doch wie bei Blau kann es eher kühl wirken, wenn es in Richtung Blau (Violett) tendiert. Bewegt sich das Rot eher in Richtung Gelb, dann wirkt es wärmer. Aber auch sehr dunkles Rot, was wir oft schon als Braun bezeichnen, empfinden wir als warm.


Rot wirkt beunruhigend. Schüler, die vor einem Test eine rote Fläche ansahen, schrieben im Durchschnitt schlechtere Tests als Schüler, die das nicht taten. Es wird mit Hass, Hitze, Wut und Aufregung assoziiert. Erotik, Liebe und Wärme sind ebenfalls Teil der Dinge, die wir mit Rot in Zusammenhang bringen.

Wirkung:

aufregend, beunruhigend (knalliges Rot)

wärmend (dunkles Rot oder Orange)

Assoziation:

Wärme, Liebe, Erotik

Wut, Hass, Feuer

Impulsivität, Aufregung

Geeignet für:

Einfaches Rot eignet sich für Überschriften, Hinweise, Logos, Links und wichtige Infos auf einer Website.


Dunkles Rot kann als Hintergrundfarbe genutzt werden, etwa in den Bereichen Gastronomie, Kunst- und Kultur.

Mögliche Farbkombination:

Hr Grafik Farben Rot Hr Grafik Farben Rot Hr Grafik Farben Rot

5. Grün

Hr Grafik Farben Bild5 Hr Grafik Farben Bild5 Hr Grafik Farben Bild5

Grün ist die Farbe, die in der Natur am häufigsten vorkommt. Bei Monitoren und Fernsehern ist sie eine der drei Basisfarben. Sie setzen nämlich alle Farben aus Rot, Grün und Blau zusammen. In der Malerei entsteht Grün durch das Mischen von Gelb und Blau.


Grün kommt in unterschiedlichen Farbtönen vor. Diese reichen von einem bläulichen Jägergrün bis zum Giftgrün.

Hr Grafik Farben Bild5A Hr Grafik Farben Bild5A Hr Grafik Farben Bild5A

Grün ist eher eine kühle Farbe. Doch wie bei den anderen Farben spielt hier auch wieder der genaue Farbton eine Rolle. Mit mehr Gelb- oder Rotanteilen kann es auch wärmer wirken.


Grün wird als ruhig und erholsam von uns wahrgenommen. Es wird mit der Natur und Umwelt assoziiert. Auch geringes bzw. kein Risiko wird Grün zugeordnet. Man denke einfach an eine grüne Ampel. Andererseits wird bei Grün auch an Gift gedacht oder unreifes und deshalb saures Obst. „Grün vor Neid“ oder „Grün ist die Gier“ sind ebenfalls gängige Verbindungen, die wir in der Umgangssprache pflegen.

Wirkung:

ruhig, erholsam, gefahrlos

Assoziation:

Gier, Neid, Gift, Unreife

Umwelt, Natur, Gesundheit

Geeignet für:

Gesundheits- und Umweltthemen

Wander- und Naturvereine

Erholungs- und Wellnesswebseiten

Mögliche Farbkombination:

Hr Grafik Farben Gruen Hr Grafik Farben Gruen Hr Grafik Farben Gruen

6. Rosa

Hr Grafik Farben Bild6 Hr Grafik Farben Bild6 Hr Grafik Farben Bild6

Rosa betrachten wir hier nicht nur als helles Rot. Es ist gerade für Webseiten ein wichtiger Farbton. Viele unterschiedliche Nuancen existieren davon, die alle eine andere Wirkung haben können. Im Englischen wird Rosa mit Pink übersetzt. Auch im Deutschen verwenden wir den Namen Pink, allerdings nur für spezielle Rosanuancen mit höherem Blauanteil.


Rosa wird als eher warme Farbe wahrgenommen. Anders als Rot wirkt es offener, freundlicher im gewissen Sinn auch gesund. Es wird mit Zartheit, Naivität aber auch Kitsch und Schwäche in Verbindung gebracht. Seit den 1920er Jahren ist es eine weibliche Farbe. Davor war sie männlichen Säuglingen vorbehalten.

Wirkung:

offen, freundlich, kindlich-jung

Assoziation:

Zartheit, Naivität

Kitsch, Schwäche

Weiblichkeit

Geeignet für:

Baby-Webseiten

Hochzeitsthemen

Fotografie und Mode

Beauty und Wellness

Mögliche Farbkombination:

Hr Grafik Farben Rosa Hr Grafik Farben Rosa Hr Grafik Farben Rosa

7. Gelb und Gold

Hr Grafik Farben Bild7 Hr Grafik Farben Bild7 Hr Grafik Farben Bild7

Gelb ist eine der Grundfarben in der Malerei, d. h., man kann keine anderen Farben mischen, um Gelb zu erhalten. Auf einem Monitor wird es durch gleich stark leuchtendes Grün und Rot erzeugt. Blau wird nicht dazugemischt.


Die Farbnuancen reichen von Zitronengelb bis zu Indischgelb, was schon sehr an Orange erinnert.

Hr Grafik Farben Bild7A Hr Grafik Farben Bild7A Hr Grafik Farben Bild7A

Gold ist eine Nuance von Gelb mit einem höheren Rotanteil als etwa Zitronengelb. Der Glanz, den das Metall Gold ausmacht, fehlt natürlich dem Farbton.


Gelb wird in der Regel als warme Farbe empfunden, gerade wenn sein Rotanteil höher wird und es Richtung orange tendiert.


Gelb hat in der Natur eine Signalwirkung, gerade im Kontrast mit Schwarz. Man denke nur an Bienen und Wespen. Giftigkeit und Gefährlichkeit werden damit assoziiert. Auf Baustellen und ähnlichen Einrichtungen wird Gelb als „Achtungsfarbe“ häufig eingesetzt. Dadurch hat es einen technischen Charakter bekommen. Und natürlich strahlt die Sonne gelb. Es wird demnach mit Wärme verbunden. Der Farbton Gold ist natürlich mit edel und prachtvoll verkettet.

Wirkung:

aufmerksam, vorsichtig

wärmend

fröhlich, optimistisch

Assoziation:

Sonne, Licht

Gift, Gefahr

Geld und Luxus

Geeignet für:

Goldgelb in Kombination mit Schwarz: luxuriöse Objekte und Dienstleistungen

Gelb: Kinder, Spielzeug, Mode, Urlaub, Wellness, Beauty sowie Bautechnik

Mögliche Farbkombination:

Hr Grafik Farben Gelb Hr Grafik Farben Gelb Hr Grafik Farben Gelb

8. Grau und Silber

Hr Grafik Farben Bild8B Hr Grafik Farben Bild8B Hr Grafik Farben Bild8B

Als Grau werden alle unbunten Farben bezeichnet, die heller sind als Schwarz und dunkler als Weiß.


Im Alltag kann Grau allerdings Farbstiche enthalten. So ist etwa Taubengrau bekannt – ein mitteldunkles Grau mit einem Blauanteil. Auch der Farbname Feldgrau ist geläufig, hier wird ein Grün hinzugefügt. Und natürlich Silber oder Silbergrau. Dieses soll den Farbton des Edelmetalls widerspiegeln.

Hr Grafik Farben Bild8 Hr Grafik Farben Bild8 Hr Grafik Farben Bild8

Grau wirkt trist und unauffällig. Dabei steht es auch für Sachlichkeit. Assoziiert wird es meist mit Monotonie, Phantasielosigkeit und Interessenlosigkeit. Aber Neutralität und Technikaffinität werden ebenso mit der Farbe verbunden.

Die Farbe Silber steht für Edles und wirkt dabei weniger offensiv wie Gold.

Wirkung:

unauffällig, trist

neutral, technisch

edel

Assoziation:

Monotonie, ohne Phantasie

Neutral

Technikaffinität

dezenter Luxus

Geeignet für:

Technik-Webseiten

Homepages, die einen neutralen Eindruck machen sollen.

edle Luxusgüter oder Dienstleistungen

Mögliche Farbkombination:

Grau kann als unbunte Farbe mit allen anderen Farben kombiniert werden.

Hinweis:

Zurzeit gibt es den Trend, graue Schriftfarbe auf weißem Hintergrund zu verwenden. Das sieht stilvoll und modern aus. Jedoch ist der Kontrast zum Weiß oft so gering, dass die Schrift kaum lesbar ist. Überprüfe deshalb unbedingt die Lesbarkeit Deiner Texte auf verschiedenen Monitoren, bevor Du Dich für die Schriftfarbe Grau entscheidest. Willst Du auf Nummer sicher gehen, setzte auf den klassischen Schwarz-Weiß-Kontrast.


Quellenangaben:

Allgemeine Informationen über Farben und Farbwirkungen entnommen:
„Farben auf Webseiten“, http://jendryschik.de/weblog/2006/07/25/farben-auf-webseiten/, 11.11.2016

Spezielle Farbinfos entnommen:
Wikepdia jeweilige Farbe z.B. „Weiß“, https://de.wikipedia.org/wiki/Wei%C3%9F, 11.11.2016

Mögliche Farbkombinationen:
www.paletton.com (Tetrad (4-colors))


Thomas Kirsche Erstellt von:
Thomas Kirsche
Homepage-Experte
Erstellt am:
Zuletzt aktualisiert am: