Was bedeuten die sechs Zeichen in einer Hex-Farbe eigentlich?

Es sind drei Paare, je eines für Rot, Grün und Blau. Die ersten beiden Zeichen legen den Rotanteil fest, die nächsten beiden Grün, die letzten beiden Blau. Jedes Paar ist eine Zahl von 0 bis 255, geschrieben im 16er-System, die sechs Zeichen zusammen beschreiben also eine exakte Farbe.

Warum geht jedes Paar bis 255 und nicht bis 99?

Hex ist das 16er-System, nicht das 10er-System, jedes Zeichen fasst also 16 Werte, 0 bis 9 und dann A bis F. Zwei davon zusammen decken 16 mal 16 ab, also 256 Werte, von 0 bis 255 gezählt. Diese Spanne passt dazu, wie jeder Farbkanal gespeichert wird, weshalb ein Paar bei FF endet, nicht bei 99.

Ist ein Hex-Code dieselbe Farbe wie sein rgb()-Wert?

Ja. Es sind zwei Schreibweisen für dieselben drei Zahlen. #FF5733 ist Rot 255, Grün 87, Blau 51, also genau rgb(255, 87, 51). Hex packt die Werte in Paare im 16er-System, rgb() schreibt sie im 10er-System aus. Das Pixel, das aufleuchtet, ist so oder so identisch.

Was ist das zusätzliche Paar in einem 8-stelligen Hex-Code?

Es ist der Alphakanal, der die Transparenz festlegt. Die ersten sechs Zeichen sind das übliche Rot, Grün und Blau. Die letzten beiden laufen von 00, vollständig transparent, bis FF, vollständig deckend, in derselben Spanne von 0 bis 255. #FF5733CC ist also dieses Orangerot bei etwa 80 Prozent Deckkraft.

Wie Hex-Farbcodes funktionieren (und was #FF5733 wirklich bedeutet)

Ein Hex-Farbcode packt drei Zahlen, Rot, Grün und Blau, in sechs Zeichen. Jedes Paar läuft im 16er-System von 0 bis 255. Sobald du #FF5733 als 255, 87, 51 siehst, hört die ganze Schreibweise auf, ein Rätsel zu sein.

Eine Farbe wie #FF5733 sieht aus wie ein Code, den du kopieren, aber nie verstehen sollst. In diesem Sinne ist es kein Code. Es sind drei schlichte Zahlen in einer kompakten Verkleidung, und sobald du die sechs Zeichen wieder in Rot, Grün und Blau zerlegen kannst, wird jede Hex-Farbe, der du begegnest, lesbar. Der Trick liegt darin, zu wissen, dass Hex einfach das Zählen im 16er-System ist.

Kurz gesagt: Ein Hex-Farbcode sind drei Zahlen, Rot, Grün und Blau, jeweils von 0 bis 255, im 16er-System als je zwei Zeichen geschrieben. #FF5733 ist Rot 255, Grün 87, Blau 51, dieselbe Farbe wie rgb(255, 87, 51). Ein kurzes #FFF wird zu #FFFFFF, und ein zusätzliches Paar am Ende legt die Transparenz fest.

Was die sechs Zeichen in einem Hex-Code eigentlich sind

Eine Hex-Farbe sind drei zusammengeklebte Zahlen, eine für Rot, eine für Grün, eine für Blau. Die sechs Zeichen nach dem # zerfallen in drei Paare: Das erste Paar ist Rot, das zweite Grün, das dritte Blau. Jedes Paar ist ein einzelner Wert von 0 bis 255, der angibt, wie viel von diesem Kanal beigemischt wird. Das ist die ganze Struktur.

#FF5733 ist also nicht eine lange Zahl. Es ist FF für Rot, 57 für Grün, 33 für Blau, drei getrennte Mengen, von links nach rechts gelesen. Bildschirme bauen jede Farbe, indem sie diese drei Lichtkanäle mischen, und der Hex-Code ist nur eine ordentliche Art, die drei Stufen in sechs Zeichen aufzuschreiben, statt sie auszuformulieren.

Warum jedes Paar im 16er-System von 0 bis 255 läuft

Hex ist die Kurzform für hexadezimal, was Zählen im 16er-System statt im 10er-System bedeutet, das wir standardmäßig nutzen. Ein einzelnes Hex-Zeichen fasst 16 Werte: 0 bis 9, dann A, B, C, D, E, F, die für 10 bis 15 stehen. Zwei Zeichen zusammen decken 16 mal 16 ab, also 256 mögliche Werte, von 0 bis 255 gezählt. Daher kommt die Spanne eines Kanals.

Deshalb endet ein Paar bei FF und nicht bei 99. Im 10er-System ergibt FF 15 mal 16 plus 15, also 255, das Maximum. Das Kleinste ist 00, also 0. Jeder Kanal sitzt irgendwo in dieser 256-stufigen Spanne, und zwei Hex-Zeichen reichen genau aus, um jeden Wert darin ohne Verschwendung zu schreiben. Ein Zeichen würde nur bis 15 reichen, drei wären mehr als nötig.

Wie du #FF5733 in Rot, Grün und Blau zerlegst

Nimm #FF5733 und teile es in seine drei Paare, um die tatsächliche Farbe zu sehen. FF ist der Rotkanal, und FF ist 255, das Maximum, diese Farbe ist also voll rot. 57 ist der Grünkanal, was 87 im 10er-System ist, eine niedrige bis mittlere Menge. 33 ist der Blaukanal, also 51, ebenfalls niedrig. Viel Rot, ein wenig Grün, etwas weniger Blau, zusammengemischt ergibt ein warmes Orangerot.

Die Rechnung ist für jedes Paar gleich. Das erste Zeichen ist sein Wert mal 16, und du addierst den Wert des zweiten Zeichens. Bei 57 ist die 5 gleich 5 mal 16, also 80, plus die 7, was 87 ergibt. Bei 33 ist die 3 gleich 3 mal 16, also 48, plus 3, was 51 ergibt. Du musst das selten von Hand machen, aber einmal getan, fällt der Groschen bei der Schreibweise. Wenn du lieber ganze Paletten baust und liest, als Paare im Kopf umzurechnen, zeigt der Palettengenerator auf color.hivly.net den Hex-Wert und die Kanalwerte nebeneinander.

Warum Hex und rgb() dieselbe Farbe sind

Ein Hex-Code und ein rgb()-Wert sind zwei Schreibweisen für denselben Satz Zahlen. #FF5733 und rgb(255, 87, 51) beschreiben dasselbe Pixel. Hex schreibt die drei Kanäle im 16er-System und packt sie eng zusammen; rgb() schreibt dieselben drei Kanäle im schlichten 10er-System und trennt sie durch Kommas. Keines ist „echter” als das andere. Sie lassen sich exakt ineinander umrechnen.

Du wirst beide in CSS sehen, und welches auftaucht, ist meist Gewohnheit und Kontext. Hex ist kompakt und leicht aus einem Design-Tool einzufügen, deshalb dominiert es Stylesheets. Die rgb()-Form ist für einen Menschen auf einen Blick leichter zu lesen und macht es offensichtlich, wenn du einen einzelnen Kanal anpassen willst. Nimm das, was du im Moment klarer findest. Der Browser behandelt sie als dieselbe Anweisung.

Die Kurzform und die Alpha-Formen

Hex hat zwei Varianten über die Sechs-Zeichen-Form hinaus. Die Kurzversion verwendet drei Zeichen, und jedes wird einfach verdoppelt, um ein Paar zu bilden. #FFF wird zu #FFFFFF, also Weiß; #F00 wird zu #FF0000, reines Rot. Die Kurzform funktioniert nur, wenn beide Zeichen in jedem Paar gleich sind, #FF5733 hat also keine Drei-Zeichen-Version. Sie ist eine Bequemlichkeit für runde Werte, kein anderes System.

Die längere Variante fügt ein viertes Paar für die Transparenz hinzu, den sogenannten Alphakanal. Ein Acht-Zeichen-Code wie #FF5733CC behält dasselbe Rot, Grün und Blau und verwendet dann das letzte Paar, CC, um die Deckkraft auf der vertrauten Skala von 0 bis 255 festzulegen. 00 ist vollständig transparent, FF ist vollständig deckend, und CC ist 204, also rund 80 Prozent. #FF5733CC ist also dieses Orangerot, größtenteils deckend, lässt aber ein wenig vom Hintergrund durch. Die Vier-Zeichen-Kurzform wie #FFFA verdoppelt jedes Zeichen auf dieselbe Weise.

Einen Hex-Code auf einen Blick lesen

Die meisten Hex-Codes kannst du ohne jede Umrechnung lesen, sobald du das Schema kennst. Schau auf das erste Paar für Rot, das mittlere Paar für Grün, das letzte für Blau, und beurteile jedes Paar danach, wie hoch es ist. Ein Paar nahe FF bedeutet viel von diesem Kanal; ein Paar nahe 00 bedeutet fast keinen. #FF5733 liest sich sofort als viel Rot, wenig Grün, wenig Blau, es ist also warm und rötlich, bevor du einen einzigen Wert berechnest.

Diese schnelle Lesart ist der Punkt, an dem Hex seinen Platz verdient, und auch der Punkt, an dem es nicht mehr ausreicht. Die Zahlen bilden sauber ab, wie ein Bildschirm Licht mischt, aber sie passen nicht dazu, wie das Auge Helligkeit wahrnimmt oder wie wir in Worten über eine Farbe denken. Zwei Codes können sich auf dem Papier um denselben Betrag unterscheiden und doch grundverschieden aussehen. Wenn du über Helligkeit, Sättigung oder gleichmäßige Wahrnehmung nachdenken musst, beschreiben Formate wie HSL oder OKLCH eine Farbe so, wie Menschen sie tatsächlich sehen, während Hex die kompakte Art bleibt, die exakte Mischung zu speichern und einzufügen.