koder.de

Neben all den technischen Finessen beim Webdesign wird gerade die Wahl von passenden Farben häufig vernachlässigt. Es wird geradezu so getan, als ob eine gelungene Farbkomposition eher ein Produkt des Zufalls ist.

Dieser Artikel soll als eine kleine Einführung für eine Artikelreihe über die Theorie und Praxis der Farbgestaltung von Websites dienen. Zusammen mit den wichtigen Farbmodellen stelle ich einige Tools vor, die einem die Arbeit leichter machen sollen.

Das Hue-Saturation-Brightness Farbmodell

Farben im HSB-Modell werden durch 3 Anteile definiert, die den Farbton (Hue), die Sättigung (Saturation) und die Helligkeit (Brightness) festlegen. Diese Angaben entsprechen am ehesten dem menschlichen Empfinden von Farbe. Ähnliche Modelle sind HSV (V=Value), HSL (L=Lightness) und HSI (I = Intensity), die dem gleichen Prinzip entsprechen.

Im Beispiel sieht man die Auswahl eines hellen Rot-Tons im HSB-Modell. Durch die Regler wäre es sehr einfach eine dunklere oder eine gesättigtere Farbe auszuwählen.

Das Rot-Grün-Blau Farbmodell

Im eher technischen RGB-Modell werden Farben mit ihrem Rot-, Grün- und Blau-Anteil angegeben. Dies entspricht weniger unserem Gefühl für Farben und ist daher für die Auswahl und farbliche Abstimmung nicht wirklich geeignet. Es ist daher oft zweckmäßig, die Farbe zunächst im HSB-Modell auszuwählen und dann vom verwendeten Programm in die entsprechende RGB-Angabe umrechnen zu lassen.

Bei der Angabe eines RGB-Werts in CSS 2 sind außerdem noch 3 verschiedene Variationen möglich:

• Als 24 Bit Wert in Hexadezimal-Schreibweise, wobei jeder Farbanteil durch 8 Bit repräsentiert wird.
• Als 24 Bit Wert in Dezimal-Schreibweise, mit auch wieder 8 Bit je Farbanteil.
• Als 12 Bit Wert in Hexadezimal-Schreibweise, mit 4 Bit je Farbanteil.

Umrechnen zwischen HSB und RGB

Das Auswählen von Farben und Umrechnen zwischen den Farbmodellen geht zum Beispiel sehr gut mit dem Firefox-Addon “ColorZilla”. Außerdem bringt es auch gleich noch eine Funktion zur Bestimmung des Farbwertes eines beliebigen Punktes im Browserfenster mit.

Farben beim Namen nennen

In CSS können Farben auch anhand des Namens der Farbe angegeben werden.

Beispiele für Farbangaben in CSS 2:

Name der Farbe	RGB 12Bit Hex	RGB 24Bit Hex	RGB 24Bit Dezimal	Farbe
black	#000	#000000	rgb(0, 0, 0)
white	#fff	#ffffff	rgb(255, 255, 255)
yellow	#ff0	#ffff00	rgb(255, 255, 0)
maroon	nicht möglich	#800000	rgb(128, 0, 0)
fuchsia	#f0f	#FF00FF	rgb(255, 0, 255)

Auf colorlovers.com gibt es eine kleine Referenz der verschiedenen Farbnamen und der zugehörigen RGB-Werte. Dort findet man auch eine große Auswahl an Farbpaletten, die eine bestimmte Farbe beinhalten.

Farben im Druckbereich

Das für die Angabe von Druckfarben übliche CMYK-System sei hier auch noch der Vollständigkeit halber erwähnt. Aber egal, wie man die Farbwerte angibt, sie werden am Ende auf unterschiedlichen Bildschirmen dargestellt und von daher jeweils immer abweichend angezeigt werden. Für Druckereien stellt sich häufig eine ganz besondere Herausforderung: Eine einmal festgelegte Farbe soll immer gleich aussehen, egal auf welcher Druckmaschine ein Prospekt gedruckt wird. Zusätzlich sehen Farben je nach dem verwendeten Papier auch wieder anders aus. Um hier eine einheitliche Namensgebung zu erreichen, wurden verschiedenste Farbpaletten entwickelt. Im deutschsprachigen Raum ist zum Beispiel die HKS-Farbpalette etabliert. Für Details dazu sei hier nur auf den Wikipedia-Artikel zu HKS verwiesen.

Die Umrechnungstabelle zwischen HKS und RGB mit den Farben des HKS-Farbfächers kann allerdings auch als einfache Quelle der Inspiration bei der Wahl von passenden Farben dienen.

Das richtige Werkzeug

Bei ColorJack gibt es gleich mehrere, völlig verschieden aufgebaute Tools, die bei der Wahl der richtigen Farben unterstützen. Neben der Mehrsprachigkeit (auch deutsch) sind es vor allem die vielen durchdachten Details, die diesen Online-Dienst absolut unschlagbar machen. Einige der Tools gibt es übrigens auch als Offline-Version zum Beispiel als Mac-Widget oder als Javascript-Code für die freie Verwendung in eigenen Webprojekten.

Farben aus Bildern bestimmen lassen

Eine automatische Bestimmung, der in einem Foto dominanten Farben, bieten einige Programme und Online-Dienste. Man lädt einfach das betreffende Bild ein und das Programm erstellt zum Beispiel eine Palette der 5 am häufigsten vorkommenden Farben. Ein sehr einfach zu bedienender Online-Dienst dafür ist beispielsweise color hunter.

Ausblick

In einem kommenden Artikel werde ich auf die Wahl und Komposition von harmonisierenden Farben eingehen. Bis dahin viel Spaß mit den genannten Tools.

Stand: 13.08.2008, 20:41 Uhr

Trackback-Link zu diesem Artikel