RGB und Hex-Codes

Mit 256 Stufen für jedes von Rot, Grün und Blau kann ein Bildschirm 256 × 256 × 256 = 16 777 216 Farben ansteuern, und jede davon ist ein Punkt in einem Würfel.

Drei Zahlen, drei Achsen

Im sRGB-Farbraum des Webs wird eine Farbe als drei Kanalwerte geschrieben: Rot, Grün und Blau. Im alltäglichen Code ist jeder Kanal eine ganze Zahl von 0 bis 255, der Bereich, der in acht Bit passt. Ein Kanal bei 0 bedeutet, dass das Licht aus ist. Ein Kanal bei 255 bedeutet, dass es voll an ist. rgb(255 0 0) ist also das stärkste Rot, das der Bildschirm zeigen kann, rgb(0 0 0) ist Schwarz und rgb(255 255 255) ist Weiß.

Drei Zahlen, die je einen Bereich durchlaufen, bilden einen Quader. Lege Rot entlang einer Kante, Grün an einer anderen und Blau an der dritten, und jede Farbe hat einen Platz in einem Würfel. Das Modell oben zeichnet diesen Würfel mit 512 kleinen Blöcken, acht Stufen entlang jeder Kante. Schwarz sitzt in einer Ecke. Weiß sitzt in der gegenüberliegenden Ecke. Die drei Ecken neben Schwarz sind reines Rot, reines Grün und reines Blau. Die drei Ecken neben Weiß sind Cyan, Magenta und Gelb, jede aus zwei vollen Kanälen gebildet. Schalte die Beschriftungen ein und folge den Kanten von Schwarz nach Weiß: Jeder Weg führt durch eine Grundfarbe und eine Sekundärfarbe.

Die gestrichelte Linie von Schwarz nach Weiß ist die Grauachse. Jeder Punkt darauf hat gleiches Rot, Grün und Blau, etwa rgb(128 128 128). Farben weit von dieser Linie sind lebhaft. Farben nahe daran sind gräulich. Das ist der erste Hinweis auf die Idee hinter dem HSL-Modell in der nächsten Einheit: Der Abstand von der Grauachse misst, wie farbig etwas ist.

Einen Hex-Code lesen

CSS lässt dich dieselben drei Zahlen auch hexadezimal nach einem #-Zeichen schreiben. Hexadezimal zählt in Sechzehnern mit den Ziffern 0 bis 9 und den Buchstaben a bis f, wobei a gleich 10 und f gleich 15 ist. Zwei Hex-Ziffern decken 16 × 16 = 256 Werte ab, genau einen Kanal. Ein sechsstelliger Code besteht also aus drei Paaren: Rot, Grün, Blau. CSS Color 4 hält fest, dass Groß- und Kleinschreibung der Buchstaben keine Rolle spielt, #00ff00 und #00FF00 sind also dieselbe Farbe.

Um ein Paar zu lesen, multipliziere die erste Ziffer mit 16 und addiere die zweite. Für c3 ist das 12 × 16 + 3 = 195. Für ff ist es 15 × 16 + 15 = 255, das Maximum. Für 80 ist es 8 × 16 = 128, fast genau die Hälfte. Ein dreistelliger Code wie #f80 ist eine Kurzform: Jede Ziffer wird zweimal hintereinander geschrieben, #f80 bedeutet also #ff8800. Tippe einen Code in das Hex-Feld unter dem Modell, und der Marker springt an diese Stelle im Würfel.