Farben - RGB- und HEX-Notation

Die RGB-Notation ermöglicht die Definition von insgesamt 16.777.216 verschiedenen Farben, da für die drei verschiedenen Farbanteile "rot", "grün" und "blau" jeweils die Zahlenwerte von 0 bis 255 eingesetzt werden können. Diese Seite zeigt in den nachfolgenden 17 Tabellen allerdings insgesamt nur 4913 Farben, da bei Zahlen mit ähnlichen Zahlenwerten die Farbunterschiede vielfach nicht erkennbar sind. Die Überschrift über jeder Tabelle nennt jeweils den zugehörigen Wert für den Blau-Anteil (b), der in den Farben der Tabelle darunter enthalten ist. Die Spaltenbezeichnungen geben jeweils den Rot-Anteil(r) und die Zeilenbezeichnungen den Grün-Anteil (g) an.

Unterhalb jeder dieser Tabelle befindet sich ein Bereich mit der Bezeichnung "Farben vergleichen". Dieser Bereich enthält eine Tabelle mit zwei Zeilen "gewählt" und "vergleichen mit". Zunächst ist der oberen Zeilen die Farbe "weiß" und der unteren Zeile die Farbe "schwarz" zugeordnet. In den Spalten "rot", "grün" und "blau" ist für die weiße Farbe jeweils der Wert "255" und für die Farbe schwarz die "0" eingetragen, da die RGB-Notation für die Farbe weiß "rgb(255,255,255) und für die Farbe schwarz "rgb(0,0,0)" ist. Und in der Spalte "hex" ist die zugehörige Hexadezimal-Darstellung für die Farbe notiert.
Sobald auf eine Farbe in der Tabelle darüber geklickt wird, werden die Werte dieser Farbe in die Zeile "gewählt" übernommen.
Damit die gewählte Farbe nicht nur mit der Farbe "schwarz" verglichen werden kann, sind in der Zeile "vergleichen mit" die Werte in den Spalten "rot", "grün" und "blau" in Eingabefeldern notiert. In diesen Eingabefeldern werden jeweils die ganzen Zahlen zwischen 0 und 255 akzeptiert. Sobald Sie in einem Eingabefeld den Wert ändern, wird automatisch die Farbe und die Hexadezimal-Darstellung in dieser Zeile angepasst. Damit können Sie sich durch die Variation der Werte in diesen Eingabefeldern jede der möglichen 16.777.216 Farben anzeigen lassen.

HINWEIS: Wenn Sie diese Farbtabelle nutzen möchten, um die Farbwerte für z.B. Ihr "zac4web"-Projekt festzulegen, sollten Sie beachten, dass die tatsächlich angezeigten Farben in Ihrem Projekt auf unterschiedlichen Geräten unterschiedlich sein können.

Umrechnung der HEX-Notation in die RGB-Darstellung

An dem Beispiel des 6-stelligen Hexadezimal-Werts #a5ce1f zeigen wir hier, wie die zugehörige Zahlen für die rgb-Darstellung ermittelt wird.
Die ersten zwei Zeichen nach dem Zeichen # kennzeichnen immer den Rot-Anteil einer Farbe (im Beispiel "a5"). Die nächsten beiden Zeichen (im Beispiel "ce") den Grün-Anteil und die letzten beiden Zeichen (im Beispiel "1f") den Blauanteil.
Bei einem 6-stelligen Hexadezimal-Wert besteht die Angabe für jeden Farbanteil also immer aus zwei Zeichen. Wie an dem Beispiel auch zu erkennen ist, werden neben Ziffern auch Buchstaben genutzt, allerdings nur die Buchstaben a, b, c, d, e und f. Ob die Buchstaben im Hex-Wert als Kleinbuchstaben oder als Großbuchstaben notiert sind, spielt keine Rolle. Den Buchstaben sind folgende Zahlenwerte zugeordnet: a = 10, b = 11, c = 12, d = 13, e = 14, f = 15.
Für die Berechnung der Zahl wird jeweils der zugehörige Zahlenwert für das erste Zeichen aus der zweistelligen Zeichenfolge mit 16 multipliziert und anschließend der Zahlenwert für das zweite Zeichen addiert. Die Zahl für den Rotanteil "a5" berechnet sich demnach folgendermaßen: a*16 + 5 = 10*16 + 5 = 160 + 5 = 165. Für den Grünanteil ("ce") ergibt sich als Zahl: c*16 + e = 12*16 + 14 = 192 + 14 = 206, und für den Blauanteil ("1f): 1*16 + f = 16 + 15 = 31.

Farbangaben in einer dreistellige HEX-Notation vor (#a5f), können durch dreimaliges Einfügen der Ziffer 0 in die gleichwertige 6stellige HEX-Notation für Farben umgewandelt werden (#a050f0), um dann das zuvor genannte Rechenverfahren anwenden zu können. Die Umwandlung ist allerdings nicht zwingend nötig, da sie nur dazu führt, dass für die Berechung der drei Zahlenwerte in der RGB-Notation jeweils die Zahl 0 addiert werden muss. Es ergeben sich die gleichen Zahlen, wenn lediglich jedes der drei Zeichen aus der Hex-Notation jeweils mit 16 multipliziert wird.

Ermittlung der HEX-Notation aus der RGB-Notation

Mit dem Rechenverfahren "Division mit Rest" kann zu den ganzen Zahlen aus der RGB-Notation (Zahlen zwischen 0 und 255) leicht der zugehörige Hexadezimal-Wert ermittelt werden. Dazu ist die Zahl zunächst durch 16 zu teilen. Das Ergebnis der Division mit Rest liefert dann das erste Zeichen für den zweistelligen Hexadezimal-Wert. Der Rest wird zu dem zweiten Zeichen im zweistelligen Hexadezimalwert. Ist das Ergebnis der Division oder der Rest eine der Zahlen 10, 11, 12, 13, 14 oder 15, sind sie für die HEX-Notation durch den zugehörigen Buchstaben zu ersetzen ( 10 = a, 11 = b, 12 = c, 13 = d, 14 = e, 15 = f).
Für die Zahl 234 lautet damit die HEX-Notation 234 : 16 = 14 Rest 10 = ea.
Auf diese Weise ist für jede der drei Zahlen einer RGB-Notation der Hex-Wert zu ermitteln. Anschließend sind die drei Werte in der richtigen Reihenfolge aneinanderzuhängen, also zuerst der Hex-Wert für den Rot-Anteil, dahinter der Hex-Wert für den Grün-Anteil und zuletzt der Hex-Wert für den Blau-Anteil. Dieser 6-stelligen Zeichenfolge ist dann für die Farbangabe in HEX-Notation nur noch das Zeichen # voranzustellen.
Wird lediglich für einen oder zwei der drei Farbanteile bei dem Rechenverfahren "Division mit Rest" als Rest 0 ermittelt, muss in der HEX-Notation jeder Farbwert als zweistellige Zeichenfolge notiert werden. Nur wenn für alle drei Farbanteile der Rest 0 ist, können die Farbwerte als einstellige Zeichenfolgen notiert werden, so dass statt der 6-stelligen Hex-Notation für die Farbe die 3-stellige Hex-Notation geschrieben wird. Bei einer vier- oder 5-stelligen Hex-Notation wäre nicht zu erkennen, welche der Farbanteile mit einem oder mit zwei Zeichen bezeichnet werden.

- Seite zuletzt geändert: 07.12.2023 - Elisabeth Zacher