HEX vs. RGB vs. HSL: Welches Farbformat sollten Sie verwenden?

HEX vs. RGB vs. HSL: Welches Farbformat sollten Sie verwenden?

CSS bietet mehrere Möglichkeiten, Farben zu definieren, aber die drei gebräuchlichsten Formate sind HEX, RGB und HSL. Jedes Format hat klare Stärken, und zu wissen, wann man welches verwendet, kann die Wartbarkeit Ihres Stylesheets und Ihre Fähigkeit, dynamische Farbsysteme zu erstellen, erheblich verbessern. Dieser Leitfaden zerlegt jedes Format, damit Sie für jede Situation das richtige wählen können.

HEX-Farbformat: Der Industriestandard

HEX-Farben (hexadezimal) sind das am weitesten verbreitete Format im Webdesign. Eine Hex-Farbe wird als # gefolgt von sechs hexadezimalen Ziffern geschrieben, die die Rot-, Grün- und Blauwerte in dieser Reihenfolge darstellen.

#FF5733

• #FF — Rot (255 in dezimal)
• #57 — Grün (87 in dezimal)
• #33 — Blau (51 in dezimal)

HEX-Varianten

HEX unterstützt mehrere Notationen für verschiedene Bedürfnisse:

/* Standard-Sechs-Ziffern-Hex */
color: #FF5733;

/* Kurzform – identische Paare werden auf drei Ziffern reduziert */
color: #F53; /* Wird zu #FF5533 erweitert */

/* Acht-Ziffern-Hex mit Alpha-Kanal */
color: #FF573380; /* 50 % Deckkraft */

Kurzform-HEX funktioniert, wenn jedes Paar übereinstimmende Zeichen verwendet: #AABBCC wird zu #ABC. Dies ist eine rein platzsparende Konvention, die von allen Browsern unterstützt wird.

Acht-Ziffern-HEX (#RRGGBBAA) fügte Alpha-Transparenz hinzu. Der Alpha-Wert reicht von 00 (vollständig transparent) bis FF (vollständig deckend). Die Browserunterstützung für 8-stelliges Hex ist in allen modernen Browsern ausgezeichnet.

Vier-Ziffern-Kurzform (#RGBA) existiert ebenfalls: #F538 wird zu #FF553388 erweitert.

Wann HEX verwenden

• Kopieren aus Designtools — Figma, Sketch und Adobe XD geben standardmäßig Hex aus
• Fest codierte Markenfarben — Hex ist für Werte, die sich nie ändern, eindeutig und kompakt
• Dokumentation und Mockups — Hex ist das am ehesten erkennbare Format unter Designern und Entwicklern
• CSS-Custom-Properties — Das Speichern von Marken-Tokens in Hex ist gängige Praxis

Wann HEX vermeiden

• Programmatische Farbmanipulation — Das Anpassen einzelner Kanäle erfordert String-Parsing
• Erstellen von Farbsystemen — Das Erzeugen hellerer oder dunklerer Varianten erfordert nicht-triviale Mathematik
• Vermittlung von Farbabsicht — Hex gibt keine semantischen Informationen über die Farbe

RGB-Farbformat: Kanalsteuerung

RGB steht für Rot, Grün, Blau. In CSS wird es als Funktion mit Werten von 0 bis 255 oder Prozentsätzen (0 % bis 100 %) geschrieben.

/* Ältere, durch Kommas getrennte Syntax */
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.5);

/* Moderne, durch Leerzeichen getrennte Syntax */
color: rgb(255 87 51);
color: rgb(255 87 51 / 0.5);

/* Prozentwerte */
color: rgb(100% 34% 20%);

Verbesserungen der modernen RGB-Syntax

Die CSS-Color-Level-4-Spezifikation modernisierte die Funktion rgb() auf zwei wichtige Arten:

1. Durch Leerzeichen getrennte Werte — Kommas sind nicht mehr erforderlich, was die Syntax sauberer macht
2. Alpha durch Schrägstrich getrennt — Das Alias rgba() ist nicht mehr nötig; rgb() akzeptiert nun einen optionalen Alpha-Kanal

Sowohl die ältere als auch die moderne Syntax werden vollständig unterstützt, aber für neuen Code wird die moderne Syntax empfohlen.

Wann RGB verwenden

• Canvas und WebGL — Bilddaten-APIs geben Pixelwerte in RGB zurück
• Numerische Farbanpassungen — Wenn Sie Rot-, Grün- und Blauwerte als separate Variablen gespeichert haben
• Übertragung aus Design-Spezifikationen — Einige Designsysteme geben Farben als RGB-Tripel an
• Arbeiten mit Farbwählern — Viele Farbwähler-Oberflächen verwenden 0–255-Schieberegler

Wann RGB vermeiden

• Erstellen kohärenter Farbpaletten — Das unabhängige Verändern aller drei Kanäle macht konsistente Anpassungen schwierig
• Menschliche Lesbarkeit — rgb(123, 45, 67) vermittelt kein unmittelbares Gefühl dafür, welche Farbe es darstellt

HSL-Farbformat: Menschenfreundliche Farben

HSL steht für Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness). Dieses Format ist für Menschen intuitiver, weil es die Farbe selbst (Farbton) von ihrer Intensität (Sättigung) und Helligkeit (Lightness) trennt.

/* Ältere Syntax */
color: hsl(12, 100%, 60%);
color: hsla(12, 100%, 60%, 0.5);

/* Moderne Syntax */
color: hsl(12 100% 60%);
color: hsl(12 100% 60% / 0.5);

HSL-Kanäle verstehen

Farbton (0–360) — Der Farbwinkel im Farbkreis. Dies ist die Komponente „welche Farbe ist es":

| Farbtonwert | Farbe | |-----------|---------| | 0 oder 360 | Rot | | 30 | Orange | | 60 | Gelb | | 120 | Grün | | 180 | Cyan | | 240 | Blau | | 300 | Magenta |

Sättigung (0–100 %) — Wie intensiv oder lebendig die Farbe ist. 0 % erzeugt einen Grauton; 100 % ist die reinste Version des Farbtons.

Helligkeit (0–100 %) — Wie hell oder dunkel die Farbe ist. 0 % ist immer Schwarz, 50 % ist die „normale" Version des Farbtons und 100 % ist immer Weiß.

Warum HSL für Farbsysteme überlegen ist

HSL macht Aufgaben, die in HEX oder RGB schwierig sind, trivial einfach:

/* Primäre Markenfarbe */
--brand: hsl(220, 80%, 50%);

/* Hover-Zustand – etwas heller */
--brand-hover: hsl(220, 80%, 60%);

/* Aktiv-Zustand – etwas dunkler */
--brand-active: hsl(220, 80%, 40%);

/* Deaktivierter Zustand – entsättigt */
--brand-disabled: hsl(220, 30%, 70%);

/* Hintergrund-Tönung – sehr hell */
--brand-bg: hsl(220, 40%, 95%);

Mit HSL ist jede Variante eine Änderung einer einzigen Variable. Das ist mit HEX unmöglich und mit RGB umständlich.

Wann HSL verwenden

• Erstellen von Farbpaletten — HSL ist der De-facto-Standard für die Erzeugung von Design-Tokens
• Themes und Dunkelmodus — Helligkeitswerte austauschen, um Dunkelmodus-Varianten zu erstellen
• Hover- und Fokus-Zustände — Helligkeit um einen festen Prozentsatz anpassen
• Barrierefreiheitsanpassungen — Helligkeitskontrast erhöhen, ohne die Farbe zu ändern
• Interaktive Farbwähler — HSL-Schieberegler sind intuitiver als RGB-Schieberegler

Schnelle Vergleichstabelle

| Funktion | HEX | RGB | HSL | |---------|-----|-----|-----| | Lesbarkeit auf Pixelebene | Schlecht | Mittel | Gut | | Kanal-Semantik | Undurchsichtig | Numerisch | Wahrnehmungsbezogen | | Programmatische Anpassung | Schwer | Mittel | Einfach | | Alpha-Transparenz | 8-stelliges Hex | rgb(R G B / A) | hsl(H S% L% / A) | | Browserunterstützung | Ausgezeichnet | Ausgezeichnet | Ausgezeichnet | | Moderne Syntax | Nein | Ja | Ja | | Standard in Designtools | Ja | Üblich | Selten | | Eignung für Farbsysteme | Schlecht | Mäßig | Ausgezeichnet |

Browserunterstützung: Alle drei sind sicher

HEX, RGB und HSL genießen identische Browserunterstützung. Alle drei funktionieren in jedem Browser, der seit Internet Explorer 9 veröffentlicht wurde. Die moderne, durch Leerzeichen getrennte Syntax (rgb(255 0 0 / 0.5)) wird in allen Browsern unterstützt, die seit 2020 veröffentlicht wurden. Es gibt keinen Kompatibilitätsgrund, eines dem anderen vorzuziehen.

Praktischer Entscheidungsrahmen

Wählen Sie Ihr Format basierend darauf, was Sie tun:

1. Kopieren Sie aus einem Design-Mockup? Verwenden Sie HEX – es ist das, was Designtools ausgeben.
2. Bauen Sie ein Design-Token-System? Verwenden Sie HSL – es macht die Palettenerzeugung trivial.
3. Arbeiten Sie mit Canvas oder Bilddaten? Verwenden Sie RGB – Pixel-APIs verwenden nativ RGB.
4. Schreiben Sie eine einmalige Stilregel? Verwenden Sie HEX – es ist am kompaktesten.
5. Erstellen Sie dynamische Farbübergänge? Verwenden Sie HSL – das Interpolieren des Farbtons erzeugt Regenbogeneffekte; das Interpolieren von RGB erzeugt schlammige Zwischenfarben.

Zwischen jedem Format konvertieren

Nutzen Sie unseren kostenlosen Online-Color-Converter, um sofort zwischen HEX, RGB, HSL und anderen CSS-Farbformaten zu konvertieren. Keine manuelle Mathematik oder Spurensuche in den Browser-DevTools mehr.