Farben definieren

Vom Farbraum zum Farbcode

• RGB-Farbraum
• HSL-Farbraum
• Farbnamen und Systemfarben

Farben werden in der Regel nach zwei unter­schied­lichen Prinzi­pien gebildet, der additiven oder der subtrak­tiven Farb­mischung. Um die gebildeten Farben genau identi­fizieren und ver­wenden zu können, bedarf es allerdings genauer Regeln, welche das Zustande­kommen der Farben beschreiben. Die nach diesen Regeln gebil­deten Farben bilden einen zusammen­hängenden Farbraum.

Die bekanntesten Farb­räume sind der RGB-­Farbraum für optische Medien wie Fern­seher oder Monitore und der CMYK-­Farbraum, welcher vorwiegend bei Print­medien zum Einsatz kommt. Während der RGB-­Farbraum durch additive Farb­mischung das RGB-­Farbschema ergibt, wird beim CMYK-­Farbraum durch subtraktive Farb­mischung das CMYK-­Farbschema gebildet. Wie die folgenden beiden Bilder zeigen, stellt hierbei das eine Farbschema exakt das Negativ des anderen dar.

addi­tive Farb­mischung

subtrak­tive Farb­mischung

Die Grundlage für die Gestaltung von Web­seiten bildet das RGB-­Farbschema.

Der RGB-Farbraum

Im RGB-Farbraum werden die drei Grund­farben Rot, Grün und Blau in unter­schied­lichen Verhält­nissen zuein­ander addiert, um eine resul­tierende Farbe zu ergeben. Dies läßt sich dadurch aus­drücken, daß man jeder Farbe eine Sät­tigung von 0% bis 100% zuordnet. So ent­steht ein theo­retisch unend­lich großer Farb­raum, da sich die Sät­tigung nicht auf ganze Prozent­zahlen beschränkt, sondern auch jeden belie­bigen gebro­chenen Wert zwischen 0 und 100 erlaubt. Bei­spiels­weise beschreiben folgende Angaben genau eine der im im RGB-­Farbraum enthal­tenen Farben.

Rot : 60,06%
Grün: 50,64%
Blau: 70,56%

Mit Hilfe eines Grafik­programmes läßt sich das ungefähre Aus­sehen dieser Farbe, welche im neben­stehenden Schema des RGB-­Farbraumes bei dem Punkt A lokali­siert ist, bestim­men. Aller­dings handelt es sich nicht um die exakte Farbe, sondern um eine über Run­dungen errech­nete. Warum dies so ist, wird im Fol­genden deut­lich werden.

Computer rechnen nicht mit dem Dezimal­system, sondern mit dem Binär­system. Wenn ich Rot, Grün und Blau jeweils z.B. 1bit zuord­nen würde, erhiel­te ich eine Farb­palette, in der die Grund­farben entweder mit 0% oder 100% Sät­tigung enthalten wären. Das Farb­schema bestände aus acht Farben. Tatsäch­lich existiert eine kleine Palette aus 16 Farben, in der diese acht Farben vertreten sind. Dies ist die Palette der 16 VGA-Farben, der Minimal­standard für Farb­monitore. Ein groß­zügigeres Farb­schema, welches die Darstel­lung kompli­zierter Farb­ver­läufe und Fotos erlaubt wird er­reicht, indem man jeder der drei Farben nicht nur ein bit, sondern acht bit zur Ver­fügung stellt. Jedes bit kann zwei Werte annehmen, es resul­tieren also 16 Werte, welche in irgend­einer belie­bigen Kombi­nation auf­tauchen dürfen, damit sind 16² = 256 Farb­abstufungen möglich. Jede der 256 Stufen drückt nun einen Sät­tigungs­grad der Farbe aus, wie es auch die Prozent­zahlen taten (Bei prozen­tualen Angaben sind unend­lich viele Abstu­fungen mög­lich, es resul­tiert ein analoger Farb­raum mit unendlich vielen Farben, im zweiten Falle mit begrenz­ten und diskreten Werten resultiert ein digi­taler Farb­raum mit endlich vielen Farben).

Wenn man die Kombi­nations­mög­lich­keiten der 256 Farb­stufen der einzelnen Grund­farben berechnet, erhält man 256³ = 16.777.216 mög­liche Farben. Dieses ist nun tat­säch­lich das von den meisten der­zeitigen Computern verwen­dete 24bit-­Farbschema, welches unter dem Namen TrueColor bekannt ist. Eine Farbe dieses Farb­raumes kann bei­spiels­weise fol­gender­maßen notiert werden:

Rot : 127
Grün:  88
Blau: 214

Wie diese Farbe dann aussieht, wird wieder im Grafik­programm deutlich.

Erstaunlicher­weise gibt es in dieser Fülle von über 16 Millionen Farben nur eine geringe Anzahl an reinen Grau­stufen. Grau­stufen ent­stehen, wenn der Anteil von Rot, Grün und Blau an einer Farbe gleich ist. Da es im 24bit-­Farbschema 256 Abstu­fungen gibt, existieren also auch genau 256 Grautöne (im gesamten theo­retischen RGB-­Farbraum wären natür­lich unend­lich viele Grau­stufen möglich).

Jetzt ist es nur noch ein kleiner Schritt von gene­rellen Beschrei­bungen einer Farbe zur Nota­tion dieser inner­halb einer Web­seite. Es bedarf eines Aus­druckes, welcher diese Farb­angaben kodiert, damit ein Browser die Farben ver­stehen und um­setzen kann. Mehrere Aus­drücke sind tatsäch­lich möglich:

1. rgb(Rot,Grün,Blau) , auf obiges Bei­spiel ange­wendet, rgb(127,88,214). Hier wird ein­fach der Wert der einzel­nen Grund­farben durch Kommata ge­trennt in Klammern gesetzt und rgb davor geschrieben.

   Eine gebräuch­lichere Ausdruck­weise ist aller­dings jene, die Zahlen nicht dezimal, sondern hexa­dezi­mal anzugeben. Der hexa­dezima­le Farb­code zu obigem Beispiel lautet dann, mit Rot 127_dez → 7F_hex , Grün 88_dez → 58_hex und Blau 214_dez → D6_hex , fol­gender­maßen:

2. Hexadezimal: Beispiel #7F58D6.

   Da Groß- und Klein­schreibung im hexa­dezima­len Farb­code nicht unter­schieden wird, können die Buch­staben auch klein geschrie­ben werden: #7F58D6 = #7f58d6.

   Im hexa­dezi­malen Farb­code werden also ein­fach die Werte für Rot, Grün und Blau hinter eine voran­stehende Raute ohne jeg­liche Leer­zeichen, Trenn­zeichen oder Anfüh­rungs­zeichen geschrieben. Bei den ersten zehn Ziffern, welche im dezi­malen und hexa­dezi­malen System über­ein­stimmen, ist hier eine führende 0 zwingend erforderlich.

3. Wenn der hexadezimale Farbcode aus drei paar­weise auf­treten­den Werten aufgebaut ist, besteht zusätz­lich die Mög­lich­keit, die Angaben zu ver­kürzen: beispiels­weise wird aus #77AA44 durch Verkür­zung #7A4, es wird also jeweils eine der dop­pelten Ziffern bzw. Buch­staben aus dem hexa­dezi­malen Code ge­strichen. Man kann diese Ziffern­paare zu einer eigenen Farb­palette zusam­men­fassen und erhält einen Farbraum von 4096 Farben

4. rgb(Rot%,Grün%,Blau%) Auch die prozentuale Nota­tion der Farben ist erlaubt. Aller­dings trifft man hier auf einige Schwie­rig­keiten, denn diese rela­tiven Angaben müssen erst in com­pute­rverständ­liche Zahlen umgerech­net werden. Es muß also eine Beziehung zwischen den pro­zentualen Werten und den 256 Farb­abstufun­gen geschaffen werden. Da die Skala der dis­kreten Abstu­fungen von 0 bis 255 geht, lautet der Umrech­nungs­faktor 100/255 = 0,3921568627450980...

   Falls die Umrechnung keinen glatten Wert liefert, was nur bei 0%, 20%, 40%, 60%, 80% sowie 100% der Fall ist, muß das Ergeb­nis gerundet werden. Ob auf­ge­rundet wird, was einem helleren Farb­ton ent­spricht, oder ab­ge­rundet ent­sprechend einem dun­kleren Farb­ton, bleibt dem ver­wen­deten Browser über­lassen. Einen Eindruck von einer pro­zentualen Palette gibt das Palettenbeispiel aus prozentualen Farbwerten

Das 24bit-­Farbschema erlaubt, aus einer Auswahl von über 16 Millionen Farben eine Web­seite zu gestal­ten. Es verhält sich aller­dings so, daß die vom Autor der Seite gewünsch­te Farbe nicht unbe­dingt tatsäch­lich bei dem Betrach­ter der Seite genau so er­scheint. Es spielen eine ganze Reihe an Fak­toren eine Rolle, ob und wie eine Farbe dar­ge­stellt wird. Die Farb­darstel­lung ist unter anderem abhän­gig vom verwand­ten Browser, dem benutz­ten Betriebs­system, der Grafik­karte und dem Moni­tor des Seiten­besuchers.

In der Mehr­zahl der Betriebs­systeme und Browser exi­stiert eine quasi als Standard definierte Farbpalette. Dieses Farb­schema beschränkt sich auf die mög­lichen Farb­kombina­tionen, welche mit 0%, 20%, 40%, 60%, 80% sowie 100% (≙HEX: 00, 33, 66, 99, CC, FF) Sät­tigung erreich­bar sind. Somit bilden die drei Grund­farben eine Palette von 6³ = 216 Farben. Wer sicher gehen möchte, daß sein Farb­design platt­form­unab­hän­gig so wie beab­sichtigt dar­gestellt wird, sollte sich also auf diese Palette beschrän­ken.

HSL-Farbraum

Innerhalb des RGB-­Farb­raumes lassen sich die Far­ben nicht nur über die Sät­tigungs­stufen der ein­zelnen Farb­antei­le defi­nieren, son­dern auch über das HSL-­Farbschema. Der Vorteil einer HSL-­Farb­nota­tion gegen­über der RGB-­Nota­tion liegt zum einen darin, dass es ver­ständ­licher ist, zum an­deren darin, dass sich Farb­abstu­fungen eines Farb­tones sehr leicht erzeugen lassen.

Die diesem Farb­schema zugrunde lie­genden Werte haben fol­gende Be­deu­tung:

Dieses einfache Farbschema erlaubt also die Definition von insgesamt 360 Farbtönen * 100 Sättigungsstufen * 99 Helligkeitswerten = 3.564.000 Farben sowie 101 reinen Grautönen.

Zur Notation dieses Farbschemas wird fol­gender Ausdruck benutzt: hsl(h,s%,l%), ein leicht ab­gedun­kelter Violett­ton kann bei­spiels­weise durch hsl(300,100%,75%) aus­ge­drückt werden.

Diese Notation ist Bestand­teil des CSS3-Farbmoduls, welches sich seit Mai 2003 in der Vor­phase zur Spe­zifi­ka­tion be­fin­det. Mit der Ver­öffent­li­chung des Firebird 0.7 und des Mozilla Browsers Version 1.6 im Ja­nuar 2004 sind schon die Gecko-Browser in der Lage, die­ses Farb­schema um­zu­set­zen.

Wie der HSL-Farbraum aufgebaut ist, zeigt ein Ausschnitt mit einer Palette von 3564 Farben. Eine Umwandlung von HSL-­Kodierungen in RGB-­Kodierungen und umgekehrt kannst Du mit einem Umwandler einfach erstellen.

Farbnamen und Systemfarben

Letztlich bietet sich noch die Möglichkeit, Farben über ihre Farb­namen oder über System­farben zu notieren. Da jedoch die korrekte Um­setzung dieser Farb­namen im Browser nicht garan­tiert ist, sollte man vor­sichtig mit der Ver­wendung von Farb­namen sein, wie auch die Palette der Farbnamen zeigt. Eine rgb-Farbcodierung ist auf jeden Fall vorzuziehen.

System­farben sind die­jenigen Farben, welche der Besucher einer Seite auf seinem System für das gesam­te Aus­sehen des GUI, der Benut­zer­ober­fläche, fest­legen kann. Ein sinn­voller Ein­satz dieser System­farben auf einer Web­seite er­fordert aller­dings einiges an Über­legungen, da man ja die tatsäch­lich vom Betrach­ter einge­stellten Farben nicht kennt und Farb­kombina­tionen von schwarz/weiß bis kunter­bunt vor­kommen können. Wie die Farb­palette der System­farben auf Deinem System aussieht (und ein Vergleich mit der Palette auf meinem System), kannst Du in der ent­sprechenden Farbübersicht der Systemfarben sehen.