Farben
Neben Maßeinheiten werden in verschiedenen Sprachen, welche zur Formatierung genutzt werden, auch Farben benötigt. Zu solchen
Sprachen zählen z. B. die Stylesheetsprachen CSS und XSL-FO aber auch die Auszeichnungssprache SVG. Farben können in diesen
Sprachen auf unterschiedliche Art und Weise angegeben werden. Dabei kommen vor allem zwei unterschiedliche Farbmodelle ins
Spiel: RGB und HSL.
Das RGB-Farbmodell ist das Farbmodell, welches sich im Gebiet Webentwicklung am meisten durchgesetzt hat und
prinzipiell von allen Sprachen (in welchen Farbangaben eine Rolle spielen) und Anzeigegeräten unterstützt wird. RGB-Farben
können i. d. R. auf zwei unterschiedliche Schreibweisen angegeben werden. Die erste, und eigentlich auch die geläufigste,
Variante ist die Verwendung von Hexadezimalwerten. Ein solcher Hexadezimalwert setzt sich dabei aus 3 Bytewerten
(Wertebereich 0 bis 255 bzw. in hexadezimaler Schreibweise 00 bis FF) zusammen, welche die einzelnen Grundfarben repräsentieren:
Rot (Red), Grün (Green) und Blau (Blue). Hexadezimalwerte werden in dem Format #RRGGBB
angegeben und können in einigen Fällen durch das Format #RGB abgekürzt werden. Die abgekürzte Schreibweise ist
immer dann möglich, wenn beide Ziffern / Oktetts den gleichen Wert aufweisen, d. h. der Wert #33AA77 kann durch
#3A7 abgekürzt werden. Der Wert #33AB77 kann hingegen nicht abgekürzt werden, da das zweite Byte
(für den Grünanteil) nicht aus zwei gleichen Oktetts besteht. Eine weitere Notationsmöglichkeit ist die Verwendung der
RGB-Funktion. Dabei wird das Schlüsselwort rgb, gefolgt von einem runden Klammernpaar, in welchem die drei
Werte des RGB-Farbraums in dezimaler Schreibweise angegeben werden, notiert. Die Farbe #33AA77 würde mit Hilfe
der RGB-Funktion wie folgt aussehen: rgb(51, 170, 119).
Ein weiteres Farbmodell ist HSL. Das HSL-Farbmodell ist unter Designern sehr bekehrt, da man sich die Farben viel einfacher
vorstellen kann. Eine HSL-Farbangabe setzt sich ebenfalls aus drei Werten zusammen: dem Farbwert (Hue, Winkel auf dem
Farbrad in Grad), der Sättigung (Saturation, Sättigung in Prozent) und die Helligkeit (Lightness, Helligkeit in
Prozent). Der HSL-Farbraum wird nicht in allen Sprachen unterstützt, in CSS wird er jedoch unterstützt. Die Notation erfolgt
mit Hilfe der HSL-Funktion. Dabei wird das Schlüsselwort hsl, gefolgt von einem Klammernpaar, in welchem die drei
Werte angegeben werden, notiert. Für den Farbwert darf keine Einheit angegeben werden, für den Sättigungs- und Helligkeitswert
muss jedoch das Prozentzeichen als Einheit angegeben werden. Dies sieht dann also bspw. so aus: hsl(176, 34%, 58%).
Die dritte und letzte Möglichkeit zur Angabe einer Farbe ist die Verwendung eines Farbnamens. Diese Methode ist besonders
beliebt, da diese sehr einfach ist, denn wenn wir wissen, dass wir eine gelbe Farbe suchen, so müssen wir nicht lange überlegen,
wie diese Farbe im RGB- oder HSL-Farbraum lautet, sondern müssen die Farbe lediglich ins Englische übersetzen. Das Ergebnis wäre
also yellow. Nachteil dieser Variante ist natürlich, dass Farbangaben nicht genau abgestimmt werden können und
natürlich nur eine begrenzte Anzahl an solchen vordefinierten Farben existiert. Trotzdem ist die Liste an Farbnamen lang:
red, green, blue, lime, yellow, orange,
purple, cyan, black, white, usw..
Umrechner
Die Umrechnung zwischen dem RGB- und HSL-Farbmodell ist komplex. Deshalb stellen wir Ihnen hier ein kleines Tool zur Verfügung, mit welchem Sie RGB-Werte und HSL-Werte umrechnen können und umgekehrt. Sie müssen dazu lediglich die Felder für die RGB-Werte oder für die HSL-Werte ausfüllen und dann die Werte des anderen Farbraums ablesen.