Farben im Webdesign
Basic's aus der Farbtheorie - eigene Farbpaletten erstellen
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 verwendetDie Ü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. Der Hintergrund in diesem Bereich ist die Farbe #D58DF8, 2 Stufen heller als die Basis Farbe wild violet. |
Hier wird ein komplementäres Farbschema verwendetDie Ü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. |
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 verwendetDie Ü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. Der Hintergrund in diesem Bereich ist die Farbe #BCE937, chartreuse verte. |
Hier wird ein doppelt, komplementäres Farbschema verwendetDie Ü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. |
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 verwendetDie Ü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. 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 verwendeteDie Ü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. Eine dominierende Hauptfarbe für grosse Bereiche und Flächen verwenden, die anderen Farben um farbige Akzente und Blickpunkte zu setzen. |
Weitere Themen in der Rubrik Webdesign
- Sicher ist sicher - die 216 websicheren Farben
- Farben fürs Web definieren. RGB, HSL, RGBA oder HSLA, per HTML und CSS ergeben
- Basic's aus der Farbtheorie - eigene Farbpaletten erstellen
- RGBA, HSLA und CSS opacity - gibt Farben Transparenz
- Das Web wird bunt! The Sixteen Named Colors, - die VGA Farbpalette und 16 Grundfarben
- Farben im Webdesign - Das Farbspektrum mit Hex-Codes
- Farbpaletten von eigenen Bildern
Pflanzzeiten 2024
Juli
05.07. 02:00 Uhr bis 19.07. 12:00 Uhr
August
01.08. 09:00 Uhr bis 15.08. 21:00 Uhr
*****
Gründüngung
Tipps aus der Paxis
*****
Serie über Urpflanzen
Algen und Flechten
Die mutigen Landgänger
*****
Moose
die harten Arbeiter, die ständig neuen Lebensraum schaffen
*****
Chlorophyll
Der Stoff aus dem das Leben ist
*****