Hier erfährst du, wie HTML Farbcodes grundsätzlich aufgebaut sind und mit welchen Methoden sich Farbtabellen sinnvoll erzeugen lassen.
Inhaltsverzeichnis
HTML-Farben - Was dahinter steckt
Die meisten, die hier über diesen Artikel stolpern, sind vermutlich damit beschäftigt, eine eigene Webseite zu gestalten. Sicherlich gibt es aber auch noch einige andere Bereiche, bei denen man Farben mit Hilfe eines HEX-Codes festlegt. Betrachten wir zunächst einmal den Aufbau dieses Codes etwas genauer: er beginnt stets mit einer Raute und danach folgen in der Regel sechs Zahlen von 0 bis 9 oder Buchstaben von A bis F. Genauer genommen sind das Hexadezimale Zahlen. Es spielt dabei keine Rolle, ob die Buchstaben groß oder klein geschrieben sind. Für detailliertere Infos wird an dieser Stelle auf den Artikel über Zahlensysteme hingewiesen.
RGB-Komponenten
Um das Ganze besser verstehen zu können, nehmen wir jetzt einfach mal als willkürliches Beispiel den HEX-Code "#F7C931". Wir müssen diesen Code nun in drei Blöcke mit jeweils zwei hexadezimalen Ziffern aufteilen: der erste Block steht für den Rot-Anteil (R), der zweite für den Grün-Anteil (G) und der dritte Block entspricht dem Blau-Anteil (B). Somit gilt in unserem Beispiel:
G = C9HEX = 201
B = 31HEX = 49
Die hexadezimalen Werte wurden hier zusätzlich gleich direkt in das "normale" Dezimalsystem umgerechnet. Diese Umrechnung kann man bei den einzelnen Komponenten z.B. mit dem Zahlensystem-Konverter vornehmen. Oder man nutzt einfach den genau für diesen Zweck erstellten Farbcode-Konverter. Der Wert jeder einzelnen Komponente entspricht dabei dem jeweiligen Farbanteil mit einem möglichen hexadezimalen Wertebereich von 00 bis FF oder umgerechnet von 0 bis 255. Der HEX-Code "#000000" steht für die Farbe Schwarz, da keine der drei Komponenten einen Farbanteil beisteuert. Bei maximaler Intensität aller drei Farben, also "#FFFFFF", erhalten wir die "Farbe" Weiß. Ein reines Rot bekommt man folglich mit "#FF0000", ein reines Grün mit "#00FF00" und für ein reines Blau steht der HEX-Code "#0000FF".
| #000000 | #FF0000 | #00FF00 | #0000FF | #FFFFFF |
Unsere Beispiel-Farbe ist somit eine Mischung aus den Farben Rot, Grün und Blau mit den jeweiligen Intensitäten: 247/255 Rot, 201/255 Grün und 49/255 Blau.
| #F70000 | #00C900 | #000031 |
| #F7C931 | ||
HEX-Codes mit nur drei Ziffern
An manchen Stellen sieht man auch öfter mal HEX-Codes mit nur drei Ziffern. Dies ist eine vereinfachte Schreibweise, mit der man aber nur einen sehr kleinen Teil aller möglichen Farben beschreiben kann. Man muss dort einfach jede der einzelnen Ziffern doppelt hinschreiben, dann erhält man wieder den 6-stelligen Farbcode. Also z.B. "#123" entspricht ganz einfach "#112233".
Farbtabellen generieren
Wenn man sich ein bisschen mit dem RGB-Format auseinandergesetzt hat, dann stellt man ziemlich bald fest, dass es nicht einfach ist, damit vernünftige, farblich sortierte Farbtabellen zu erstellen. Dies liegt daran, dass alle drei Komponenten miteinander korrelieren und die Änderung eines RGB-Kanals sowohl den Farbton, als auch die Sättigung und die Helligkeit der resultierenden Farbe beeinflusst. Aus diesem Grund ist es sinnvoll, sich mit dem HSV-Farbmodell anstatt dem RGB-Modell genauer zu beschäftigen. Eine ausführliche Beschreibung dazu findest du hier.
HSV-Farbmodell
In dem verlinkten Artikel haben wir gelernt, dass im HSV-Farbmodell anstatt der drei Farbkanäle der Farbton (H: Hue), die Sättigung (S: Saturation) und die Helligkeit (V: Value) zur Definition einer Farbe herangezogen werden. Mit genau diesen drei Parametern kann man somit auf einfache Art und Weise einen Farbwähler oder Farbtabellen erstellen. Man legt z.B. einen Farbton fest und iteriert dann über die Sättigung und die Helligkeit.
Umwandlung von HSV in HEX mit JavaScript
In JavaScript kann man das zuvor beschriebene Verfahren mit folgender Funktion umsetzen, welche die drei HSV-Komponenten in einen HEX-Code umwandelt:
//---------------------------------------------------------------------------------------------------------------- /*! \brief Convert HSV to HEX \param[in] $o_H Hue [0,360] \param[in] $o_S Saturation [0,100] \param[in] $o_V Value [0,100] \return HEX string (e.g. #123456) */ //---------------------------------------------------------------------------------------------------------------- function hsv_to_hex(o_H, o_S, o_V) { H = o_H; s = o_S / 100; v = o_V / 100; hi = Math.floor(H / 60); f = (H / 60) - hi; p = v * (1 - s); q = v * (1 - (s * f)); t = v * (1 - (s * (1 - f))); switch (hi) { case 1: r = q; g = v; b = p; break; case 2: r = p; g = v; b = t; break; case 3: r = p; g = q; b = v; break; case 4: r = t; g = p; b = v; break; case 5: r = v; g = p; b = q; break; default: r = v; g = t; b = p; break; } R = 255 * r; G = 255 * g; B = 255 * b; string_R = dec_to_hex_string(R); string_G = dec_to_hex_string(G); string_B = dec_to_hex_string(B); return "#" + string_R + string_G + string_B; }
Fazit
In diesem Artikel haben wir erfahren, was genau hinter den HTML Farbcodes steckt, also deren Aufbau und wie dieser Code genau zu interpretieren ist. Außerdem sind wir zu der Erkenntnis gelangt, dass man zur Erzeugung von Farbtabellen besser auf das HSV-Farbmodell anstatt dem RGB-Modell zurückgreifen sollte. Hierzu wurde eine Funktion in JavaScript zur Umwandlung von HSV-Parametern in HEX-Code präsentiert.
