Farben auswählen und optimal einsetzen – Experten-Tipps, nicht nur fürs Webdesign (1)

Darius A Monsef IV (Übersetzung Manuela Müller)

Farbe ist eine wichtige Komponente im Webdesign. Mit der richtigen Farbkombination können Sie Aufmerksamkeit erregen oder Usern helfen, Entscheidungen zu treffen oder sie zu einer Aktion animieren, Gefühle hervorrufen, Elemente hervorheben, Informationen strukturieren und ein ausgewogenes Design schaffen. Wie Sie das im Einzelnen erreichen, erläutert dieser zweiteilige, aus dem Englischen übersetzte Fachbeitrag aus dem Smashing Book.

Lebensgrundlage

Verschiedene Forschungsansätze gehen davon aus, dass Primaten im Laufe der Evolution gelernt haben, Farben zu sehen, weil es für sie existentiell war, verschiedene Arten von Nahrung zu unterscheiden. Auch für die Suche nach paarungswilligen Artgenossen und um fresswütigen Raubtieren zu entgehen, war die Unterscheidung von Farben absolut vorteilhaft (1). Die Wahl zwischen den tödlich giftigen, grünen Steinfrüchten des Wandelröschens und den weniger gefährlichen roten wäre ohne Farbwahrnehmung wohl nicht allzu häufig gut ausgegangen.

Heutzutage müssen wir wesentlich schneller Informationen sammeln, filtern und dann Entscheidungen treffen als unsere behaarten Vorfahren – vor allem, wenn es um Websites und andere Medien geht. Mit schlechter Farbwahl im Webdesign können Sie zwar niemanden umbringen, allerdings können Sie damit ungewollte Reaktionen auslösen. Deshalb ist es auch heute noch sehr wichtig und hilfreich zu wissen, wie Farbe sich auf das Erleben von und der Interaktion mit Internetseiten auswirkt.

Ein paar Basics vorweg

Bestimmt möchten Sie sofort in die faszinierende Welt der Farben mit inspirierenden Beispielen von Farbkombinationen eintauchen. Allerdings können ein paar Grundlagen über Farbmodelle und die Bedeutung, die wir Farben zuschreiben, nicht schaden. Gewappnet mit diesen Grundlagen können Sie dann umso erfolgreicher forschen und praktisch an jedem Ort in Ihrem Umfeld neue Inspirationen finden.

Grundfarben

Unsere Augen haben drei verschiedene Arten von Farbrezeptoren, die jeweils auf rot, grün und blaue Farbe im Licht unterschiedlich reagieren. So stimuliert blaues Licht den einen Rezeptor mehr als die beiden anderen, was wiederum zu verschiedenen Botschaften ans Hirn führt. Die Art und Weise, wie verschiedene Farbkombinationen die verschiedenen Rezeptoren stimulieren, bedingt wiederum Millionen verschiedener Arten von Farben beziehungsweise Farbtönen. Diese Farbtöne kann man  in einem Kreis gruppieren – dem so genannten Farbkreis oder Farbrad, wie Goethe es nannte – wobei In diesem Kreis bei jeweils 60 Grad ein andere Grundfarbe beginnt. Drei dieser Grundfarben, nämlich Rot, Blau und Grün, nennt man Primärfarben, während Gelb, Cyan und Magenta als Sekundärfarben bezeichnet werden. Die sechs Farbtöne dazwischen, sind die so genannten Tertiärfarben.

Ein beliebtes Farbsystem in der elektronischen Informationsverarbeitung ist das HSB-Modell. Die Abkürzung steht für Hue, Saturation und Brightness – also Farbton, Sättigung und Helligkeit. Die Farbe wird über den Farbton und die dazu in Abhängigkeit stehenden Werte der Sättigung (S) und Strahlungshelligkeit definiert.  Der zwischen Null und 100 Prozent skalierbare Wert der Sättigung gibt an, wie kräftig die Farbe im Vergleich zu ihrem maximalen Potential ist. Helligkeit bezieht sich auf die Strahlungshelligkeit einer Farbe (0 bis 100 Prozent). Reine Farben haben hohe Helligkeits- und Sättigungswerte, was sie lebendiger erscheinen lässt. Dunkle Farben haben niedrige Helligkeitswerte, wodurch sie schwärzer erscheinen. Wie Sie an der folgenden Abbildung erkennen, können Sie viele Farben allein dadurch erzeugen, dass Sie einen Buntton in verschiedenen Schattierungen von Helligkeit und Sättigung ausgeben.


Die Primärfarben im Webdesign sind Rot, Grün und Blau. Die Sekundärfarben Cyan, Magenta und Gelb ergeben zusammen mit den Primärfarben die sechs verschiedenen Farbbereiche des Farbkreises. Die Werte der Farbtöne sind in Grad (°) angegeben; den Hexadezimalwerten ist eine Raute (#) vorangestellt.

Farbton, Tiefe, Schattierung

Tiefe, Farbton und Schattierung bieten Ihnen weitere Möglichkeiten, Farbunterschiede zu beschreiben. Diese Methode ist weniger kompliziert und leichter verständlich als die komplexe Definition von Helligkeit und Sättigung. Wenn Sie beispielsweise zu einem anderen Designer sagen, ich mag die Farbe, aber ich hätte sie gerne in einer dunkleren Schattierung, weiß ihr Ansprechpartner, dass Sie einen Farbton mit einem höheren Schwarzanteil meinen. Helligkeit und Sättigung basieren auf komplizierteren Modellen und können daher schnell zu Missverständnissen führen. Die folgende Abbildung verdeutlicht die verschiedenen Abstufungen von Farbtönen in Abhängigkeit von Farbtiefe, Farbton und Schattierung.


Unterschiedliche Farbtöne je nach Einstellung von Farbtiefe, -ton und Schattierung

Durch die Kombination von Farbton, Sättigung und Helligkeit können Sie jede für das menschliche Auge wahrnehmbare Farbe kreiern (2).

Farbsysteme

Die meisten Monitore stellen Farben durch das additive Mischen von Farben (Lichtmischung), nämlich der Primärfarben Rot, Grün und Blau dar. In der Vergangenheit haben Maler Rot, Gelb und Blau benutzt, um daraus verschiedene Farben zu mischen. Computersysteme verwenden Rot, Grün und Blau, weil Monitore diese Lichtfarben ausgeben können. Wenn man die drei Farben Rot, Grün und Blau jeweils mit einem Wert von 0 bis 255 ausgibt  – wobei 0 die geringste und 255 die höchste Intensität hat, ergeben sich 16.777.216 verschiedene Farben. Rot, Grün und Blau bei jeweils vollem Anteil gemischt (R 255, G 255, B 255), ergibt rein weißes Licht, während die Abwesenheit der drei Primärfarben beziehungsweise der Wert Null (R 0, G 0, B 0) Schwarz ergibt, was der Abwesenheit von Licht entspricht. Diese Art der additiven Farbmischung wird als RGB-Farbmodell bezeichnet.

Ein Browser interpretiert Farben durch Hexadezimalwerte. Eingeleitet durch das Raute-Zeichen (#) stehen jeweils zwei der sechs Stellen des Codes für einen der RGB-Werte (0 bis 255). Während das untere Ende der RGB-Skala „0“ im Hexadezimalcode durch „00“ wiedergegeben wird, steht für den obersten Wert „55“ im Hexadezimalcode das Zeichenpaar „FF“.

Hexadezimalcode der Primärfarben

  • Rot: #FF0000
  • Grün: #00FF00
  • Blau: #0000FF

Die gängigen Grafikprogramme wandeln HSB- und RGB-Werte automatisch in Hexadezimalcode um. Dennoch macht es Ihr Leben als Designer einfacher, wenn Sie die Zusammenhänge kennen.

Zusammenspiel der Farben – Beispiele aus der Praxis

In der Farbtheorie beziehungsweise Farbenlehre geht es unter anderem darum, das Verhältnis von Farben zueinander und die Effekte verschiedener Kombinationen sowie deren Wirkung auf die Betrachter zu erforschen. Dieser Beitrag wird einige der anerkanntesten Farbschemata und deren Einsatz anhand einiger Beispiele aktueller Websites erläutern. Ein Farbschema zu entwickeln, gehört meist zu den ersten Aufgaben, wenn Sie zueinander passende Farben für ein Design auswählen.

Die folgenden Abbildungen zeigen links oben jeweils eine Palette der Hauptfarben und rechts daneben, deren Position im Farbkreis. Darunter zeigen wir jeweils ein Beispiel aus der Praxis.

Monochrom: Ein Farbton, verschiedene Abstufungen von Sättigung und Helligkeit


Monochromatische Palette


Monochromatisches Farbschema

Analog oder gemischt: Aneinander angrenzende Farbtöne


Analog/Gemischt, Palette


Analog-gemischtes Farbschema

Komplementär: Zwei im Farbkreis exakt gegenüberliegende Farbtöne

Komplementäre Palette


Komplementäres Farbschema

Komplementär – Variante „gesplittet“

Ein Farbton auf einer Seite des Kreises und zwei an dessen gegenüberliegenden Farbton angrenzende Farben auf der anderen Seite des Kreises

Komplementär, gesplittet – Palette

Komplementär, gesplittet – Farbschema

Triade – drei Farben in gleichmäßigem Abstand zueinander


Triade – Palette


Triadisches Farbschema

Gemischtes Doppel – je zwei gegenüberliegende Komplementärfarben

Doppelt komplementär – Palette


Doppelt komplementär -Farbschema

Tetrade: Vier Farben in gleichmäßigem Abstand zueinander

Tetrade – Palette

Tetrade – Farbschema

Analog-komplementär

Zwei gegenüberliegende Komplementärfarben und ein dritter, angrenzender Farbton auf der einen Seite des Kreises


Analog-Komplemäntär-Palette

Analog-komplemäntäres Farbschema

Neutral – gedeckte Farben


Gedeckt – Palette


Gedecktes Farbschema

Akzentuiert: Gedeckte Farben mit einem Highlight

Aus einer Palette gedeckter Farben wird eine mit hoher Sättigung dargestellt.


Akzentuiert -Palette


Akzentuiert – Farbschema

Warme Farben

Farben aus dem oberen Bereich des Farbkreises (zwischen 271 und 90 Grad)


Warme Farben – Palette


Warme Farben -Farbschema

Kalte Farben

Farbtöne aus der unteren Hälfte des Farbkreises (zwischen 91 und 270 Grad)


Kalte Farben – Palette


Kalte Farben – Farbschema

Teil 2 – Vorschau

Ähnlich wie bei Werbegrafiken ist bei der Gestaltung einer Website ganz besonders auf die Wirkung der Farben zu achten. Es geht also nicht nur darum, dass Ihr Webdesign gut aussieht – mit der richtigen Farbe können Sie den Nutzern die Orientierung auf der Website erleichtern, Schaltflächen und Informationen hervorheben oder Kunden zum Kauf anregen. Der zweite Teil des Beitrags über Farben für Webdesign beleuchtet Farbauswahl unter dem Gesichtspunkt der Usability.

Verwendete Literatur

(mm), ™

Sortiert nach:   neueste | älteste | beste Bewertung
georg
Gast
6 Jahre 5 Monate her

sehr schön! danke :-)

dux
Gast
6 Jahre 5 Monate her

Die Aufstellung gefällt mir auch sehr!

SmEe
Gast
SmEe
6 Jahre 5 Monate her

Perfekt! 1a Nachschlagematerial! =)

Danke!

Harry Schmieder
Gast
6 Jahre 5 Monate her

Kann mich nur anschließen. Sehr guter Beitrag. Mann kann einiges lernen und für zukünftige Aufträge nutzen.

fwolf
Gast
6 Jahre 5 Monate her

Sehr sehr guter Beitrag – auch wenn ich das alles sehr wohl schon vor Jahren gelernt habe: Die Beispiele sind als Inspirationsquelle optimal ;)

cu, w0lf.

Heiko Philipp
Gast
6 Jahre 5 Monate her

Super Beitrag und mal wieder sehr informativ.
Gruß
Heiko

Pascal
Gast
Pascal
6 Jahre 5 Monate her

Danke für diesen guten Beitrag!

ThomasO
Gast
6 Jahre 5 Monate her

Schöner Artikel zu Farben, Farbschemata usw. .
Ich denke, das die zu verwendenden Farben zum überwiegenden Teil vom Inhalt der zu entwickelnden Webseite ankommt, wobei durchaus variiert werden kann.
Insofern auch eine gute Auswahl an Beispielen.

Daniel
Gast
6 Jahre 5 Monate her

Link zu den seiten unter „Zusammenspiel der Farben – Beispiele aus der Praxis“ waere noch angebracht damit man sich dan ganze nochmal aus der naehe ansehen kann :)

ConnyLo
Gast
6 Jahre 5 Monate her

Sehr schöne Beispiele von aktuellen Websites* dabei. Das ist anschaulich (typisch für Dr.Web) – danke für die Mühe der Zusammenstellung!
*Und wird als grundlegend sogleich gebookmarked ;-)

Michael
Gast
6 Jahre 5 Monate her

Dieser Artikel hilft mir sehr. Er ist anschaulich, leicht verständlich und hat mich inspiriert, mein nächstes Projekt mit einem oben genannten Farbschema zu starten.

Stephe
Gast
Stephe
6 Jahre 5 Monate her

Guter Artikel. Farben sind seit jeher ein Problem bei mir, deshalb wird dieser Artikel jetzt dauerhaft als Lesezeichen gesetzt ;-)

Manuela Müller
Mitglied
6 Jahre 5 Monate her

@Daniel, Post # 9: Danke für die Anregung.

Im zweiten Teil des Beitrags (erscheint am 22.03.2010), in dem es noch ausführlicher um einzelne Aspekte wie Usability im Zusammenhang mit Farben geht, sind die Beispiele der Websites verlinkt ;-).

Chris
Gast
Chris
6 Jahre 5 Monate her

wirklich brauchbar!

Benjamn
Gast
6 Jahre 5 Monate her

Danke – grundsätzlich sehr hilfreich!

MrsBerry
Gast
6 Jahre 5 Monate her

Vielen Dank für diese tolle Übersicht. Ich werde sie direkt als Favorit abspeichern. Grüße MrsBerry

Dude
Gast
6 Jahre 4 Monate her

…….eigentlich sollte man das ja im Blut haben, aber das ist schon ein ganz guter Leitfaden den Ihr da bereitstellt, vor allem für Jungspunde

Matthias
Gast
6 Jahre 4 Monate her

Wirklich ganz ganz toll beschrieben, sodass ich nun immer auf diesen Artikel verweisen werde, wenn wiedermal jemand etwas zu Farben wissen will.

trackback

[…] inspirierend empfinde. Da hätten wir zuerst eine (nicht vollständige) Ausarbeitung in diesem Blog zu Farbmodellen, der Auswahl von Komplementärfarbe(n) im Farbkreis oder auch Farbvarianten durch […]

wagentur
Gast
wagentur
6 Jahre 3 Monate her

Sehr guter Artikel und so detailliert! Ich spiele immer sehr lange mit den Farbkombinationen.. bis es irgendwann für mein Auge passt…

LG, Mario

Elizabeth
Gast
Elizabeth
6 Jahre 23 Tage her

Die Übersicht hier ist ganz, ganz große Klasse. Danke.

Tim Ehling
Gast
6 Jahre 21 Tage her

Sehr guter Artikel, ich hoffe damit bekom ich ein etwas besseres Design für meine Seite hin.

trackback

[…] Farben auswählen und optimal einsetzen – Experten-Tipps (1) […]

trackback
3 Jahre 11 Monate her

[…] […]

Daniel Scherer
Gast
Daniel Scherer
3 Jahre 10 Monate her

Sehr guter Artikel, vielen Dank!

André Fiebig
Gast
3 Jahre 4 Monate her

Ich sehe den Link zum zweiten Teil nicht. Was mache ich falsch?

Melchior
Gast
3 Jahre 3 Monate her

Danke. Sehr hilfreich.

Oliver
Gast
Oliver
2 Jahre 11 Monate her

Sehr schöner Artikel, allerdings kommt mir vor, als hätte sich ein Fehler eingeschlichen, oder ich hab’s nicht ganz verstanden.
Bei: Analog-Komplementär: Schreibt Ihr von zwei „gegenüberliegenden Komplementärfarben“. Tatsächlich scheint die gezeigte Farbpalette aus rötlichen und „gegenüberliegenden“ cyan-Tönen zu bestehen. Der gezeigte Farbkreis allerdings zeigt die beiden „Hauptfarben“ Rot und GRÜN und nicht das meines erachtens zum ROT „komplementäre“ CYAN. Auch sprecht Ihr dann von einem angrenzenden Farbton „auf einer Seite des Kreises“. Das Komplementärpaar müsste also den Kreis in zwei Seiten teilen und nicht in einen Drittelsektor und einen Zweidrittelsektor. Oder habe ich da etwas falsch verstanden?

trackback

[…] übri­gens blau, die unbe­lieb­teste Farbe braun. >Quelle< Bezüg­lich Far­ben ist das hier (wie ich finde) eine ziem­lich […]

trackback

[…] Kaffeetafel aus Motivtorten, Cupcakes und Keksen fur Anfanger und Fortgeschrittene* Farbschemata: http://www.drweb.de/magazin/farben-auswahlen-und-optimal-einsetzen-experten-tipps-nicht-nur-furs-web&#8230; (30.08.2012) Farbenlehre allgemein: http://www.kunstkurs-online.de/Seiten/malen/farbenlehre.php […]

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen