Hex-Farbcodes, RGB, HSL und OKLCH erklärt

Hex-Farbcodes wie #7c3aed sind die gängigste Art, eine Farbe am Bildschirm zu schreiben: ein # gefolgt von sechs Zeichen, die den Anteil an Rot, Grün und Blau angeben. RGB schreibt dieselben Zahlen dezimal, HSL ordnet sie zu Farbton, Sättigung und Helligkeit um, und OKLCH beschreibt Farbe so, wie das Auge sie wahrnimmt. Es sind verschiedene Schreibweisen für dieselben Farben, und jede eignet sich für eine andere Aufgabe am besten.

So funktionieren Hex-Farbcodes

Ein Hex-Code besteht aus drei Paaren von Ziffern zur Basis 16: #RRGGBB. Die Basis 16 zählt von 0 bis 9 und dann von a bis f, sodass jedes Paar von 00 (nichts) bis ff (255, voll) reicht. In #7c3aed ist Rot 7c (124), Grün 3a (58) und Blau ed (237): viel Blau, ordentlich Rot, wenig Grün, also Violett. Drei Kanäle mit je 256 Werten ergeben 16.777.216 mögliche Farben.

• Kurzschreibweise: #f0c entspricht #ff00cc. Jede Ziffer wird verdoppelt, daher klappt das nur bei Farben, deren Paare sich wiederholen.
• Transparenz: Ein achtstelliger Code hängt am Ende den Alphawert an. #7c3aed80 ist das Violett mit etwa 50 % Deckkraft, denn 80 ist 128 von 255.
• Groß- und Kleinschreibung ist egal: #7C3AED und #7c3aed sind identisch.
• Grautöne haben drei gleiche Paare: #767676, #1a1a1a und #f4f4f4 sind alle neutral.

RGB: dieselben Zahlen dezimal

RGB schreibt die drei Kanäle als gewöhnliche Zahlen von 0 bis 255. Modernes CSS trennt sie mit Leerzeichen und hängt die Transparenz nach einem Schrägstrich an; die ältere Schreibweise mit Kommas und rgba() funktioniert weiterhin überall. RGB ist praktisch, wenn ein Tool oder eine API Zahlen verlangt oder wenn du die Zusammensetzung einer Farbe auf einen Blick lesen willst.

/* All four lines are the same violet */
color: #7c3aed;
color: rgb(124 58 237);
color: rgb(124, 58, 237);
color: hsl(262 83% 58%);

/* The same violet at 50% opacity */
color: #7c3aed80;
color: rgb(124 58 237 / 0.5);

HSL: Farbton, Sättigung und Helligkeit

HSL beschreibt eine Farbe über ihren Farbton als Winkel auf dem Farbkreis (0 ist Rot, 120 Grün, 240 Blau), ihre Sättigung von Grau (0 %) bis zur vollen Farbe (100 %) und ihre Helligkeit von Schwarz (0 %) über die reine Farbe (50 %) bis Weiß (100 %). Von Hand lässt es sich leicht anpassen: Für ein dunkleres Violett senkst du die letzte Zahl.

Der Haken: Die Helligkeit in HSL ist eine Formel, keine Messung dafür, wie hell eine Farbe aussieht. Gelb mit 50 % Helligkeit wirkt weit heller als Blau mit 50 %. Baust du eine Palette mit gleicher HSL-Helligkeit, wirken die Farben nicht gleich hell, und genau deshalb sehen Standard-Regenbogen gestreift aus. Das sichtbare Ergebnis zeigt Regenbogenverlauf.

OKLCH: Farbe, wie du sie siehst

OKLCH stammt von Oklab, einem Farbraum, den Björn Ottosson 2020 veröffentlicht hat und der inzwischen zu CSS gehört. Er nutzt drei Werte: L ist die wahrgenommene Helligkeit von 0 % bis 100 %, C ist die Buntheit (Chroma), wie farbig es ist, von 0 für Grau bis etwa 0,37 für die lebhaftesten Farben, und H ist der Farbtonwinkel. Gleiche L-Werte sehen wirklich gleich hell aus, sodass du eine Eigenschaft ändern kannst, ohne die anderen zu stören.

OKLCH glänzt bei Farbverläufen. Beim Mischen in schlichtem sRGB, dem Standard für Hex-Farben, verläuft die Linie gerade durch den RGB-Würfel, und Farben von gegenüberliegenden Seiten des Farbkreises treffen sich in Grau. Beim Mischen in OKLCH bleibt die Buntheit erhalten, und der Verlauf wandert stattdessen um den Farbkreis.

.band {
  /* Tell the browser which space to blend in */
  background: linear-gradient(in oklch 90deg, #2563eb, #facc15);
}

:root {
  /* One hue, a scale of equal steps in perceived lightness */
  --violet-90: oklch(90% 0.05 293);
  --violet-70: oklch(70% 0.16 293);
  --violet-54: oklch(54.1% 0.247 293);
  --violet-35: oklch(35% 0.16 293);
  --violet-20: oklch(20% 0.08 293);
}

Welchen Farbcode du wo nutzt

Zum Testen dieser Werte zeigt oklch.com eine Farbe in jeder Schreibweise und warnt, wenn sie außerhalb des Bildschirmumfangs liegt, und die Farbreferenz von MDN deckt jede Syntax ab. Wählst du Farben, statt sie zu schreiben, ist Markenfarben auswählen der nächste Schritt, und Farbkontrast zeigt, wie du prüfst, ob Text lesbar bleibt.