HEX vs RGB vs HSL vs OKLCH – In welchen Situationen jeder CSS-Farbbereich sinnvoll ist

Öffnen Sie einen beliebigen Quellcode, der von jemandem geschrieben wurde, der CSS im Jahr 2011 bei W3Schools gelernt hat, und Sie werden eine Wand aus #rrggbb Werten finden. HEX ist überall – nicht weil es das beste Format für die Aufgabe ist, sondern weil es in allen Anleitungen und Farbselectoren, die wir zuerst bei CSS gelernt haben, verwendet wurde. Es funktioniert immer noch. Es wird nicht verschwinden. Doch im Jahr 2026 ist die Verwendung von HEX für alles wie die Schreibung von JavaScript ohne const weil Sie aus einem Blogbeitrag aus dem Jahr 2009 gelernt haben.

Es gibt vier Farbformate, die bekannt sein sollten: HEX, RGB, HSL und OKLCH. Jedes Format ist in bestimmten Situationen die richtige Wahl – und in anderen die falsche. Hier ist, wann welche verwendet wird.

HEX (#rrggbb / #rrggbbaa)

HEX kodiert Farben als Paare hexadezimaler Ziffern: zwei für Rot, zwei für Grün, zwei für Blau. #ff5733 übersetzt sich in rgb(255, 87, 51) – ein orangefarbenes Rot. Ohne einen Farbselectoren offen zu haben, können Sie diesen Wert nicht lesen; Sie müssen ihn einfach kennen.

Es gibt eine Abkürzung: #f53 erweitert sich auf #ff5533. Es funktioniert nur dann, wenn beide Ziffern in jedem Paar identisch sind. Transparenz ist das vierte Paar: #ff5733cc – wobei cc die Alpha-Kanal ist. Das ist etwa 80% Transparenz für diejenigen, die zu Hause bei der Berechnung bleiben (0xCC / 0xFF ≈ 0.8). Gänzlich gültig, völlig unlesbar.

Wann HEX sinnvoll ist

• Design-Token aus Figma oder Sketch. Designer exportieren HEX. Sie fügen HEX ein. Das ist der Workflow. Widerstehen Sie ihm nicht.
• Überall, wo der Wert statisch ist und visuelle Werkzeuge ihn steuern. Wenn ein VS-Code-Farbselectoren oder Browser-DevTools das Wert produzieren, ist HEX in Ordnung.
• Dritte Parteien-Integrationen die nur HEX-Eingabe akzeptieren.

Wann HEX die falsche Wahl ist

• Farben programmatisch zu verändern – Sie können die Berechnung nicht vernünftig auf #ff5733
• Farbverhältnisse ausdrücken – es gibt keine intuitive Möglichkeit, eine heller oder dunkler Variante abzuleiten
• Ein Designsystem mit semantischen Tokens zu bauen

RGB / RGBA

RGB gibt die gleichen Rot-, Grün- und Blau-Kanäle in reinen Dezimalzahlen aus. rgb(255, 87, 51) ist das gleiche orangefarbene Rot wie #ff5733, aber die Kanalwerte sind zumindest menschlich lesbar. Die moderne CSS-Farbebene 4-Syntax entfernt die Kommas: rgb(255 87 51). Transparenz wird mit einem Slash ausgedrückt: rgb(255 87 51 / 50%). Die alte rgba(255, 87, 51, 0.5) funktioniert immer noch – Browser haben es nicht abgeschafft und werden es nicht ablegen.

Wann RGB sinnvoll ist

• Farbverarbeitung in JavaScript. Wenn Sie die Helligkeit durch Mischung mit Weiß anpassen müssen: Sie können die Kanalwerte direkt arithmetisch verarbeiten.
• Canvas und WebGL. Die APIs arbeiten mit ganzen Zahlen von 0 bis 255 oder mit Gleitkommazahlen von 0 bis 1. RGB entspricht direkt dem, was das unterliegende Pixel-System erwartet.
• Wenn Sie Kanalwerte aus einem Hardware-Sensor oder einem Bildbibliothek erhalten und Sie keine Umrechnung benötigen.

Wann RGB die falsche Wahl ist

• Farbschemata zu entwerfen – es gibt kein visuelles mentales Modell dafür, was kleine RGB-Änderungen aussehen
• Dark-Mode-Theming – Sie müssten alle drei Kanäle neu berechnen, um die Helligkeit zu verschieben

HSL (Hue / Saturation / Lightness)

HSL ist das erste Farbformat, das auf die Weise abgebildet wird, wie Menschen Farben tatsächlich wahrnehmen. Hue ist ein Winkel auf der Farbwelle (0–360°), Saturation steuert die Farbintensität (0% = Grau, 100% = rein), und Lightness steuert die Helligkeit (0% = schwarz, 100% = weiß). hsl(14 100% 60%) ist das gleiche orangefarbene Rot.

Der praktische Vorteil: Wenn Sie eine dunklere Variante einer Farbe benötigen, verringern Sie den Lightness-Wert. Eine gedämpfte Version? Verringern Sie die Saturation. Sie können aus einem einzigen Hue-Wert eine vollständige Tonpalette ableiten. Deshalb sind CSS-Design-Systeme, die auf HSL basieren, so verbreitet:

:root {
  --brand-hue: 14;
  --brand-saturation: 100%;

  --brand-400: hsl(var(--brand-hue) var(--brand-saturation) 70%);
  --brand-500: hsl(var(--brand-hue) var(--brand-saturation) 60%);
  --brand-600: hsl(var(--brand-hue) var(--brand-saturation) 50%);
  --brand-700: hsl(var(--brand-hue) var(--brand-saturation) 40%);
}

Transparenz funktioniert genauso wie bei den anderen: hsl(14 100% 60% / 50%).

Es gibt eine echte Beschränkung bei HSL: Die Lightness-Skala ist nicht visuell gleichmäßig. Zwei Farben mit demselben L-Wert können sich in Helligkeit sehr unterschieden – probieren Sie hsl(60 100% 50%) (gelb) und hsl(240 100% 50%) (blau) nebeneinander. Gelb sieht dramatisch heller aus, obwohl sie L=50% teilen. Das spielt bei zugänglicher Gestaltung und besonders bei Farbgradienten eine Rolle.

Wann HSL sinnvoll ist

• Farb-Systeme und Design-Token. Das oben beschriebene einfarbige Palette-Muster ist ergonomisch und lesbar.
• Dark-Mode-Theming. Wechseln Sie den L-Wert, lassen Sie alles andere unverändert. Es funktioniert sauber.
• Töne und Schattierungen in CSS-Design-Property – der Fall, für den es entwickelt wurde.

OKLCH – Die moderne Ersatzlösung

OKLCH ist das, was HSL eigentlich sein sollte. Es beschreibt Farben in drei Werten: Lightness (0–1), Chroma (wie Saturation, etwa 0–0.4) und Hue (0–360°). oklch(0.65 0.18 28) ist etwa das gleiche orangefarbene Rot.

Der wesentliche Unterschied zu HSL ist die visuelle Gleichmäßigkeit. In OKLCH sehen zwei Farben mit demselben L-Wert dem menschlichen Auge tatsächlich gleich hellig aus. Gelb bei L=0.65 und Blau bei L=0.65 erscheinen gleich hell – im Gegensatz zu HSL, wo Gelb dominiert. Das spielt zwei spezifische Rollen:

• Zugängliche Gestaltung. Wenn Sie Kontrastverhältnisse auf der Grundlage von L-Werten berechnen, spiegeln sie das, was Benutzer tatsächlich wahrnehmen – nicht nur das, was die Mathematik sagt.
• Gradienten. Ein HSL-Gradient von Blau zu Gelb verläuft durch eine matschige graue Zone in der Mitte. Der gleiche Gradient in OKLCH bleibt durchgehend lebendig, weil die Zwischenschritte konstante wahrgenommene Helligkeit aufweisen.

Browserunterstützung ab 2023: alle modernen Browser (Chrome 111+, Firefox 113+, Safari 15.4+). Keine Unterstützung für IE11 – und niemand, der neue Code im Jahr 2026 veröffentlicht, zielt auf IE11 ab.

Tailwind v4 hat seine gesamte Farbpalette auf OKLCH umgestellt. Das ist keine kleine Implementierungsdetails – es ist ein Signal von dem am häufigsten verwendeten CSS-Framework, dass dies die richtige Richtung für Farb-Systeme ist.

Wenn Sie HSL oder OKLCH-Gradienten entwickeln oder experimentieren, unterstützt die CSS-Gradient-Generator on IO Tools beide Formate direkt – nützlich, um die Unterschiede in der Gradientenqualität nebeneinander zu sehen.

Wann OKLCH sinnvoll ist

• Neue Design-Systeme, die von Grund auf aufgebaut werden. Wenn Sie Ihre Farb-Token heute definieren, bietet OKLCH Ihnen eine visuell gleichmäßige Eigenschaft, die HSL nicht hat.
• Gradientenreiche UIs. Der Unterschied in der Gradientenqualität ist sichtbar und bedeutend.
• Zugängliche Farbpaletten wo Sie Kontrastverhältnisse auf tatsächliche visuelle Wahrnehmung beruhen müssen.

Die gleiche Farbe in allen vier Formaten

Hier ist rgb(255, 87, 51) – ein warmes orangefarbenes Rot – in allen Formaten dargestellt, mit 50%-Transparenzvarianten:

Format	Einfarbige Fläche	50% Transparent
HEX	#ff5733	#ff573380
RGB	rgb(255 87 51)	rgb(255 87 51 / 50%)
HSL	hsl(14 100% 60%)	hsl(14 100% 60% / 50%)
OKLCH	oklch(0.65 0.18 28)	oklch(0.65 0.18 28 / 50%)

Beachten Sie, welche Variante Sie manuell ändern würden, wenn Sie die Farbe um 20% dunkler machen müssten. HEX: Sie würden ein Farbselectoren öffnen. RGB: Sie würden drei Werte arithmetisch verarbeiten. HSL: Sie ändern den L-Wert von 60% auf 40%. OKLCH: Sie ändern den L-Wert von 0.65 auf 0.45. Die HSL- und OKLCH-Versionen drücken den Absicht direkt aus.

Der praktische Übergangsweg

Verändern Sie nicht Ihre bestehenden HEX-Werte. Sie funktionieren, sie sind nicht defekt, und der ROI für diese Änderung ist praktisch null. Lassen Sie sie.

Für neue Arbeiten wenden Sie diese Regeln an:

• Statistische Farben aus einem Designer oder einem Designwerkzeug → HEX. Fügen Sie das, was Figma gibt, einfach ein. Keine Umrechnung erforderlich.
• Farben, die in JavaScript manipuliert oder an Canvas/WebGL übergeben werden → RGB. Die kanalbasierte Mathematik passt sich direkt an.
• Neue CSS-Design-Property und Design-Token → HSL oder OKLCH. Sie wollen die Fähigkeit, Töne und Schattierungen ohne erneute Berechnung von drei separaten Werten abzuleiten.
• Neues Designsystem von Grund auf oder Gradientenreiche Arbeit → OKLCH. Die visuelle Gleichmäßigkeit lohnt sich, obwohl die Lernkurve für Chroma-Werte leicht ist.

Ein konkreter Muster für CSS-Design-Property in einem neuen Projekt:

:root {
  /* Define the base in OKLCH */
  --brand: oklch(0.65 0.18 28);

  /* Derive tonal variants by adjusting L */
  --brand-light: oklch(0.78 0.14 28);
  --brand-dark:  oklch(0.48 0.20 28);
  --brand-muted: oklch(0.65 0.08 28);

  /* Transparency with the slash syntax */
  --brand-ghost: oklch(0.65 0.18 28 / 15%);
}

Dies ist lesbar, ohne Werkzeuge bearbeitbar und erzeugt bessere Gradienten als die entsprechende HSL-Approach.

Das Fazit

HEX ist nicht falsch – es ist nur spezialisiert. Es ist optimiert für Werte, die Sie aus visuellen Werkzeugen erhalten und in Code einfügen, nicht für Werte, die Sie denken oder verändern. RGB ist nützlich, wenn Sie mit JavaScript oder Canvas-APIs interagieren. HSL ist immer noch eine solide Wahl für Design-Token, wenn Sie in einem bestehenden Code-Repository arbeiten. OKLCH ist der Ort, an dem Sie für neue Designsysteme landen sollten.

Die Hürde zur Einführung von HSL oder OKLCH ist niedriger, als es aussieht. Sie müssen nichts migrieren – sondern beginnen einfach, sie für die nächste Menge von Tokens zu verwenden. Die Farbauswahl on IO Tools zeigt jede Farbe in allen vier Formaten gleichzeitig, was ein nützlicher Referenzpunkt ist, wenn Sie bestehende HEX-Werte in HSL oder OKLCH für ein neues Token umwandeln.

Das könnte Ihnen auch gefallen