Farben im Webdesign   

Basic's aus der Farbtheorie - eigene Farbpaletten erstellen

Farben sind ein wesentlicher Faktor im Webdesign. Die optimale farbliche Gestaltung spricht im Idealfall den Besucher an und hilft ihm sich auf der Webseite zurecht zu finden. Farbe und Inhalt senden die gleiche Botschaft an den Besucher, der die wichtigsten Elemente, die Struktur der Webseite sofort erkennt, und so die für interessanten Inhalte finden kann. Positive Gefühle werden ausglöst und der Besucher kann zu Handlungen animiert werden.

Vorrausetzung hierfür ist eine optimale und gut durchdachte Farbpalette für die Webseite..Auch wenn die Geschmäcker verschieden sind, oder durch vorgegebene Firmenfarben / CI's bereits ein farblicher Rahmen vorgegeben ist, kann man durch die geschickte Auswahl ansprechende und überzeugende Farbkombinationen erzeugen.

Die Regeln der Farbheorie helfen harmonische Farbkombinationen zu finden und Farbpaletten für die Webseite zu erstellen, damit das Gesamtbild der Webseite professionell und überzeugend wirkt. Erst im Zusammenspiel miteiander werden Farben wirklich interessant, erzeugen Spannung oder Entspannung, sprechen unsere Gefühle an oder zeigen uns einfach nur den Weg durch die Webseite.

In der Farbtheorie, mache sagen auch Farblehre dazu, geht es um das Verhältnis der Farben zueinander. Die Effekte die Farben miteinander erzielen und wie diese Kombinationen auf den Betrachter wirken. Einfache Regeln erleichtern das kombinieren der Farben sowie die Erstellung einer eigenen Farbpalette für die Webseite.

Ist das eigene Fabschema gefunden kann man damit viele Möglichkeiten durchprobieren, z.b. den dunkelsten Ton für die Überschriften, die helle mittleren Töne um die Webseite zu strukturieren, Inhalt von Navigation zu trennen. Starke und weniger starke Kontraste für die Spannung, kräftige Farben um das Auge des Betrachters auf bestimmte Punkte zu lenken usw.

Wenn Sie schon immer wissen wollten was ist ein monochromes oder analoges Farbschemata, oder wie macht man aus einem Komplementärkontrast einen doppelten oder gesplitteten Komplemetärkontrast, und wie ist das eigentlich mit einer Triade und einem Farbdreiklang, dann dann finden sie unten viele Beispiele und praktische Tipps.

Monochrom – Ein Farbton in verschiedenen Abstufungen von Sättigung und Helligkeit. Diese Abstufungen erzeugen Kontraste. Monochrome Webseiten wirken ausgewogen und harmonisch, die Spannung wird durch die Kontraste erzeugt.

Name Basis Farbe 1 Stufe heller 2 Stufen heller 3 Stufen heller
yellow #FFFF00
 
#FFFF4D
 
#FFFF99
 
#FFFFE5
 

Bei diesem Beispiel HTML Layout wird die Basis Farbe yellow für Überschrift und Rahmen verwendet, die Abstufungen von yellow für die Hintergundflächen.

Dieses einfache Beispiel HTML Layout zeigt, wie man eine monochrome Farbpalette einsetzen kann.

Der Hintergrund in diesem Bereich ist die Farbe #FFFF4D, 1 Abstufung heller als die Ausgangsfarbe yellow.

Hier wird ein monochromes Farbschema verwendet

Die Überschrift oben ist die Farbe #FFFF00, die Ausgangsfarbe yellow.

Der Hintergrund in diesem Bereich ist die Farbe #FFFFE5, die hellste Version von yellow aus obiger Farbpalette.

Die Hintergrundfarbe in diesem Absatz ist #FFFF99, 2 Abstufungen heller als die Basis Farbe yellow.

Monochrome Farbpaletten wirken ausgewogen und beruhigend. Der Mangel an Kontrast macht es schwer den Blick auf bestimmte Bereiche zu fixieren und lenken.

  

Komplementär – Zwei im Farbkreis gegenüberliegende Farbtöne, also 2 Farben die im Farbkreis um 180° voneinander entfernt sind, bzw. in einem 180° Winkel zueinander.stehen.
Das können Farbenpaare wie Gelb/Violett, Rot/Grün, Orange/Blau oder Türkis/Rot-Orange sein

Name Basis Farbe 1 Stufe heller 2 Stufen heller 3 Stufen heller
yellow #FFFF00
 
#FFFF4D
 
#FFFF99
 
#FFFFE5
 
wild violet #820BBB
 
#B533F3
 
#D58DF8
 
#F6E7FE
 

Das Beispiel HTML Layout verwendet die Basis Farbe wild violet und ihre Abstufungen als Hauptfarben. Die gelben Töne werden für Hervorhebungen eingesetzt. Komplemetäre Farbenpaare ergeben starke Kontraste, da sie sich im Farbkreis gegenüberliegen.

Dieses einfache Beispiel HTML Layout wurde mit einer komplementären Farbpalette gestaltet.
Dieser Satz wurde mit der Hintergrundfarbe #FFFF99 markiert, die 2 Stufen heller als die Ausgangsfarbe yellow ist.

Der Hintergrund in diesem Bereich ist die Farbe #D58DF8, 2 Stufen heller als die Basis Farbe wild violet.

Hier wird ein komplementäres Farbschema verwendet

Die Überschrift oben ist die Farbe #FFFF00, die Ausgangsfarbe yellow.

Der Hintergrund in diesem Bereich ist die Farbe #F6E7FE, die hellste Version von wild violet.

Die Hintergrundfarbe dieser Box ist #FFFFE5, die hellste Version von yellow.

Eine komplementäre Farbpalette besteht aus 2 Farben, die in einem starken Kontrast zu einander stehen.

Für harmonische komplementäre Farbpaletten, sollte man eine Farbe als dominante Farbe zur Gestaltung von Hintergrund und Flächen verwenden, die komplementäre Farbe um leuchtene Highlights zu setzen.

  

gesplittet komplementär – die Basisfarbe wird mit 2 Farben, die neben der Komplimentärfarbe liegen, ihren Nachbarfarben also kombiniert. Man kann auch sagen die Komplimentärfarbe wird geteilt, d.h. Gelb wird zu Grün und Orange aufgesplittet, oder Rot zu Rot-Violett und Rot-Orange. Da komplementäre Farbpaletten oft viel Spannung haben, hilft der Split der Komplementärfarbe um den Kontrast zu mildern.

Name Basis Farbe 1 Stufe heller 2 Stufen heller 3 Stufen heller
wild violet #820BBB
 
#B533F3
 
#D58DF8
 
#F6E7FE
 
chartreuse verte #BCE937
 
#D0EF72
 
#E4F6AD
 
#F7FCE8
 
mustard #FFCC11
 
#FFDB58
 
#FFEA9F
 
#FFFAE5
 

Hauptfarbe ist wieder wild violet mit seinen Abstufungen, zusätzlich werden auch Abstufungen der gesplitteten Komplementärfarbe eingesetzt.

Dieses einfache Beispiel HTML Layout zeigt wie man eine gesplittet, komplementäre Farbpalette verwenden kann. Dieser Satz wurde mit der Hintergrundfarbe #E4F6AD markiert, die 2 Stufen heller als die Ausgangsfarbe chartreuse verte ist.

Der Hintergrund in diesem Bereich ist die Farbe #D58DF8, 2 Stufen heller als die Ausgangsfarbe wild violet.

Hier wird ein gesplittet, komplementäres Farbschema verwendet

Die Überschrift oben ist die Farbe #FFCC11, die Ausgangsfarbe mustard.

Der Hintergrund in diesem Bereich ist die Farbe #F6E7FE, die hellste Version von wild violet.

Die Hintergrundfarbe dieser Box ist #FFFAE5, die hellste Version von mustard.

Diese gesplittet, komplementäre Farbpalette verwendet eine Basisfarbe und 2 komplemtäre zuätzliche Farben.

Für harmonische teilkomplementäre Farbpaletten, sollte man eine Farbe als dominante Farbe zur Gestaltung von Hintergrund und Flächen verwenden, die komplementäre, gesplitteten Farben um leuchtene Highlights zu setzen.

Vergleicht man dieses Beispiel, mit dem oben, das mit der komplementären Farbschema erstellt wurde, ist zu erkennen wie ruhig eine gesplittet, komplementäre Farbpalette im Vergleich zu einer komplementäre Farbpalette wirkt.

  

doppelt Komplementär – Basisfarbe und Komplementärfarbe werden gesplittet und daraus werden 2 komplementäre Farbenpaare gebildet. d.h. das Gelb wird zu Grün und Orange aufgesplittet, Violett zu Blau und Lila.
Je grösser der Abstand zwischen den Basisfarben ist, desto unruhiger wird es. z.b. ein Abstand im 90° Winkel zeigt z.B. die Farben Gelb/Blau/Grün/Rot - sehr unruhig wirkt das.
Je geringer der Abstand zwischen den Basisfarben desto weniger Spannung und harmonischer beim Betrachten z.B. die Paarungen Rot/Rot-Orange und Grun/Blau-Grün.

Name Basis Farbe 1 Stufe heller 2 Stufen heller 3 Stufen heller
chartreuse verte #BCE937
 
#D0EF72
 
#E4F6AD
 
#F7FCE8
 
mustard #FFCC11
 
#FFDB58
 
#E8EAFA
 
#FFFAE5
 
turnip #A74CAB
 
#C380C6
 
#DDB7DF
 
#F7EDF7
 
blue deep #380474
 
#7108E9
 
#B171FA
 
#F1E6FE
 

Für das Beispiel HTML Layout, wird chartreuse verte und dessen Abstufungen, als dominierende Hauptfarbe verwendet. Die Kontraste werden durch die komplementären Farben erzeugt.

Dieses einfache Beispiel HTML Layout zeigt wie man eine doppelt, komplementäre Farbpalette einsetzen kann.

Dieser Absatz wurde mit der Hintergrundfarbe #FFCC11 mustard markiert, der komplementäre Farbe zu chartreuse verte.

Der Hintergrund in diesem Bereich ist die Farbe #BCE937, chartreuse verte.

Hier wird ein doppelt, komplementäres Farbschema verwendet

Die Überschrift oben ist die Farbe #A74CAB, turnip.

Der Hintergrund in diesem Bereich ist die Farbe #F7FCE8, der hellste Version von chartreuse verte.

Die Hintergrundfarbe dieser Box ist #B171FA, 2 Stufen heller als die Ausgangsfarbe blue deep.

Diese doppelt, komplementäre Farbpalette besteht aus 2 komplementären Farbenpaaren.

Die Grundfarbe und ihre Abstufung dominieren die Hauptflächen, die anderen werden zur Erzeugung von Higlights eingesetzt

   

Analoge Farbpaletten - ergeben sich aus Farben die im Farbkreis nebeneinander liegen.
Das Nebeneinander kann eng oder weit sein. z.B. Rot/Rot-Orange/Rot oder auch Violett/Rot/Orange Je dichter die Farbtöne beieinander liegen desto harmischer und ruhiger werden sie empfunden.

Name Basis Farbe 1 Stufe heller 2 Stufen heller 3 Stufen heller
yellow #FFFF00
 
#FFFF4D
 
#FFFF99
 
#FFFFE5
 
yolk54 #FFE600
 
#FFEE4D
 
#FFF599
 
#FFFDE5
 
pear #D1E231
 
#DFEB6E
 
#ECF3AB
 
#FAFCE9
 

Für das Beispiel HTML Layout wird yolk54 und dessen Abstufungen als dominierende Hauptfarbe eingesetzt. Für die Highlight werden mit den Abstufungen von yellow und pear gestaltet.

Dieses einfache Beispiel HTML Layout zeigt wie man eine analoge Farbpalette verwenden kann. Dieser Satz wurde mit der Hintergrundfarbe #DFEB6E markiert, die 1 Stufe heller als die Ausgangsfarbe pear ist.

Der Hintergrund in diesem Bereich ist die Farbe #FFF599, 2 Stufen heller als die Ausgangsfarbe yolk54.

Hier wird ein analoges Farbschema verwendet

Die Überschrift oben ist die Farbe #FFE600, die Ausgangsfarbe yolk54.

Der Hintergrund in diesem Bereich ist die Farbe #FFFDE5, die hellste Version von yolk54

Die Hintergrundfarbe dieser Box ist #FFFF00, die Ausgangsfarbe yellow.

Diese analoge Farbpalette verwendet 3 Farben, die im Farbkreis nebeneinander liegen.

Je näher desto harmonischer und ruhiger wirkt die Farbpalett. Wählt man einen weiteren Abstand kann ein Kontrast entstehen.

Wählen Sie eine dominierende Farbe für grosse Bereiche. Verwenden sie die anderen Farben um farbige Akzente und Blickpunkte zu setzen.

  

Triade – besteht aus 3 Farben die im Abstand von 120 ° angegordent sind.
Beispiel Gelb/Rot/Blau oder Grün, Orange, Violett. Dies sind vibrirende Kontrastie voller Energie. Hier besteht schnell die Gefahr dass es zu bunt wirkt

Name Basis Farbe 1 Stufe heller 2 Stufen heller 3 Stufen heller
yellow #FFFF00
 
#FFFF4D
 
#FFFF99
 
#FFFFE5
 
red #FF0000
 
#FF4D4D
 
#FF9999
 
#FFE5E5
 
blue #0000FF
 
#4D4DFF
 
#9999FF
 
#E5E5FF
 

Hier eine Möglichkeit um dieses spannungsgeladene Farbkombination zu verwenden

Dieses Beispiel HTML Layout zeigt wie man eine Farbpalette aus einem Farbdreiklang / Triade verwenden kann. Dieser Satz wurde mit der Hintergrundfarbe #FFFF99 markiert, sie ist 2 Stufen heller als die Ausgangsfarbe yellow.

Der Hintergrund in diesem Bereich ist die Farbe #FF9999, 2 Stufen heller als die Ausgangsfarbe red.

Hier wird ein Triaden Farbschema verwendete

Die Überschrift oben ist die Farbe #0000FF, die Ausgangsfarbe blue.

Der Hintergrund in diesem Bereich ist die Farbe #FFE5E5, die hellste Version von red.

Die Hintergrundfarbe dieser Box ist #E5E5FF, 3 Stufen heller als die Ausgangsfarbe blue.

Dieses Farbschema besteht aus 3 Farben, die im 120° Winkel voneinander entfernt sind.

Im Farbdreiklang bilden die Farben immer starke Kontraste zueinander.

Eine dominierende Hauptfarbe für grosse Bereiche und Flächen verwenden, die anderen Farben um farbige Akzente und Blickpunkte zu setzen.


 

weitere Themen

weitere

Service

Facebook & Co.