Schritt für Schritt lernen
die eigene Website zu erstellen

Jetzt das HTML-Seminar als
Video-Tutorial mit über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

Videokurs HTML + CSS + Webdesign erstellen

Farbtheorie - finden von harmonischen Farben für das Website-Design

Warum Theorie? - Darüber kommt man schnell zu einer harmonischen Farbzusammenstellung für die eigene Website.

In der Farbentheorie gibt es zahlreiche Ansätze, Definitionen und Richtungen. Hier werden die Basics und anhand einem Modell die Zusammenhänge aufgezeigt, damit eine schnelle harmonische Farbauswahl für Websites erreicht werden kann.

traditioneller Farbkreis von Sir Isaac Newton

Der traditionelle Farbkreis (rot, gelb und blau) wurde von Sir Isaac Newton entwickelt.

Es basiert auf einer logisch geordneten Reihenfolge von reinen Farben.

Farbkreis mit Primär-Farben Rot, Gelb und Blau
Primär-Farben
Rot, Gelb und Blau

Diese 3 Farben (bei Pigmentfarben) können nicht durch irgendwelche Kombinationen anderer Farben gemischt und angezeigt werden - daher Primärfarben.

Alle weiteren Farben entstehen durch Mischen von 2 nebeneinander liegenden Farben. Beim Mischen von gelb und rot entsteht orange usw.

Farbkreis zusätzlich mit Sekundär-Farben
Sekundär-Farben
Grün, Orange, Violett (Purple ?)

Die Sekundär-Farben entstehen durch das Mischen der Primär-Farben.

Farbkreis mit Tertiär-Farben
Tertiär-Farben

Durch Mischen der Primär- und Sekundärfarben entstehen Tertiär-Farben und der Farbkreis wird komplettiert.

Nutzwert - aus dem Farbkreis zur Farbzusammenstellung

Es gibt verschiedenste Theorien für Harmonien. Im Folgenden zwei weit verbreitete Methoden.

Analoge Farben

Die Farbenzusammenstellung basiert auf analogen Farben. Aus dem Farbkreis werden 3 aneinander grenzende Farben ausgewählt.

Foto mit analoge Farben und Farbkreis

In der Regel herrscht eine der 3 Farben vor.

Komplementär-Farben

Aus dem Farbkreis wird die gegenüberliegende Farbe ausgewählt - die komplementäre Farbe also.

Foto mit Komplementär-Farben und Lage auf Farbkreis

Die im Farbkreis gegenüberliegende Farbe erzeugt einen maximalen Kontrast.

Auf Basis der Farben können auch gezielt passende Bilder und Fotos ausgewählt werden.

Tools zu Farbenwahl

Adobe Kukuler

Der Adobe Kukuler bietet einem die Möglichkeit sich selber Farbkombinationen zusammenstellen. Auf der Startseite auf den ersten Menüpunkt „Create“ gehen und dann das Regelwerk auswählen, ob analoge, Monochrome oder Farben mit Winkelspreizung genutzt werden soll. Möchte man alle Farben weniger kräftig haben, den Farbpunkt mit weißem Kreis nach ihnen ziehen. Viel Spaß beim Spielen. Beim Verwenden der Farben bitte erst noch einen Blick in die AGBs der Seite werfen!

http://kuler.adobe.com

Adobe Kukuler zur harmonischen Farbauswahl Adobe Kukuler zur harmonischen Farbauswahl

ColorSchemeDesigner

Eine weitere schöne Anwendung ist der ColorSchemeDesigner. Auch hier können die Farben nach verschiedenen Regeln mathematisch berechnet werden. Zusätzlich kann man auf den Farbflächen Text einblenden um die Lesbarkeit abschätzen zu können und mit den gewählten Farben eine Demowebsite aufrufen. Sehr interessant – einfach einmal ansehen.

http://www.colorschemedesigner.com

ColorSchemeDesigner in Aktion ColorSchemeDesigner in Aktion

Facebook und Google+

Sehr geehrte Nutzer/innen dieser Website! Wir würden uns freuen, wenn Sie uns durch Facebook oder Google+ unterstützen würden - sei es durch ein Like/+1 oder das Teilen dieser Seite. Allerdings legen wir Wert auf Datenschutz und möchten nicht, dass diese Netzwerke Daten von Ihnen erhalten, sollten Sie dies nicht wünschen. Deshalb sind die entsprechenden Buttons bei uns standardmäßig deaktiviert.

Durch einen Klick auf einen der unteren Buttons stimmen Sie der Nutzung/Speicherung Ihrer Daten (in uns unbekanntem Ausmaß, uns unbekannten Orten und uns unbekannter Weise) zu und erhalten Zugriff auf die Buttons. Wir bitten um Ihr Verständis und freuen uns über Ihre Unterstützung :)

eBook HTML-Seminar.de Videokurs HTML + CSS + Webdesign erstellen

Video-Tutorial: über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

© 2000-2014 Axel Pratzner • www.html-seminar.de • Stand 2.1.2014
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de