Jeder Frontend-Entwickler jongliert mit Farbformaten: das Design liefert HEX, CSS will eine Anpassung in HSL, und Code braucht RGB. Alle beschreiben dieselben Farben — hier, was jedes bedeutet und wann man es nutzt.
Dieselbe Farbe in drei Schreibweisen. Das Orange dieser Seite ist
#e76f51. In unserem Farbkonverter ergibt es231, 111, 81als RGB und12, 76%, 61%als HSL. Liest man beides nebeneinander, wird der Zweckunterschied deutlich: RGB sagt, wie viel jeder Grundfarbe abgestrahlt wird — was ein Bildschirm braucht, aber nichts Brauchbares über die Farbe verrät. HSL sagt „Farbton 12° — ein Orangerot — bei 76% Sättigung und 61% Helligkeit”, und genau das brauchst du, wenn du eine etwas dunklere Variante derselben Farbe willst. Ändere eine HSL-Zahl und du bleibst in der Familie; ändere eine RGB-Zahl und du landest irgendwo.
HEX
HEX ist die vertraute #RRGGBB-Web-Notation, bei der jedes Paar einen Rot-/Grün-/Blau-Kanal in Hexadezimal (00–FF) angibt. #2563eb ist ideal, um eine feste Markenfarbe einzufügen. Die Kurzform #RGB (z. B. #f00) verdoppelt jede Ziffer (#ff0000). Kompakt, aber nicht intuitiv von Hand anzupassen.
RGB
RGB drückt dieselben Kanäle als Dezimalzahlen 0–255 aus: rgb(37, 99, 235). Es entspricht direkt der Lichtabgabe von Bildschirmen und ist praktisch in Code, der Kanäle manipuliert. Wie bei HEX bedeutet „etwas heller” aber, drei Zahlen ohne offensichtlichen Zusammenhang zu ändern.
HSL
HSL beschreibt Farbe als Farbton (Hue, 0–360° auf dem Farbkreis), Sättigung (0–100%) und Helligkeit (Lightness, 0–100%): hsl(217, 83%, 53%). Das ist die Form, die Designer zum Anpassen einer Farbe lieben:
- Heller? L erhöhen.
- Gedämpfter? S senken.
- Eine verwandte Farbe? H verschieben.
Diese Intuitivität macht HSL ideal für Farbskalen und helle/dunkle Varianten eines Farbtons. Wandle jede Farbe mit einem Farb-Konverter in HSL um und experimentiere.
Die ersten drei Zeilen erklären das eine, worüber bei HSL alle stolpern. Weiß, Schwarz und Mittelgrau kommen alle mit Farbton 0 zurück — beim Grau 0, 0%, 50% — aber dieser Farbton ist nicht „Rot”, er ist undefiniert und wird als Null gemeldet, denn die Sättigung ist 0%. Einen Farbton-Regler auf einem Grau zu ziehen tut gar nichts, und solange die Sättigung null bleibt, färbt kein Farbton. Vergleiche reines Rot mit 0, 100%, 50%: gleiche Zahl, völlig andere Bedeutung.
Alpha: RGBA und HSLA
Für Transparenz hängst du einen Alphakanal (0–1) an: rgba(37, 99, 235, 0.5) oder hsla(217, 83%, 53%, 0.5). Modernes CSS erlaubt auch Alpha in HEX (#2563eb80) und die durch Leerzeichen getrennte Syntax rgb(37 99 235 / 50%).
Was solltest du nutzen?
- Feste Markenfarben, Copy-Paste aus dem Design: HEX.
- Kanäle im Code manipulieren: RGB.
- Skalen entwerfen, Helligkeit/Sättigung anpassen, Theming: HSL.
Sie sind austauschbar — nimm das, was die aktuelle Aufgabe am einfachsten macht, und wandle bei Bedarf um.
Schneller Tipp für Design-Systeme
Definiere deine Palette in HSL und leite Abstufungen ab, indem du nur L (und manchmal S) änderst. So erhältst du harmonische, vorhersehbare helle/dunkle Varianten viel leichter, als HEX-Werte per Versuch und Irrtum zu justieren.
Wandle sofort zwischen HEX, RGB und HSL um — mit Live-Vorschau — mit dem kostenlosen Farb-Konverter, der komplett im Browser läuft.
Dieselbe Farbe in jedem Format
Es hilft, eine Farbe in drei Schreibweisen zu sehen. Alle ergeben dasselbe Blau:
| Format | Wert | Ideal, wenn du … |
|---|---|---|
| HEX | #2563eb | eine feste Farbe aus Design oder Markenrichtlinie einfügst |
| RGB | rgb(37, 99, 235) | Kanäle in JavaScript/Canvas liest oder setzt |
| HSL | hsl(217, 83%, 53%) | aufhellst, abschwächst oder einen passenden Ton ableitest |
Unten dieselben Farben durch unseren Farbkonverter. Die ersten drei Zeilen sind absichtlich unbunt, die letzten drei sind die Palette, die diese Seite tatsächlich verwendet.
| HEX | RGB | HSL |
|---|---|---|
#ffffff | 255, 255, 255 | 0, 0%, 100% |
#000000 | 0, 0, 0 | 0, 0%, 0% |
#808080 | 128, 128, 128 | 0, 0%, 50% |
#ff0000 | 255, 0, 0 | 0, 100%, 50% |
#00ff00 | 0, 255, 0 | 120, 100%, 50% |
#0000ff | 0, 0, 255 | 240, 100%, 50% |
#e76f51 | 231, 111, 81 | 12, 76%, 61% |
#2a9d8f | 42, 157, 143 | 173, 58%, 39% |
#e9c46a | 233, 196, 106 | 43, 74%, 66% |
Häufige Irrtümer
- „HEX ist präziser als RGB.” Nein — beide speichern 8 Bit pro Kanal, also sind
#2563ebundrgb(37, 99, 235)exakt gleich. HEX ist nur Basis 16. - „Gleiches L in HSL heißt gleiche Helligkeit.” Fürs Auge nicht. Bei gleicher Helligkeit wirkt
hsl(60, 100%, 50%)(Gelb) weit heller alshsl(240, 100%, 50%)(Blau). Für wahrnehmungsgleiche Skalen lohnt ein Blick auf neuere Räume wie OKLCH. - „Die
#RGB-Kurzform geht für jede Farbe.” Nur wenn jeder Kanal eine doppelte Ziffer ist.#2563ebhat keine gültige Dreistellen-Form,#ff0000schon (#f00).
FAQ
Ist Alpha 0.5 dasselbe wie 50%?
Ja. rgba(…, 0.5) und das moderne rgb(37 99 235 / 50%) beschreiben dieselbe Halbtransparenz.
Beeinflusst das Farbformat den Barrierefreiheits-Kontrast? Nein. Kontrast hängt von den tatsächlichen Farben ab, nicht von der Schreibweise — dasselbe Paar erzielt denselben Wert, ob du dem Checker HEX, RGB oder HSL gibst.
Und benannte Farben wie rebeccapurple?
Praktisch für schnelle Tests, aber es gibt nur rund 148 davon — sobald du einen bestimmten Ton brauchst, wechselst du zu HEX oder HSL.
Um diese Farben als Verläufe oder Schatten einzusetzen, siehe den Schwesterartikel CSS-Verläufe, Schatten und runde Ecken; um zuerst eine Farbe aus einem Bild zu holen, nutze den Bild-Farbwähler.