Farbe am Bildschirm: RGB, Hex und HSL

Worum es geht

Erste Woche bei der Werbeagentur Fürst & Partner in Schaffhausen. Amélie, Mediamatikerin im 1. Lehrjahr, bekommt von ihrer Berufsbildnerin eine Mail mit einem Logo im Anhang: «Die Boulderhalle Munot eröffnet im Herbst. Wir machen Website, Flyer, Kursprogramm und Beschriftung. Schau dir bitte die Hausfarbe an.» Die Hausfarbe ist ein leuchtendes Pink. Mehr als #FF2D95 hat die Kundschaft nicht, denn jemand hat das Logo nur für Instagram gestaltet.

Was ist dieses #FF2D95 genau? Warum leuchtet es am Bildschirm so stark, und was bedeutet das später für den Druck? Wer Farben nur nach Gefühl beschreibt («so ein knalliges Pink»), kann sie weder exakt weitergeben noch begründet anpassen. Farben sind in der Mediamatik Zahlen, und du musst diese Zahlen lesen, umrechnen und dokumentieren können.

In dieser Lektion lernst du, wie ein Bildschirm Farbe aus Licht mischt, wie du RGB-Werte und Hex-Codes liest und von Hand umrechnest und warum das HSL-Modell dir beim Gestalten am meisten hilft. In der nächsten Lektion geht es dann vom Bildschirm aufs Papier.

Licht mischen: das additive RGB-Modell

Stell dir einen dunklen Raum vor, in dem drei Scheinwerfer auf eine weisse Wand leuchten: einer rot, einer grün, einer blau. Wo sich Rot und Grün überlagern, siehst du Gelb. Wo alle drei zusammentreffen, wird die Wand weiss. Wo kein Scheinwerfer hinleuchtet, bleibt es schwarz. Je mehr Licht dazukommt, desto heller wird es. Deshalb heisst diese Art der Farbmischung additiv.

Genau so arbeitet jeder Bildschirm. Jedes Pixel besteht aus drei winzigen Leuchtpunkten (Subpixeln) in Rot, Grün und Blau. Ihre Helligkeit wird pro Kanal in 256 Stufen gesteuert, von 0 (aus) bis 255 (volle Leuchtkraft). Das sind 8 Bit pro Kanal. Mit drei Kanälen ergeben sich 256 × 256 × 256 = 16'777'216 mögliche Farben.

Zwei Regeln kannst du daraus ableiten: Sind alle drei Werte gleich, ist die Farbe ein Grau (unbunt). Und je grösser der Abstand zwischen dem höchsten und dem tiefsten Wert, desto bunter (gesättigter) ist die Farbe.

Das Pink der Boulderhalle hat die Werte Rot 255, Grün 45, Blau 149. Rot leuchtet voll, Blau etwa zur Hälfte, Grün kaum. Rot und etwas Blau ergeben ein Pink in Richtung Magenta, und weil der höchste Wert ganz oben und der tiefste fast unten liegt, ist die Farbe sehr gesättigt.

Hex-Codes lesen und umrechnen

Im Web und in fast allen Gestaltungsprogrammen begegnet dir RGB als Hex-Code: ein Rautezeichen und sechs Zeichen, zum Beispiel #FF2D95. Je zwei Zeichen gehören zu einem Kanal: FF für Rot, 2D für Grün, 95 für Blau.

Hex steht für hexadezimal, also das Zahlensystem mit der Basis 16. Weil es nur zehn Ziffern gibt, nimmt man für die Werte 10 bis 15 die Buchstaben A bis F:

Ein Paar aus zwei Hex-Ziffern rechnest du so in eine Dezimalzahl um: erste Ziffer mal 16 plus zweite Ziffer.

• FF = 15 × 16 + 15 = 255
• 2D = 2 × 16 + 13 = 45
• 95 = 9 × 16 + 5 = 149

Rückwärts teilst du durch 16: Der ganzzahlige Teil ist die erste Ziffer, der Rest die zweite. Für 149 gilt 149 : 16 = 9 Rest 5, also 95. Für 45 gilt 45 : 16 = 2 Rest 13, also 2D.

Weitere Regeln, die du kennen musst:

• Gross- oder Kleinschreibung spielt keine Rolle: #ff2d95 ist dieselbe Farbe. Im Styleguide schreibst du einheitlich, am besten in Grossbuchstaben.
• Kurzform: #F0A steht für #FF00AA. Jede Ziffer wird verdoppelt. Das geht nur, wenn beide Ziffern eines Paars gleich sind.
• Transparenz: CSS kennt auch achtstellige Codes wie #FF2D9580. Das letzte Paar ist der Alphakanal (hier 128 von 255, also rund 50 Prozent deckend).

In CSS kannst du dieselbe Farbe verschieden schreiben. Alle drei Zeilen ergeben exakt dasselbe Pink:

.logo-flaeche {
  background-color: #FF2D95;
  background-color: rgb(255 45 149);
  background-color: hsl(330 100% 59%);
}

HSL: Farbe so beschreiben, wie Menschen denken

RGB ist für Bildschirme gemacht, nicht für Menschen. Wenn die Hallenleitung sagt «das Pink etwas heller» oder «eine ruhigere Variante davon», müsstest du in RGB alle drei Werte gleichzeitig verändern, und zwar im richtigen Verhältnis. Viel einfacher geht das im HSL-Modell. Es beschreibt dieselben Farben mit drei anderen Grössen:

Auf dem HSL-Farbkreis liegen die Grundfarben des Bildschirms in festen Abständen: Rot bei 0°, Gelb bei 60°, Grün bei 120°, Cyan bei 180°, Blau bei 240° und Magenta bei 300°. Bei einer Helligkeit von 50 Prozent und einer Sättigung von 100 Prozent erhältst du die reinste Form des Farbtons. Darüber wird die Farbe heller bis Weiss, darunter dunkler bis Schwarz.

Damit werden Wünsche der Kundschaft zu einfachen Handgriffen:

• Heller oder dunkler: nur L ändern. Der Farbton bleibt gleich.
• Ruhiger, gedämpfter: S senken.
• Eine ganze Familie von Tönen für Flächen, Rahmen und Schrift: H und S festhalten, nur L variieren.
• Passende Partnerfarben finden: H um einen festen Winkel drehen. Das machst du in Lektion 3.

Schritt für Schritt: Das Pink der Boulderhalle vollständig beschreiben

Amélie will das Pink im ersten Farbblatt mit allen Bildschirmwerten festhalten. Sie rechnet einmal von Hand, damit sie versteht, was das Programm tut.

1. Hex zerlegen. #FF2D95 wird zu den Paaren FF, 2D und 95.

2. In Dezimalzahlen umrechnen. FF = 255, 2D = 45, 95 = 149. Also RGB 255 / 45 / 149.

3. Auf den Bereich 0 bis 1 bringen. Jeder Wert wird durch 255 geteilt: R = 1.000, G = 0.176, B = 0.584.

4. Helligkeit L berechnen. Der grösste Wert (max) ist R = 1.000, der kleinste (min) ist G = 0.176. L ist der Mittelwert der beiden: (1.000 + 0.176) / 2 = 0.588, gerundet 59 %.

5. Sättigung S berechnen. Der Abstand d = max − min = 0.824. Die Formel lautet S = d / (1 − |2 × L − 1|). Mit L = 0.588 ist |2 × 0.588 − 1| = 0.176, also S = 0.824 / (1 − 0.176) = 0.824 / 0.824 = 1.0, das heisst 100 %.

6. Farbton H berechnen. Weil Rot der grösste Wert ist, gilt H = 60° × ((G − B) / d). Das ergibt 60° × ((0.176 − 0.584) / 0.824) = 60° × (−0.495) = −29.7°. Ein negativer Winkel wird um 360° ergänzt: 330.3°, gerundet 330°. (Ist Grün der grösste Wert, rechnet man 60° × ((B − R) / d + 2), bei Blau 60° × ((R − G) / d + 4).)

7. Ergebnis deuten. hsl(330 100% 59%): ein Farbton zwischen Magenta und Rot, maximal gesättigt und eher hell. Genau solche Farben sind am Bildschirm spektakulär, lassen sich aber im Druck oft nicht erreichen. Das ist das Thema der nächsten Lektion.

8. Mit Python kontrollieren. Die Standardbibliothek von Python bringt das Modul colorsys mit. Achtung: Die Funktion heisst rgb_to_hls und liefert die Werte in der Reihenfolge H, L, S, jeweils zwischen 0 und 1.

import colorsys

hex_code = "#FF2D95"
r = int(hex_code[1:3], 16)   # "FF" -> 255
g = int(hex_code[3:5], 16)   # "2D" -> 45
b = int(hex_code[5:7], 16)   # "95" -> 149

h, l, s = colorsys.rgb_to_hls(r / 255, g / 255, b / 255)   # Reihenfolge H, L, S!
print(f"RGB {r} / {g} / {b}")
print(f"HSL {round(h * 360)}° {round(s * 100)}% {round(l * 100)}%")
# Ausgabe:
# RGB 255 / 45 / 149
# HSL 330° 100% 59%

9. Im Farbblatt festhalten. Die erste Zeile von Amélies Farbblatt:

CMYK- und Pantone-Werte fehlen noch. Die ergänzt Amélie, sobald sie die Druckseite geklärt hat.

Jetzt bist du dran: In den beiden Code-Laboren baust du die Umrechnungen selbst.

Typische Fehler

1. Malkasten-Logik am Bildschirm. «Rot plus Grün gibt Braun» stimmt für Wasserfarben, nicht für Licht. Korrektur: Am Bildschirm addieren sich die Kanäle, Rot plus Grün ergibt Gelb.
2. Hex-Paare falsch umgerechnet. Typisch ist 2D = 2 + 13 = 15 statt 2 × 16 + 13 = 45. Korrektur: Die erste Ziffer zählt immer sechzehnfach.
3. Ungültige Zeichen im Hex-Code. Ein O statt einer Null oder ein G machen den Code ungültig, und CSS ignoriert dann die ganze Zeile. Korrektur: Nur 0 bis 9 und A bis F verwenden, Codes per Copy-Paste übernehmen statt abtippen.
4. HSB und HSL verwechselt. Wer «B 100 %» aus Photoshop als «L 100 %» in CSS übernimmt, bekommt Weiss statt der reinen Farbe. Korrektur: Immer prüfen, welches Modell der Farbwähler anzeigt.
5. Farbe nur mit Namen dokumentiert. «Pink» oder «unser Blau» ist keine Farbangabe. Korrektur: Jede Farbe bekommt mindestens Hex und RGB, für den Druck später CMYK und eine Sonderfarbe.

Zusammenfassung

• Bildschirme mischen Farben additiv aus rotem, grünem und blauem Licht. Alle Kanäle voll ergibt Weiss, alle aus Schwarz, gleiche Werte ergeben Grau.
• Jeder Kanal hat 256 Stufen (0 bis 255), zusammen rund 16.7 Millionen Farben.
• Ein Hex-Code besteht aus drei Paaren für R, G und B. Umrechnung: erste Ziffer × 16 + zweite Ziffer.
• HSL beschreibt eine Farbe mit Farbton (0 bis 360°), Sättigung und Helligkeit (je 0 bis 100 %). Zum Aufhellen, Abdunkeln und Variieren ist HSL ideal.
• HSB im Adobe-Farbwähler ist nicht dasselbe wie HSL.
• Ein Farbblatt dokumentiert jede Farbe mit Namen, Werten und Verwendung.