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

[Canonical HTML page](https://gradiently.design/de/guide/color-codes-explained)

#7c3aed, rgb(124 58 237), hsl(262 83% 58%) und oklch(54.1% 0.247 293) sind dasselbe Violett. Hier steht, was jede Schreibweise tatsächlich aussagt und wann sich welche lohnt.

## The short version

- Hex-Farbcodes wie `#7c3aed` sind eine kompakte Schreibweise für Rot-, Grün- und Blauwerte von 0 bis 255, jeweils als zwei Ziffern zur Basis 16.
- RGB, Hex und HSL beschreiben dieselben sRGB-Farben, sodass sich jede Farbe in einer Schreibweise exakt in die anderen umrechnen lässt.
- HSL lässt sich gut von Hand anpassen, aber sein Helligkeitswert entspricht nicht dem, wie hell Farben wirken, weshalb Gelb und Blau bei 50 % sehr unterschiedlich aussehen.
- OKLCH beschreibt Farbe über wahrgenommene Helligkeit, Buntheit und Farbton und ist damit die beste Schreibweise für Paletten, Abstufungen und weiche Farbverläufe.
- Eine praktische Regel: Teile Markenfarben als Hex und baue Paletten und Farbverläufe in OKLCH.

**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.

- Violett: #7c3aed
- Himmelblau: #0ea5e9
- Orange: #f97316
- Grün: #16a34a
- Tinte: #111827

Fünf Farben, die in diesem Leitfaden als Beispiele dienen. Die Tabelle unten schreibt jede in allen vier Schreibweisen.

## 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.

```css
/* 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);
```

Oben die moderne Schreibweise mit Leerzeichen, darunter die ältere mit Kommas. Browser akzeptieren beide.

## 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](https://gradiently.design/de/guide/rainbow-gradient).

## 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.

| Farbe | Hex | RGB | HSL | OKLCH |
| --- | --- | --- | --- | --- |
| Violett | `#7c3aed` | `124 58 237` | `262 83% 58%` | `54.1% 0.247 293` |
| Himmelblau | `#0ea5e9` | `14 165 233` | `199 89% 48%` | `68.5% 0.148 237` |
| Orange | `#f97316` | `249 115 22` | `25 95% 53%` | `70.5% 0.187 48` |
| Grün | `#16a34a` | `22 163 74` | `142 76% 36%` | `62.7% 0.17 149` |
| Tinte | `#111827` | `17 24 39` | `221 39% 11%` | `21% 0.032 265` |

Dieselben fünf Farben in vier Schreibweisen. HSL- und OKLCH-Werte sind gerundet. Beachte, wie HSL das Grün dunkler als das Violett nennt, während OKLCH zeigt, dass es tatsächlich heller ist.

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.

- Blau zu Gelb in sRGB: `linear-gradient(90deg, #2563eb 0%, #facc15 100%)`
- Blau zu Gelb in OKLCH: `linear-gradient(90deg, #2563eb 0%, #009edb 25%, #00c49e 50%, #82d14d 75%, #facc15 100%)`

Dieselben zwei Stopps. In sRGB fällt die Mitte in ein graues Oliv; in OKLCH führt sie über Türkis und Grün. Mehr dazu in [trübe Farbverläufe](https://gradiently.design/de/guide/muddy-gradients).

```css
.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);
}
```

OKLCH macht Abstufungen berechenbar: Ändere L in gleichmäßigen Schritten und senke C an den Enden, damit die Farben darstellbar bleiben.

## Welchen Farbcode du wo nutzt

| Aufgabe | Beste Schreibweise | Warum |
| --- | --- | --- |
| Marken-Styleguide, Design-Übergabe | Hex | Kurz, universell, in jedes Tool einfügbar |
| Transparenz in CSS | RGB oder 8-stelliges Hex | Klarer Alphawert nach dem Schrägstrich |
| Schnelle Anpassungen von Hand | HSL | Farbton oder Dunkelheit lässt sich leicht verschieben |
| Paletten, Abstufungen und Schattierungen | OKLCH | Gleiche Schritte sehen gleich aus |
| Farbverläufe | OKLCH | Mischt ohne graue Mitte |
| Bildschirme mit erweitertem Farbraum | OKLCH | Erreicht Farben außerhalb von sRGB |
| Druck | CMYK oder Sonderfarben | Bildschirmcodes drucken nie exakt; siehe [Farbverläufe drucken](https://gradiently.design/de/guide/print-gradients) |

Keine davon ist falsch. Es kommt darauf an, jede dort zu nutzen, wo sie hilft.

> **Bildschirme sind kein Papier** Hex, RGB, HSL und OKLCH beschreiben alle Licht von einem Bildschirm. Drucker mischen Tinte, die einen anderen Farbumfang abdeckt, also prüfe Markenfarben immer im Probedruck, statt einem umgerechneten Code zu vertrauen.

Zum Testen dieser Werte zeigt [oklch.com](https://oklch.com) eine Farbe in jeder Schreibweise und warnt, wenn sie außerhalb des Bildschirmumfangs liegt, und die [Farbreferenz von MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) deckt jede Syntax ab. Wählst du Farben, statt sie zu schreiben, ist [Markenfarben auswählen](https://gradiently.design/de/guide/how-to-choose-brand-colors) der nächste Schritt, und [Farbkontrast](https://gradiently.design/de/guide/color-contrast-accessibility) zeigt, wie du prüfst, ob Text lesbar bleibt.

## FAQ

### Was bedeuten die sechs Zeichen in einem Hex-Farbcode?

Es sind drei Paare von Ziffern zur Basis 16 für Rot, Grün und Blau. Jedes Paar reicht von `00` (0) bis `ff` (255), also bedeutet `#7c3aed` Rot 124, Grün 58, Blau 237.

### Ist Hex dasselbe wie RGB?

Ja. Hex ist RGB zur Basis 16 geschrieben. `#7c3aed` und `rgb(124 58 237)` sind genau dieselbe Farbe.

### Was ist OKLCH?

OKLCH ist eine Farbschreibweise auf Basis des Oklab-Farbraums. Sie beschreibt wahrgenommene Helligkeit, Buntheit und Farbton, sodass gleiche Helligkeitswerte gleich hell aussehen und Paletten und Farbverläufe weit berechenbarer werden.

### Wie füge ich einem Hex-Code Transparenz hinzu?

Hänge zwei weitere Ziffern für den Alphawert an. `#7c3aed80` hat etwa 50 % Deckkraft und `#7c3aedcc` etwa 80 %. In CSS kannst du auch `rgb(124 58 237 / 0.5)` schreiben.

### Welchen Farbcode sollte ich in CSS verwenden?

Für einzelne Farben reicht Hex. Nimm OKLCH für Paletten, Abstufungen, Dark Mode und Farbverläufe, wo seine wahrnehmungsgerechte Helligkeit ungleiche Schritte und graue Mitten vermeidet.