HEX vs. RGB vs. HSL: Welches CSS-Farbformat solltest du nutzen?
HEX, RGB und HSL beschreiben dieselben Farben — sie sind nur verschiedene Schreibweisen für denselben Punkt im sRGB-Farbraum. Jede hat ihre Stärke: HEX ist kompakt und überall zu Hause, RGB verträgt sich gut mit Transparenz, und HSL ist am intuitivsten, wenn du Farben von Hand anpasst. Die richtige Wahl macht dein CSS lesbarer und dein Farbsystem pflegeleichter.
| Aspekt | Format | Am besten für |
|---|---|---|
| HEX (#0070F3) | Kompakt, universell, designfreundlich | Feste Markenfarben, Design-Übergabe |
| RGB / RGBA | Explizite Kanäle, einfacher Alphawert | Transparenz, Rechnen mit Kanälen |
| HSL / HSLA | Menschlich intuitiv: Farbton, Sättigung, Helligkeit | Abstufungen, Themes, Paletten |
| Farbe heller machen | HEX: neu berechnen; RGB: neu berechnen | HSL: einfach Helligkeit erhöhen |
| Transparenz | HEX 8-stellig, RGBA, HSLA möglich | RGBA / HSLA am lesbarsten |
| Browser-Unterstützung | Universell | Universell |
HEX: kompakt und universell
Die HEX-Schreibweise (#RRGGBB) packt Rot-, Grün- und Blaukanal in sechs Hexadezimalziffern. Sie ist in Design-Werkzeugen und Markenrichtlinien am verbreitetsten, weil sie kurz und eindeutig ist. Eine achtstellige Form (#RRGGBBAA) ergänzt Transparenz.
Nachteil: HEX lässt sich mit bloßem Auge schwer einschätzen — man sieht #3B82F6 nicht an, dass es ein etwas helleres Blau ist als #2563EB. Bei festen Farben aus einem Design ist das selten ein Problem.
RGB: explizite Kanäle und einfache Transparenz
Die RGB-Schreibweise — rgb(0, 112, 243) — nennt jeden Kanal als Wert zwischen 0 und 255, RGBA ergänzt einen Alphakanal für die Deckkraft. RGB ist praktisch, wenn du mit einzelnen Kanälen rechnest oder ein Designsystem Farben als getrennte Zahlen speichert.
Für Transparenz ist rgba(0, 112, 243, 0.5) lesbarer als das achtstellige HEX-Äquivalent — deshalb greifen viele Entwickelnde für halbtransparente Farben zu RGBA.
HSL: am intuitivsten zum Anpassen
HSL — hsl(211, 100%, 48%) — beschreibt eine Farbe über Farbton (Position auf dem Farbkreis), Sättigung (wie kräftig) und Helligkeit. Das entspricht dem menschlichen Denken über Farbe und macht HSL zur besten Wahl für Tonabstufungen: Farbton und Sättigung festhalten, die Helligkeit hoch- und runterstufen — fertig ist ein stimmiger Satz Schattierungen für ein Designsystem.
Auch Themes werden damit einfach. Speichere Basis-Farbton und -Sättigung als CSS-Custom-Properties, und du leitest jede Abstufung allein über die Helligkeit ab.
Häufig gestellte Fragen
Sind HEX, RGB und HSL dieselben Farben?
Ja — alle drei beschreiben Farben im selben sRGB-Raum, jede Farbe lässt sich also in allen dreien identisch ausdrücken. Es sind verschiedene Schreibweisen, keine verschiedenen Farbräume. Unser Farbwähler zeigt alle drei (plus CMYK) für dieselbe Farbe.
Welches Farbformat ist das beste für CSS?
Es gibt kein einziges bestes: HEX für feste Markenfarben, RGBA für Transparenz, HSL für Abstufungen und Themes. Viele moderne Projekte setzen auf HSL-Custom-Properties, gerade weil sich die Helligkeit so leicht anpassen lässt.
Wie mache ich eine Farbe heller oder dunkler?
In HSL erhöhst oder senkst du einfach den Helligkeitswert — Farbton und Sättigung bleiben gleich. In HEX oder RGB musst du alle Kanäle neu berechnen; deshalb ist HSL für Tints und Shades die erste Wahl.
Können alle drei Formate Transparenz?
Ja. RGBA und HSLA ergänzen einen Alphakanal, und HEX unterstützt Transparenz in der achtstelligen Form (#RRGGBBAA). RGBA und HSLA sind meist am lesbarsten, wenn du eine bestimmte Deckkraft brauchst.