RGB in HSL umrechnen

Dieser RGB-zu-HSL-Konverter rechnet RGB-Werte (Rot, Grün, Blau) sofort in HSL (Farbton, Sättigung, Helligkeit) und HEX um. Entwickelt für Designer, Entwickler und alle, die mit Farbsystemen arbeiten.

Zuletzt aktualisiert: 23. September 2026

Die wichtigsten Features

• Echtzeit-Konvertierung, wenn Sie Werte anpassen

• Zwei Eingabemethoden: Zahlenfelder und glatte Schieberegler

• Live Farbvorschau zeigt Ihre Farbe sofort

• Ausgabe in drei Formaten: RGB, HSL und Hexadezimal

• Click-to-copy für jedes Format, auch mit Enter oder Space von der Tastatur

• 10 voreingestellte Farben für schnelle Startpunkte

• Zufälliger Farbgenerator zur Inspiration

• Eingangsvalidierung klemmt jeden Kanal auf 0-255

Warum es verwenden?

CSS unterstützt sowohl RGB als auch HSL. RGB arbeitet in Absoluten (0-255 pro Kanal). HSL denkt in menschlichen Begriffen: Wählen Sie einen Farbton, passen Sie die Helligkeit an, optimieren Sie die Sättigung.

Die manuelle Konvertierung zwischen ihnen ist mühsam. Dieses Tool macht es sofort.

Perfekt für:

• CSS Farbkonvertierung

• Design-Systementwicklung

• Farbpalette erstellen

• Schnelle Farbexperimente

• Farbtheorie lernen

Vollständig responsive, so dass es auf Mobilgeräten, Tablets und Desktops funktioniert.

Was ist ein RGB zu HSL Konverter?

Ein RGB-zu-HSL-Konverter ist ein Farbkonvertierungswerkzeug, das drei RGB-Kanalwerte nimmt und deren Farbton-, Sättigungs- und Helligkeitsäquivalente ausgibt.

Es entfernt die manuelle Mathematik beim Wechseln zwischen RGB-Farbwerten und ihren HSL-Gegenstücken, etwas, das Designer ständig tun, wenn sie zwischen Code und Design-Software wechseln.

Kernfunktion:

• Akzeptiert RGB-Eingaben als drei ganze Zahlen zwischen 0 und 255 (ausgehend von einem Hex-Code? Führen Sie es durch den HEX zu RGB Konverter zuerst)
• Führt die RGB zu HSL-Formel automatisch im Hintergrund aus
• Zeigt ein Live-Farbfeld an, das bei Änderung der Werte aktualisiert wird

Chrome DevTools zeigt diese gleiche HSL-Aufschlüsselung an, sobald Sie im Elements-Bedienfeld auf ein Farbfeld klicken, ohne dass ein externer Konverter erforderlich ist.

Moderne Browser unterstützen die hsl() Syntax bereits nativ. Die klassische, durch Kommas getrennte Form funktioniert seit über einem Jahrzehnt, und die neuere, durch Leerzeichen getrennte Syntax aus CSS Color Module Level 4 (EN) erreichte im Juli 2022 den Baseline widely available (EN)-Status.

Ein Konverter verdient seinen Platz immer noch anderswo, in der Designübergabe, in Skripts und in Werkzeugen, die nur RGB oder Hex sprechen.

Was ist der Unterschied zwischen RGB, HSL, HSV und CMYK?

RGB, HSL, HSV und CMYK beschreiben alle dieselben Farben durch verschiedene Zahlensätze.

Nur zwei von ihnen, RGB und HSL, wandeln sich durch eine einzige feste Formel ineinander um.

HSV, manchmal auch als HSB bezeichnet, wird ständig mit HSL verwechselt, da beide ein Farbrad von 0 bis 360 Grad und eine prozentuale Sättigung verwenden.

Der dritte Wert ist, wo sie sich teilen. Die Helligkeit von HSL reicht von Schwarz über den reinen Farbton bis Weiß, während der Wert von HSV nur von Schwarz bis zum reinen Farbton reicht, ohne einen weißen Endpunkt.

Was CMYK unterscheidet: Es handelt sich um ein subtraktives Modell, das für Tinte auf Papier und nicht für Licht auf einem Bildschirm entwickelt wurde. Daher spielt ein RGB-zu-HSL-Konverter keine direkte Rolle in CMYK-Farb-Workflows (EN).

Adobe Photoshop behält alle drei, RGB, HSB und CMYK, im selben Farbwähler, genau weil Druck- und Siebdruckteams unterschiedliche Farbwähler benötigen.

Was bedeuten die Werte für Farbton, Sättigung und Helligkeit?

Farbton, Sättigung und Helligkeit sind die drei Zahlen, die ein RGB-zu-HSL-Konverter ausgibt, und jede von ihnen steuert eine separate visuelle Eigenschaft.

Kennzahlen:

• Farbton: 0 bis 360 Grad
• Sättigung: 0 bis 100 Prozent
• Helligkeit: 0 bis 100 Prozent
• Quell-RGB-Kanäle: 0 bis 255

Hue

Farbton ist die Position der Farbe auf einem 360-Grad-Rad, wobei 0 und 360 beide auf Rot landen.

Landmark Graden:

• 0° und 360°: rot
• 120°: grün
• 240°: blau

Ein Farbtonwert allein sagt nicht aus, wie lebendig oder hell eine Farbe aussieht. Es markiert nur, wo die Farbe auf dem Rad sitzt.

Sättigung

Sättigung steuert die Intensität, nicht die Helligkeit.

• 0% Sättigung entfernt alle Farben und hinterlässt reines Grau
• 50% Sättigung erzeugt eine gedämpfte, staubige Version des Farbtons
• 100% Sättigung erzeugt die lebendigste Version möglich bei dieser Helligkeit

Zwei Farben können genau den gleichen Farbton und die gleiche Helligkeit haben und trotzdem völlig unterschiedlich aussehen, wenn sich die Sättigung verschiebt.

Leichtigkeit

Die Helligkeit reicht von Schwarz bei 0% bis Weiß bei 100%, wobei der reine Farbton bei 50% liegt.

Warum dies wichtig ist: Durch Verschieben des Helligkeitswerts nach oben oder unten wird geändert, wie hell oder dunkel eine Farbe aussieht, ohne dass der Farbton oder die Intensität beeinflusst werden.

Figmas Farbauswahl enthält einen HSL-Modus mit diesem exakten Schieberegler, der direkt neben dem Hex-Eingabefeld sitzt.

Wie funktioniert die RGB zu HSL Konvertierungsformel?

Die RGB-zu-HSL-Formel wandelt drei Kanalwerte in fünf aufeinander folgenden Schritten in Farbton, Sättigung und Helligkeit um.

Jeder RGB-zu-HSL-Konverter, von Browser-Entwicklungstools bis hin zu eigenständigen Web-Apps, führt eine Version dieser gleichen Mathematik aus.

1. Normalisieren Sie jeden RGB-Kanal auf einen Bereich von 0-1, indem Sie durch 255 teilen
2. Finden Sie das Maximum und Minimum der drei normalisierten Werte
3. Berechnen Sie die Helligkeit als den Durchschnitt von max und min
4. Sättigung aus der Differenz zwischen max und min, relativ zur Helligkeit berechnen
5. Berechnen Sie den Farbton basierend darauf, welcher Kanal (rot, grün oder blau) den maximalen Wert aufweist

Das HSL-Modell selbst geht auf Joblove und Greenbergs SIGGRAPH-Artikel von 1978 über Farbräume für Computergrafiken zurück.

Führen Sie die Standardfarbe des Tools durch diese Schritte aus: rgb(255, 100, 150) normalisiert sich auf einen Maximalwert von 1,0 (Rot) und einen Minimalwert von 0,39, was 70 % Helligkeit, 100 % Sättigung und einen Farbton von 341° ergibt, also hsl(341, 100 %, 70 %).

Gerundet wird im letzten Schritt. Die meisten Konverter runden Farbton auf den nächsten ganzen Grad und Sättigung und Helligkeit auf den nächsten ganzen Prozentsatz ab, weshalb dieselbe Farbe in einem Werkzeug als 210° und in einem anderen als 209° angezeigt werden kann.

Kann man HSL zurück in RGB konvertieren?

Ja, HSL konvertiert zurück in RGB, obwohl die umgekehrte Formel anders als die ursprüngliche Konvertierung funktioniert.

Anstelle einer direkten algebraischen Inverse berechnet der Reverse-Pass einen Farbwert aus Sättigung und Helligkeit und sucht dann RGB-Kanäle auf, basierend darauf, in welches 60-Grad-Segment des Farbtonrads die Farbe fällt.

Round-trip Drift: Die Konvertierung von RGB in HSL und zurück in RGB kann eine Farbe um einen oder zwei Farbtöne verschieben, da jeder Schritt auf ganze Zahlen gerundet wird.

Chroma.js führt diese exakt umgekehrte Formel intern aus, wenn ein Skript seine RGB-Ausgabemethode auf einem HSL-Farbobjekt aufruft.

Die umgekehrte Konvertierung ist am wichtigsten beim Handoff. Ein Designer, der in HSL arbeitet, um einfache Helligkeitsänderungen vorzunehmen, muss den endgültigen Wert oft durch einen separaten Hex-Konvertierungsschritt bringen, bevor ein Entwickler ihn in ein Stylesheet ziehen kann.

Ein eigenständiger HSL zu RGB Konverter verarbeitet diesen umgekehrten Durchgang, ohne dass manuelle Lookup-Tabellenmathematik erforderlich ist.

Wann sollte man HSL anstelle von RGB verwenden?

Verwenden Sie HSL, wenn Sie die Helligkeit oder Intensität einer Farbe manuell anpassen müssen. Verwenden Sie RGB, wenn Sie einen exakten Wert aus einem Markenleitfaden oder einer Designdatei übernehmen möchten.

RGB Vorteile:

• Entspricht der physikalischen Mischung von rotem, grünem und blauem Licht auf Bildschirmen
• Exakte Werte direkt aus Bildbearbeitungssoftware übertragen
• Keine Konvertierung für die meisten bestehenden hex-basierten Konstruktionssysteme erforderlich

RGB-Nachteil: Das Aufhellen oder Abdunkeln einer Farbe erfordert eine manuelle Neuberechnung aller drei Kanäle, da keiner von ihnen direkt der Helligkeit zugeordnet wird.

HSL Vorteile:

• Eine Zahl, Helligkeit, steuert, wie hell oder dunkel eine Farbe aussieht
• Farbton bleibt fest, während Sie mit der Intensität experimentieren
• Einfachere Generierung eines konsistenten Farbtonsatzes aus einer Grundfarbe

HSL Nachteil: Gleiche Schritte im Helligkeitswert sehen für das Auge nicht immer gleich aus, besonders um Gelb- und Blautöne herum.

Komponentenbibliotheken wie shadcn/ui haben ihre gesamte Farbpalette lange als HSL-Werte anstelle von RGB geliefert, speziell damit Theme-Farben durch eine Variable aufgehellt oder abgedunkelt werden konnten. Seine Tailwind v4-Themen sind seitdem auf OKLCH umgezogen, was die ungleichmäßige Leichtigkeit von HSL behebt.

Wie hilft HSL bei der Barrierefreiheit und Kontrastprüfung?

WebAIMs 2025-Audit (EN) der Top-1-Millionen-Homepages ergab, dass auf 79,1% von ihnen Text mit geringem Kontrast vorlag, der häufigste Fehler bei der Barrierefreiheit.

Die Web Content Accessibility Guidelines (EN) legen ein Mindestverhältnis von Farbkontrast (EN) von 4,5:1 für normalen Text und 3:1 für großen Text fest, basierend auf der relativen Helligkeit und nicht auf Rohfarbenwerten.

HSL berechnet dieses Verhältnis nicht direkt. Es erleichtert eine bestimmte Korrektur, indem die Helligkeit angepasst wird, während der Farbton unberührt bleibt.

Warum Leichtigkeit hier wichtig ist:

• Wenn Sie den Helligkeitswert löschen, wird der Text dunkler, ohne dass die Farbidentität verändert wird.
• Durch Erhöhen des Helligkeitswertes eines Hintergrunds wird dieser auf die gleiche Weise aufgehellt
• Keine der beiden Einstellungen erfordert die Neuberechnung von drei separaten RGB-Kanälen

Dies ist der gleiche Hebel hinter den meisten dunklen Modus-Systemen, bei denen ein einziger Helligkeitsdurchgang einen vollständigen Satz von zugänglichen Text- und Hintergrundpaaren erzeugt.

Ein zugänglicher Farbpaletten-Generator automatisiert diesen exakten Helligkeits-Balancing-Prozess, anstatt ihn manuell auszuprobieren, und der Farbkontrast-Checker (EN) bestätigt das endgültige Verhältnis.

Die Barrierefreiheitsprüfung Lighthouse von Chrome kennzeichnet automatisch jedes Text-Hintergrund-Paar, das unter den Schwellenwert von 4,5:1 fällt.

Welche Design-Tools und Plattformen unterstützen HSL nativ?

Native HSL-Unterstützung teilt sich entlang einer ziemlich klaren Linie. Web-basierte Werkzeuge zeigen es direkt an, während herkömmliche Bildbearbeitungsprogramme standardmäßig HSB verwenden.

Der Farbwähler von Illustrator befindet sich direkt neben dem von Photoshop in der Struktur und bietet H, S und B-Felder anstelle von H, S und L.

Warum die Unterscheidung wichtig ist: Wenn ein Designer einen "Helligkeit"-Wert aus Illustrator kopiert und in eine CSS-Funktion hsl() einfügt, fügt er tatsächlich einen Helligkeitswert ein, und das Ergebnis stimmt nicht überein.

Tailwind CSS geht einen anderen Weg. Es bietet überhaupt keinen HSL-Picker-Modus, aber seine beliebige Wertsyntax ermöglicht es einem Entwickler, eine HSL-Farbe direkt in eine Utility-Klasse zu schreiben, ohne eine Konfigurationsdatei zu berühren.

Das Tailwind CSS Framework (EN) behandelt Farben auf diese Weise überall, wobei es die Flexibilität auf Code-Ebene gegenüber einer visuellen Auswahl begünstigt.

Wie konvertiert man RGB in HSL in CSS?

Das Schreiben von HSL direkt in ein Stylesheet bedeutet, drei Werte an die Funktion hsl() zu übergeben anstelle der entsprechenden Funktion rgb().

Die Syntax nimmt einen Farbton in Grad, dann einen Sättigungsprozentsatz, dann einen Helligkeitsprozentsatz, in dieser festen Reihenfolge.

Grundstruktur:

• Farbton kommt zuerst, geschrieben als eine einfache Anzahl von Grad
• Die Sättigung kommt an zweiter Stelle, geschrieben als Prozentsatz
• Leichtigkeit kommt an dritter Stelle, geschrieben als Prozentsatz
• Ein optionaler vierter Wert fügt Transparenz durch den Alphakanal hinzu

Seit 2017 funktionieren benutzerdefinierte CSS-Eigenschaften in jedem gängigen Browser, weshalb das Speichern eines HSL-Werts als wiederverwendbare Variable in aktuellen Browsern zuverlässig funktioniert.

Ein auf diese Weise erstelltes Design speichert ein Basisfarben- und Helligkeitspaar und leitet dann Hover-Zustände und Rahmen ab, indem es nur den Helligkeitsprozentsatz verschiebt.

Sass bot in der Vergangenheit lighten() und darken() als Shortcuts für die gleiche Helligkeitsverlagerung an. Das Sass-Team hat beide Funktionen ab Dart Sass 1.79.0 veraltet und verweist Entwickler stattdessen auf color.scale() und color.adjust().

Was ohne dieses Update kaputt geht: Eine Sass-Datei, die lighten() aufruft, funktioniert für den Moment weiter, aber sie druckt eine Deprecation-Warnung aus und wird direkt fehlschlagen, sobald eine zukünftige Hauptversion von Dart Sass die Funktion entfernt.

Wie konvertiert man RGB in HSL in JavaScript und Python?

JavaScript

JavaScript hat keine eingebaute Methode für diese Konvertierung. Jede Implementierung wird entweder von Hand geschrieben oder aus einer Bibliothek gezogen.

Die handgeschriebene Version folgt den gleichen fünf Schritten wie die manuelle Formel: normalisieren Sie die RGB-Werte in JavaScript (EN), finden Sie die maximalen und minimalen Werte und leiten Sie dann Helligkeit, Sättigung und Farbton in dieser Reihenfolge ab.

• Häufiger Fehler: Vergessen, jeden RGB-Kanal durch 255 zu teilen, bevor der Rest der Formel ausgeführt wird
• Häufiger Fehler: Farbton bleibt undefiniert, wenn die Sättigung null ist, da Grautöne keinen aussagekräftigen Farbton haben

D3.js führt eine äquivalente Konvertierung innerhalb seines interpolateHsl-Moduls durch, wobei Farbton, Sättigung und Helligkeit überschritten werden, um weiche Farbübergänge zu animieren.

Python

Pythons Standardbibliothek enthält ein colorsys-Modul mit einer eingebauten rgb_to_hls()-Funktion, wie es in der offiziellen Python-Dokumentation (EN) steht.

Ein Namensdetail macht die Leute stolpern: die Funktion gibt Werte in der Reihenfolge H, L, S zurück, nicht H, S, L, und jeder Wert ist ein Gleitzahlwert zwischen 0 und 1 anstatt Grad oder Prozente.

Um die Ausgabe von Python in einen CSS-fähigen Wert umzuwandeln, muss der Farbton mit 360 und die anderen beiden Zahlen mit 100 multipliziert werden, bevor sie in ein Stylesheet geschrieben werden.

Wann ist die RGB-zu-HSL-Konvertierung nicht anwendbar?

Ein RGB-zu-HSL-Konverter hat eindeutige Grenzen, und das Vortäuschen führt zu echten Farbfehlern.

Fünf Situationen, in denen es nicht hilft:

• Druckproduktion, bei der die Farbe in CMYK angegeben wird und weder RGB- noch HSL-Zahlen direkt auf die Tinte übertragen werden
• Volltonfarben-Abgleich mit einem Pantone-Farbmusterbuch, abgeglichen durch Auge und Formel anstatt durch RGB-Mathematik
• Fotobearbeitungs-Workflows, die um HSB-Schieberegler herum aufgebaut sind, bei denen eine Helligkeitsanpassung nicht 1:1 auf die Helligkeitsachse von HSL abgebildet wird
• Nah an Weiß, Nah an Schwarz oder vollständig entsättigte Farben, bei denen der umgewandelte Farbtonwert mathematisch instabil wird
• Legacy-Systeme, die nur 8-Bit-Hex-Codes akzeptieren, bei denen die HSL-Ausgabe noch einen weiteren Konvertierungsschritt benötigt

Der Druck liegt völlig außerhalb des Anwendungsbereichs dieser Konvertierung, da die CMYK-Farbwerte auf der Tintenabdeckung basieren und nicht auf lichtbasierten RGB- oder HSL-Zahlen, wie die Aufschlüsselung RGB vs. CMYK (EN) erklärt.

Die Instabilität an den Extremen ist es auch wert, mit zu sitzen. Wenn die Sättigung 0% erreicht, ist Hue von der Formel selbst nicht definiert, da keine Farbe mehr auf dem Rad platziert werden kann.

Die meisten Konverter setzen einen undefinierten Farbton standardmäßig auf 0°, anstatt das Feld leer zu lassen, was leicht dazu führen kann, dass jeder die Zahl als aussagekräftig interpretiert.

Sowohl RGB als auch HSL haben außerdem dieselbe äußere Grenze. Beide arbeiten im sRGB-Farbraum, der bereits 1999 von der IEC als IEC 61966-2-1 standardisiert wurde, sodass keines der Modelle eine Farbe ausdrücken kann, die außerhalb dieses Farbraums liegt, unabhängig davon, wie die Zahlen konvertiert werden.

Ein Druckdienstleister, der Pantone 286 C, ein gängiges Unternehmensblau, verwendet, erhält ein genaueres Ergebnis aus dem physischen Musterbuch als aus einer beliebigen RGB-zu-HSL-zu-CMYK-Konvertierungskette.

Häufige Fragen: RGB in HSL umrechnen

Warum runden RGB und HSL über Werkzeuge hinweg unterschiedlich ab?

Rundungsunterschiede entstehen dadurch, dass ein Werkzeug Dezimalstellen abschneidet, nicht durch eine andere Formel. Einige Konverter runden den Farbton auf den nächsten Grad ab, andere behalten eine Dezimalstelle. Der gleiche RGB-Eingang kann in einem Tool als 209° und in einem anderen als 210° angezeigt werden.

Was ist der Unterschied zwischen HSL und HSLA?

HSLA fügt einen vierten Wert, alpha, zu den gleichen Farbton-, Sättigung- und Helligkeitswerten hinzu. Alpha reicht von 0 bis 1 und steuert die Transparenz anstelle der Farbe. Modernes CSS behandelt hsla() als Alias; hsl() selbst akzeptiert nun auch einen optionalen Alphakanal.

Können Farbtonwerte 360 Grad überschreiten?

Ein Farbtonwert umschließt technisch 360°, da das Farbrad kreisförmig ist: 400° und 40° zeigen auf dieselbe Farbe. Die meisten Konverter normalisieren den Ausgang automatisch auf den Bereich 0-360°, so dass ein Wert über 360° in der Praxis selten auftritt.

Unterstützen alle Browser die CSS hsl() Funktion?

Jeder aktuelle Hauptbrowser unterstützt hsl(), einschließlich seiner durch Kommas getrennten Legacy-Syntax und der neueren durch Leerzeichen getrennten CSS Color Module Level 4-Syntax. Internet Explorer 9 und höher verstanden die Komma-Syntax, jedoch nie die durch Leerzeichen getrennte Form, sodass ein kommabasierter oder hexadezimaler Fallback für ältere Kompatibilitätsarbeiten immer noch wichtig ist.

Wie genau sind Online-RGB-zu-HSL-Konverter?

Browser-native Konvertierung, durch DevTools oder CSS selbst, ist maßgeblich und genau. Web-Konverter von Drittanbietern verwenden dieselbe Formel und stimmen in der Regel auf zwei oder drei Dezimalstellen genau überein. Sichtbare Farbunterschiede durch Rundungen sind wirksam unmerklich, so dass Genauigkeit selten ein praktisches Anliegen ist.

Was sollten Sie zuerst mit einem RGB-zu-HSL-Konverter tun?

Ein RGB-zu-HSL-Konverter verdient seine Beliebtheit zuerst in dem Moment, in dem eine Grundfarbe ausgewählt wird, indem dieser einzelne RGB- oder Hex-Wert in Farbton, Sättigung und Helligkeit konvertiert wird, bevor daraus eine Farbton-, Farbton- oder Themenvariation erstellt wird.

• Wählen Sie die Grundfarbe in RGB oder hex
• Helligkeit vor Farbton anpassen, wenn Kontrast das Ziel ist
• Konvertieren Sie den fertigen Wert für die Produktion zurück in Hex oder RGB

Bei der WebAIM-Prüfung im Jahr 2025 wurde auf 79,1 % der Homepages Text mit geringem Kontrast festgestellt, und der Schwellenwert für normalen Text der WCAG liegt bei 4,5:1, einem Verhältnis, das auf der relativen Luminanz basiert. Bei der HSL-Helligkeit handelt es sich nicht um dasselbe Maß, aber durch Erhöhen oder Verringern lässt sich die Luminanz am schnellsten ändern. Daher werden durch Anpassen der Helligkeit zunächst die meisten fehlerhaften Paare behoben, bevor Farbton oder Sättigung berührt werden.

Diese Verknüpfung löscht den häufigsten Fall, nicht jeden Fall, und ersetzt eine vollständige Kontrastaudit für Geschwindigkeit. Die Produktionsübergabe nach diesem Schritt beginnt normalerweise mit einer Hex-zu-RGB-Konvertierung, wenn das ursprüngliche Farbfeld aus einem Markenleitfaden stammt.