Farben für Webseiten zusammenstellen

Farben gehören zur Gestaltung von Webseiten, sie erzeugen Aufmerksamkeit, Emotionen und senden Nachrichten.

Mit einfachen Regeln entsteht eine Farbkombination auf der Basis einer Farbe – etwa aus einem Logo, der neuen Trendfarbe oder einer Signalfarbe.

Farben stehen immer in Beziehung zu anderen Farben. Ein klassisches Verfahren zur Entwicklung einer Farbkombination wählt eine Farbe aus dem Logo des Unternehmens. Aus dieser Grundfarbe lassen sich verschiedene Farbpaletten zusammenstellen.

Vereinfachter Farbkreis mit HSL-Farben von 0 bis 330

Der Farbkreis ist das klassische Instrument für das Zusammenstellen von Farben. Auf einer geraden Linie vom Mittelpunkt zum Rand liegt eine Farbe – z.B. ein Rot- oder Gelbton –, aber Helligkeit und Sättigung variieren. Alle Farben mit gleicher Helligkeit und Sättigung liegen auf einem Kreisradius.

Monochrome Palette

Eine monochrome Farbpalette beruht auf hellen und dunklen Tönen einer Farbe. Eine monochrome Palette braucht kräftige Kontraste.

Ausschnitt: Blautöne von gesättigt über Pastell bis hell und fast weiß
Drei Farbfelder in Blautönen mit starkem Kontrast

Analoge Palette

Eine analoge Farbpalette nimmt Farben rechts und links der Grundfarbe auf und braucht weniger Kontrast. Die Farben der analogen Palette verbindet ein gemeinsamer Unterton – hier ist das Blau in allen Farben vertreten.

Zwei Ausschnitte aus dem Farbkreis mit geringem Abstand

Komplementäre Palette

Eine komplementäre Farbpalette besteht nur aus der Grundfarbe und ihrer Komplementärfarbe, die allein für den Kontrast sorgt.

Zwei Ausschnitte aus dem Farbkreis mit geringem Abstand

Komplementär-analog Palette

Eine komplementär analoge Farbenpalette nimmt die Farben auf der linken und rechten Seite der Komplementärfarbe und braucht nur geringe Kontraste für eine starke Wirkung.

Drei Ausschnitte aus dem Farbkreis komplementär und zwei mit geringem Abstand

Unbeliebte Farbkombinationen

Es gibt Kombinationen, die bei vielen Betrachter nicht gut ankommen – als störend und unpassend empfunden werden. Solche Farbkombinationen entstehen z.B., wenn helle Farben abgedunkelt und dunkle Farben aufgehellt werden.

Wir ordnen den Farben Helligkeiten zu: Gelb ist eine helle Farbe, Rot und Grün haben etwa dieselbe Helligkeit und liegen im Mittelfeld, während wir Blau als dunkle Farbe sehen.

Bei der Umwandlung eines Farbverlaufs in ein Graustufenbild wird die Helligkeit sichtbar, die wir einer Farbe zuordnen. Farbkombinationen, die gegen dieses Helligkeitsempfinden wirken, werden meist als unpassend und sogar als unangenehmen empfunden.

Graustufen geben die Helligkeiten der Farben wieder. Ein dunkles Gelb mit einem hellen Blau erzeugt also eine Disharmonie. Farbgestalter bezeichnen diesen Effekt als »Farbinversion«.

 
 
 
 
 
 
 
 

Kombinationen aus dunklen hellen Farben mit hellen dunklen Farben

Das soll aber nun nicht heißen, dass Farbinversionen nicht benutzt werden sollten. Künstler arbeiten mit Farbinversionen, um bestimmte Gefühle zu erzeugen.

RGB ist für den Monitor, HSB ist für Grafiker

Grafiker und Fotografen kennen RGB – das Farbmodell für Computer und Monitor. Auch wenn RGB rund um den Computer überall auftaucht, ist RGB für das Design ungeeignet: RGB hat keine Helligkeitkomponente und kein Maß für die Brillanz oder Sättigung der Farbe. Darum bieten Bildbearbeitungsprogramme, Grafikprogramme und selbst HTML und CSS, die Sprache der Webseiten, ein anderes Modell: HSL oder HSV.

In HSL / HSV gibt es 360 Farbtöne und für jeden Farbton 100 Helligkeitsstufen und 100 Stufen für die Sättigung oder Brillanz. Die 360 Farbtöne dieser Farbmodelle bilden den Farbkreis, mit dem Grafiker und Designer Farben zusammenstellen.

Farbnamen und Farbcodes

Bildbearbeitungs- und Grafikprogramme nutzen mehrere Codes für Farben. HSL / HSB sind zwei solcher Codes, weitere sind RGB, CMYK und Hex. Der meist verwendete Code ist Hex, der mit # beginnt. #ffffff steht z.B. für Weiß, #8eccd6 für ein helles bläuliches Türkis.

Tags