HEX, RGB, HSL und RGBA: Welches Farbformat wofuer?
HEX, RGB, RGBA und HSL bezeichnen am Ende dieselben Bildschirmfarben, nur in unterschiedlicher Schreibweise. Welches Format Sie waehlen, entscheidet nicht ueber die Farbe selbst, sondern darueber, wie leicht sich der Code lesen, anpassen und pflegen laesst. Dieser Ratgeber erklaert die vier Formate von Grund auf, zeigt ihre Staerken und Schwaechen und gibt eine klare Empfehlung, wann Sie welches im CSS einsetzen.
Warum es ueberhaupt mehrere Farbformate gibt
Jede Farbe auf einem Standardbildschirm entsteht durch Mischen von drei Lichtquellen: Rot, Gruen und Blau. Das nennt man additive Farbmischung, denn je mehr Licht hinzukommt, desto heller wird das Ergebnis. Alle drei Kanaele auf Maximum ergeben Weiss, alle auf Null ergeben Schwarz. Dieser gemeinsame Farbraum heisst sRGB und ist der Standard fuer das Web.
HEX, RGB, RGBA und HSL sind nur verschiedene Wege, einen Punkt in genau diesem Farbraum zu benennen. Sie unterscheiden sich also nicht in der Farbe, sondern in der Notation und in der Frage, welche Eigenschaft sie in den Vordergrund stellen: die einzelnen Lichtkanaele, eine kompakte Zeichenkette oder die menschliche Wahrnehmung von Farbton und Helligkeit.
Die vier Formate im Ueberblick
Bevor wir ins Detail gehen, hier dieselbe Farbe, ein kraeftiges Orangerot, in allen vier gaengigen Notationen. Sie sehen identisch aus, weil sie identisch sind:
color: #FF5733; /* HEX */
color: rgb(255, 87, 51); /* RGB */
color: rgba(255, 87, 51, 1); /* RGBA, voll deckend */
color: hsl(11, 100%, 60%); /* HSL */
HEX: kompakt und kopierfreundlich
Ein HEX-Code beginnt mit einer Raute und besteht aus sechs hexadezimalen Ziffern, zum Beispiel #FF5733. Je zwei Ziffern stehen fuer einen Kanal: FF ist Rot, 57 ist Gruen, 33 ist Blau. Hexadezimal bedeutet, dass nach der 9 die Buchstaben A bis F folgen, sodass jedes Zeichenpaar Werte von 0 bis 255 abbildet (00 bis FF).
HEX ist die mit Abstand verbreitetste Notation im Web, weil sie kurz ist und sich mit einem Klick aus jedem Grafikprogramm kopieren laesst. Es gibt auch eine Kurzform mit drei Ziffern: #F53 wird intern zu #FF5533 expandiert, jede Ziffer wird also verdoppelt. Seit CSS Color Level 4 sind zusaetzlich acht Ziffern erlaubt, wobei die letzten beiden den Alpha-Kanal angeben: #FF5733CC ist dieselbe Farbe mit rund 80 Prozent Deckkraft.
RGB und RGBA: die direkte Sicht auf die Kanaele
Die Funktion rgb() nennt die drei Kanaele als Dezimalzahlen von 0 bis 255. rgb(255, 87, 51) ist damit lesbarer als der gleichwertige HEX-Code, weil man die Helligkeit jedes Kanals direkt ablesen kann. Genau das ist ihr Vorteil, wenn man Farben programmatisch erzeugt oder in JavaScript berechnet, etwa bei Animationen oder Datenvisualisierungen.
rgba() ergaenzt einen vierten Wert, das Alpha, fuer die Deckkraft. Es reicht von 0 (unsichtbar) bis 1 (voll deckend). rgba(255, 87, 51, 0.5) ist also halbtransparent und besonders nuetzlich fuer Overlays, Schatten und Glas-Effekte, bei denen der Hintergrund durchscheinen soll.
Klassische und moderne Syntax
Seit dem CSS Color Module Level 4 sind die Kommas optional. Die moderne Schreibweise trennt die Werte mit Leerzeichen und haengt das Alpha mit einem Schraegstrich an. Beide Varianten sind in allen aktuellen Browsern gueltig:
color: rgba(255, 87, 51, 0.5);
/* modern, Leerzeichen und Slash fuer Alpha */
color: rgb(255 87 51 / 50%);
In der modernen Syntax verschwimmt der Unterschied zwischen rgb() und rgba(), denn rgb() kann das Alpha jetzt selbst aufnehmen. Der separate Name rgba() bleibt aus Kompatibilitaetsgruenden gueltig, ist aber nicht mehr zwingend notwendig.
HSL und HSLA: gedacht fuer Menschen
HSL steht fuer Hue (Farbton), Saturation (Saettigung) und Lightness (Helligkeit). Statt drei Lichtkanaelen beschreibt es eine Farbe so, wie Menschen ueber Farben sprechen:
- Hue ist ein Winkel von 0 bis 360 Grad auf dem Farbkreis: 0 ist Rot, 120 ist Gruen, 240 ist Blau.
- Saturation ist die Farbintensitaet von 0 Prozent (grau) bis 100 Prozent (volle Farbe).
- Lightness ist die Helligkeit von 0 Prozent (schwarz) ueber 50 Prozent (reine Farbe) bis 100 Prozent (weiss).
Der grosse Vorteil: Sie koennen eine Farbe heller oder dunkler machen, ohne ihren Charakter zu verlieren. Aus hsl(11, 100%, 60%) wird mit hsl(11, 100%, 45%) ein dunkleres, aber farblich passendes Orangerot. Das macht HSL ideal fuer Hover-Zustaende, abgestufte Farbpaletten und Themes. hsla() fuegt wie bei RGBA einen Alpha-Wert fuer die Deckkraft hinzu.
Wie die Formate zusammenhaengen
Das folgende Diagramm zeigt, dass alle vier Notationen auf denselben sRGB-Farbraum verweisen. Die Umrechnung zwischen ihnen ist verlustfrei, solange man im selben Farbraum bleibt:
Direkter Vergleich der Formate
Die folgende Tabelle fasst die wichtigsten Eigenschaften zusammen und hilft bei der schnellen Entscheidung:
| Format | Beispiel | Alpha? | Staerke | Ideal fuer |
|---|---|---|---|---|
| HEX | #FF5733 | ab 8 Stellen | kompakt, ueberall kopierbar | Markenfarben, statische Werte |
| RGB | rgb(255,87,51) | nur als RGBA | Kanaele direkt lesbar | berechnete Farben, JS |
| RGBA | rgba(255,87,51,.5) | ja | Transparenz | Overlays, Schatten, Glas |
| HSL / HSLA | hsl(11,100%,60%) | als HSLA | intuitiv anpassbar | Themes, Hover, Paletten |
Praxis: dieselbe Farbe als CSS-Variable
In modernen Projekten definiert man Farben einmal zentral als CSS-Variable und verwendet sie ueberall wieder. So spielt das gewaehlte Format keine Rolle mehr fuer die Wartbarkeit, denn eine Aenderung an einer Stelle wirkt im ganzen Stylesheet:
--akzent: #FF5733;
--akzent-rgb: 255 87 51;
}
.button {
background: var(--akzent);
/* halbtransparenter Schatten aus derselben Farbe */
box-shadow: 0 6px 16px rgb(var(--akzent-rgb) / 35%);
}
Hier zeigt sich der praktische Nutzen der RGB-Komponenten: Indem man die Kanaele als --akzent-rgb ablegt, laesst sich aus derselben Farbe per Alpha jederzeit eine transparente Variante erzeugen, ohne einen zweiten Farbwert pflegen zu muessen.
Empfehlung: Welches Format wann?
Es gibt kein universell bestes Format, aber klare Faustregeln:
- HEX fuer feste Markenfarben und alles, was Sie aus einem Designtool kopieren. Kurz, vertraut, ueberall einsetzbar.
- RGB wenn Sie Farben im Code berechnen oder einzelne Kanaele lesen und veraendern wollen.
- RGBA sobald Transparenz ins Spiel kommt, also fuer Overlays, Schatten und durchscheinende Flaechen.
- HSL / HSLA wenn Sie Farbabstufungen, Hover-Zustaende oder ganze Paletten systematisch ableiten wollen.
Wichtig ist vor allem Konsistenz innerhalb eines Projekts. Legen Sie Ihre Farben als Variablen an, dann koennen Sie das passende Format pro Anwendungsfall waehlen, ohne den Ueberblick zu verlieren. Und wann immer Sie zwischen den Notationen umrechnen muessen, hilft der Converter weiter.
Haeufige Fragen zu Farbformaten
Was ist der Unterschied zwischen HEX und RGB?
HEX und RGB beschreiben exakt dieselbe Farbe, nur in anderer Schreibweise. RGB nennt die drei Kanaele Rot, Gruen und Blau als Dezimalzahlen von 0 bis 255, zum Beispiel rgb(255, 87, 51). HEX schreibt dieselben Werte hexadezimal in einem kompakten String, hier #FF5733. Es gibt keinen Qualitaets- oder Farbraumunterschied: HEX ist nur eine kuerzere Notation desselben sRGB-Werts.
Wann sollte ich HSL statt HEX oder RGB verwenden?
HSL ist die richtige Wahl, wenn Sie Farben gezielt anpassen wollen. Weil Farbton, Saettigung und Helligkeit getrennte Achsen sind, koennen Sie eine Farbe heller oder dunkler machen, ohne den Farbton zu verlieren. Das ist ideal fuer Hover-Zustaende, Farbpaletten und Themes. Fuer feste Markenfarben, die nur einmal definiert und kopiert werden, sind HEX oder RGB meist praktischer.
Wofuer steht das A in RGBA und HSLA?
Das A steht fuer Alpha und beschreibt die Deckkraft (Opazitaet). Der Wert reicht von 0 (vollstaendig transparent) bis 1 (vollstaendig deckend). rgba(255, 87, 51, 0.5) ist also dieselbe Farbe wie rgb(255, 87, 51), aber zu 50 Prozent durchsichtig. Seit CSS Color Module Level 4 koennen auch rgb() und hsl() ein Alpha aufnehmen, der separate Funktionsname rgba() ist damit technisch nicht mehr zwingend.
Gibt es einen Unterschied zwischen rgb(255 0 0) und rgb(255, 0, 0)?
Inhaltlich nein, beide ergeben dasselbe Rot. Der Unterschied ist nur die Syntax: rgb(255, 0, 0) ist die klassische, kommaseparierte Schreibweise, rgb(255 0 0) ist die moderne Variante aus CSS Color Level 4 mit Leerzeichen. In der neuen Syntax wird das Alpha mit einem Schraegstrich angehaengt, etwa rgb(255 0 0 / 50%). Alle aktuellen Browser unterstuetzen beide Formen.
Welches Farbformat ist fuer Barrierefreiheit am besten geeignet?
Fuer die WCAG-Kontrastpruefung spielt das Notationsformat keine Rolle, da HEX, RGB und HSL alle in denselben sRGB-Wert aufgeloest werden. Praktisch ist HSL aber hilfreich, weil sich ueber die Helligkeitsachse (L) gezielt kontrastreichere Varianten erzeugen lassen. Entscheidend fuer die Barrierefreiheit ist der berechnete Kontrastwert, nicht die Schreibweise der Farbe.
Kann ich HEX, RGB und HSL im selben Stylesheet mischen?
Ja, das ist vollkommen zulaessig und in der Praxis sehr verbreitet. CSS wertet jede Farbangabe einzeln aus, das Format ist frei waehlbar. Aus Konsistenzgruenden empfiehlt es sich trotzdem, pro Projekt eine bevorzugte Notation festzulegen oder Farben als CSS-Variablen zentral zu definieren, damit Code lesbar und wartbar bleibt.
Quellen
- W3C: CSS Color Module Level 4, Spezifikation der Farbnotationen rgb(), hsl() und HEX.
- MDN Web Docs: CSS color value, Referenz zu HEX, RGB, RGBA, HSL und HSLA.
- MDN Web Docs: hsl(), Funktionsweise von Farbton, Saettigung und Helligkeit.
- W3C: WCAG 2.2, Erfolgskriterium 1.4.3 Kontrast, Grundlage der Kontrastpruefung.
Verwandte Artikel
Farbformate direkt umrechnen
Geben Sie einen HEX-Code ein und erhalten Sie sofort RGB, RGBA und HSL, mit Live-Farbvorschau und 100 Prozent lokal im Browser.
Zum HEX zu RGB Converter