Grundlegendes zu Farben und Webfarbschemata

01 von 10

Grundlegendes zu Farben und Webfarbschemata

Es gibt vier grundlegende Farbschemata, die Sie für eine Website verwenden können. Jede Seite dieses Artikels zeigt ein Bild des Farbschemas und wie Sie ein ähnliches Schema in Photoshop erstellen können.

• monochromatischVerwenden Sie Farben des gleichen Farbtons. Sie können unterschiedliche Farbtöne oder Schattierungen aufweisen, je nachdem, wie viel Weiß oder Schwarz hinzugefügt wird.
• analogHierbei werden Farben verwendet, die im Farbkreis nahe beieinander liegen.
• komplementärDies wird oft als "gegenüberliegend" angesehen, da sich die beiden Farben in einem komplementären Farbschema auf dem Farbkreis gegenüberliegen.
• TriadischDiese Farben sind gleichmäßig auf dem Farbkreis angeordnet.

Alle Farbschemata verwenden dieses Gelb als Grundfarbe.

02 von 10

Monochromatisches Web-Farbschema

Dieses Farbschema verwendet das senfgelbe Gelb meiner Basisfarbe und fügt etwas Weiß und Schwarz hinzu, um den Farbton zu färben und das Schema entsprechend zu schattieren.

• oben links - die Basisfarbe # ffe500
• Oben rechts - 50% weiße Füllung hinzugefügt, um # fff280 zu erhalten
• unten links - 75% weiße Füllung hinzugefügt, um # fff8bf zu erhalten
• Unten rechts - 50% schwarze Füllung hinzugefügt, um # 7f7200 zu erhalten

Monochromatische Farbschemata sind bei allen Farbschemata oft die einfachsten. Die sanften Farb- und Schattierungsänderungen lassen die Farben besser ineinander übergehen. Verwenden Sie dieses Farbschema, damit Ihre Website flüssiger und gesammelt erscheint.

03 von 10

Einfarbiges Web-Farbschema

Ein Quadrat von 20% Schwarz wurde hinzugefügt, um mehr Farben im Schema zu erhalten. Durch das Hinzufügen von Schwarz oder Weiß zu Ihren Farben können Sie Ihrer Palette eine neue Farbe hinzufügen, ohne den Farbton der Seite zu beeinträchtigen.

04 von 10

Analoges Web-Farbschema

Dieses Farbschema nimmt die gelbe Grundfarbe und addiert und subtrahiert den Farbton in der Photoshop-Farbpalette um 30 Grad.

• oben links - die Basisfarbe # ffe500
• oben rechts - +30 Grad, um # 99ff00 zu erhalten
• unten links - -30 Grad, um # ff6600 zu erhalten
• unten rechts - 100% weiß #ffffff

Analoge Farben können sehr gut zusammenarbeiten, aber manchmal können sie stark miteinander kollidieren. Stellen Sie sicher, dass Sie diese Programme mit mehr Personen als Ihnen, Ihrer Familie und Freunden testen. Wenn sie arbeiten, erstellen sie eine Site, die farbiger als das monochromatische Schema ist, aber fast ebenso flüssig ist.

05 von 10

Analoges Web-Farbschema

Ein Quadrat von 20% Schwarz wurde hinzugefügt, um mehr Farben im Schema zu erhalten.

06 von 10

Komplementäres Web-Farbschema

Komplementäre Farbschemata haben im Gegensatz zu anderen Farbschemata normalerweise nur zwei Farben. Die Grundfarbe ist auf dem Farbkreis gegenüberliegend. Mit Photoshop können Sie einfach die Komplementärfarbe erhalten. Wählen Sie einfach den gewünschten Farbbereich aus und drücken Sie Strg-I. Photoshop wird es für Sie invertieren. Stellen Sie sicher, dass Sie dies auf einer duplizierten Ebene tun, damit Sie Ihre Grundfarbe nicht verlieren.

• left - die Basisfarbe # ffe500
• richtig - die Ergänzung # 001aff

Komplementäre Farbschemata sind oft viel auffälliger als andere Farbschemata, verwenden Sie sie daher mit Vorsicht. Sie werden meistens bei Stücken verwendet, die hervorstechen müssen.

07 von 10

Komplementäres Web-Farbschema

Um diese Version zu erhalten, habe ich der unteren Hälfte der Farben 50% Weiß und dem mittleren Quadrat 30% Schwarz hinzugefügt. Wie Sie sehen, haben Sie einige weitere Optionen, aber es ist immer noch ein ergänzendes Farbschema.

08 von 10

Triadisches Web-Farbschema

Triadische Farbschemen bestehen aus 3 Farben, die mehr oder weniger gleichmäßig um den Farbkreis herum angeordnet sind. Da ein Farbkreis 360 Grad hat, habe ich wieder das Farbtonfeld in der Farbauswahl verwendet, um 120 Grad von der Basisfarbe hinzuzufügen und zu entfernen.

• oben links - die Basisfarbe # ffe500
• oben rechts - +120 Grad, um # e500ff zu erhalten
• unten links - -120 Grad, um # 00ffe6 zu erhalten
• unten rechts - 100% weiß #ffffff

Triadische Farbschemata erzeugen oft sehr lebendige Webseiten. Aber als komplementäre Farbschemata können sie Menschen unterschiedlich beeinflussen. Stellen Sie sicher, dass Sie testen.

Sie können auch tetradische oder vierfarbige Farbschemata erstellen, bei denen die Farben gleichmäßig um den Farbkreis verteilt sind.

09 von 10

Mehr Triadic Web Color Scheme

Wie bei den anderen Beispielen fügte ich den Farben ein 30% schwarzes Quadrat hinzu, um die zusätzlichen Farbtöne zu erhalten.

10 von 10

Diskordante Web-Farbschemata

Schönheit liegt im Auge des Betrachters, aber es ist eine unglückliche Tatsache, dass nicht alle Farben zusammen passen. Diskordante Farben sind Farben, die im Farbkreis um mehr als 30 Grad voneinander entfernt sind und nicht komplementär sind oder Teil eines Dreiklanges sind.

Diskordante Farbschemata können sehr schockierend sein und sollten nur verwendet werden, um Aufmerksamkeit zu erzeugen. Denken Sie daran, dass die Aufmerksamkeit, die Sie erhalten, möglicherweise nicht genau das ist, wonach Sie suchen, da diese Farben häufig kollidieren.