HSL in RGB umrechnen

Dieser HSL-zu-RGB-Konverter wandelt HSL-Farbwerte sofort in mehrere Formate um. Passen Sie Farbton, Sättigung, Helligkeit und Alpha über präzise Schieberegler oder numerische Eingabefelder an. Klicken Sie anschließend auf ein Ergebnis, um es zu kopieren.

Zuletzt aktualisiert: 23. September 2026

Die wichtigsten Features

• Echtzeit-Konvertierung in RGB-, RGBA-, HEX-, HSL-, HSLA- und CSS-Variablen

• Visuelle Farbvorschau wird aktualisiert, wenn Sie Werte anpassen

• Click-to-copy auf einen beliebigen Ausgabewert, auch mit Enter oder Space von der Tastatur

• Voreingestellte Farben zum schnellen Testen (rot, grün, blau, gelb, cyan, magenta, schwarz, weiß)

• Synchronisierte Eingaben - Schieberegler und Zahlenfelder bleiben synchron

• Alpha-Kanal-Unterstützung für Transparenzkontrolle

Was Sie bekommen

Sechs Farbformate, hier gezeigt für das Standard hsl(200, 70%, 50%):

• RGB: rgb(38, 157, 217)

• RGBA: rgba(38, 157, 217, 1.00)

• HEX: #269DD9

• HSL: hsl(200, 70%, 50%)

• HSLA: hsla(200, 70%, 50%, 1.00)

• CSS Variable: --color: #269DD9;

Für Designer und Entwickler, die präzise Farbkonvertierungen ohne zusätzliche Schritte benötigen.

Was ist ein HSL zu RGB Konverter?

Ein HSL-zu-RGB-Konverter ist ein kleines Dienstprogramm, das einen Farbton-, Sättigungs- und Helligkeitswert in die entsprechenden Zahlen für Rot, Grün und Blau umwandelt.

Es führt eine feste Formel aus, keine Vermutung. Geben Sie ihm die gleichen drei Zahlen zweimal und es gibt jedes Mal das gleiche Ergebnis.

Das unterscheidet sich von einem Farbwähler, der es jemandem ermöglicht, einen Farbton mit dem Auge auszuwählen oder zu proben, anstatt ihn mathematisch zu berechnen.

• Ein Farbwähler wählt einen Farbton visuell aus, oft durch Klicken auf ein Farbfeld
• Ein Konverter berechnet den entsprechenden Wert in einem anderen Farbmodell
• Die beiden sitzen oft nebeneinander in Design-Software, aber sie machen verschiedene Jobs

Die meisten Stylesheets verlassen sich immer noch auf hexadezimale oder einfache RGB-Werte. Die direkte Verwendung von hsl() erscheint in weniger als 1% der Farbdeklarationen im Web (HTTP Archive Web Almanac, 2022).

Design-Tools verwenden standardmäßig HSL-Schieberegler, da das Modell der intuitiven Vorstellung von Farbe entspricht. Ein Konverter wird zur Brücke zurück zu dem Format, das der Code tatsächlich benötigt.

Das Werkzeug erscheint im Frontend (EN) einer Seite, in einem Stylesheet oder einem Build-Skript, das Farbwerte vorbereitet, bevor etwas gerendert wird.

Es taucht auch im Backend (EN) auf, in Bildverarbeitungsskripten oder Farbpipelines, die Werte generieren, bevor eine Vorlage sie jemals berührt.

Was sind die Eingangs- und Ausgangswertbereiche für die Konvertierung von HSL in RGB?

Farbton reicht von 0 bis 360 Grad, Sättigung und Helligkeit von 0 bis 100 Prozent, und der Konverter gibt Rot-, Grün- und Blauwerte zwischen 0 und 255 aus.

Werte, die außerhalb dieser Grenzen übermittelt werden, werden je nach Implementierung nicht abgelehnt, sondern eingeklemmt oder umschlossen.

Kennzahlen (CSS Color Module Level 4, W3C):

• Farbton: 0 bis 360 Grad oder eine entsprechende Winkeleinheit
• Sättigung: 0% bis 100%
• Leichtigkeit: 0% bis 100%
• RGB-Ausgang: 0 bis 255 pro Kanal (8-Bit) oder 0 bis 1 normalisiert

Diese Skala von 0 bis 255 ist die gleiche, die überall sonst verwendet wird, wo RGB-Farben angezeigt werden, von Hex-Codes bis hin zu Canvas-Pixeldaten.

Die 8-Bit-Ausgabe ist das Standardziel, weil Browser, Bildformate und die meisten Design-Softwares dies bereits erwarten.

Wie funktioniert die HSL zu RGB Konvertierungsformel?

Die Formel berechnet zuerst einen Farbwert, lokalisiert, in welches 60-Grad-Stück des Farbtonkreises die Eingabe fällt, und verschiebt dann alles um die Helligkeit.

Sechs verschiedene Kombinationen von Rot, Grün und Blau werden auf die sechs 60-Grad-Segmente dieses Kreises abgebildet.

Der sechsstufige Pfad:

1. Farbton aus Sättigung und Helligkeit berechnen
2. Teilen Sie den Farbton durch 60, um zu finden, in welches Segment er fällt
3. Legen Sie einen Zwischenwert für dieses Segment fest, der oft mit X bezeichnet wird.
4. Weisen Sie Rot, Grün und Blau basierend auf dem Segment Chroma, X und 0 zu
5. Fügen Sie jedem Kanal einen Helligkeitswert hinzu, um ihn an seine Position zu verschieben
6. Mit 255 multiplizieren und runden, um die endgültige ganze Zahl zu erhalten RGB

Es sind eigentlich nur zwei Farbmodelle, die mathematisch ihre Positionen tauschen, in der Praxis näher, als es die meisten HSL vs. RGB-Vergleiche klingen lassen.

Wenn man die Standardeingabe durch diese Schritte läuft: hsl(200, 70%, 50%) ergibt eine Farbtiefe von 0,7, landet im Segment von 180 bis 240 Grad und kommt als rgb(38, 157, 217) oder #269DD9 heraus.

Nichts über die Mathematik ändert sich auf der Grundlage der Programmiersprache. Nur die Syntax um sie herum ändert sich.

Wie werden Rundungen und Präzision bei der HSL-zu-RGB-Konvertierung behandelt?

Zwei Farbbibliotheken können genau die gleiche HSL-Eingabe ausführen und eine ganze Zahl voneinander entfernt auf einem Kanalwert landen, und beide wären immer noch korrekt.

Diese Lücke entsteht durch Rundungen, nicht durch einen Fehler.

Woher die Abweichung kommt:

• Die Rohformel gibt Gleitkommazahlen zwischen 0 und 1 aus
• Die Multiplikation mit 255 kommt selten auf eine ganze Zahl
• Einige Implementierungen runden, andere bodenständig (abgeschnitten), und die beiden stimmen nahe dem Mittelpunkt nicht überein

Die Verkettung von Conversions macht es noch schlimmer. Der Wechsel von RGB zu HSL und zurück zu RGB kann einen Kanal allein durch den angesammelten Gleitkommafehler um ein oder zwei Punkte driften lassen.

Diese kleine Drift ist am wichtigsten, bevor ein Wert zu einem hex-Farbcode wird, da hex keinen Platz für fraktionale Kanäle hat.

Wie geht die Konvertierung mit achromatischen Farben und dem Hue Wraparound um?

Zwei Bedingungen unterbrechen den normalen Formelpfad: Sättigung null und ein Farbtonwert, der über 360 verläuft.

Beide werden explizit behandelt, nicht als Fehler behandelt.

Achromatische Farben (Sättigung bei Null)

Null Sättigung: Die Farbe hat nichts mehr für den Farbton übrig, um sie zu beschreiben.

Wenn die Sättigung 0% erreicht, gibt es auf dem Rad keinen Schatten mehr, auf den gezeigt werden kann, sodass der Farbton keine Bedeutung mehr hat.

• Rot, Grün und Blau werden alle auf denselben Wert gesetzt
• Dieser gemeinsame Wert entspricht der Helligkeit, skaliert auf den Bereich von 0 bis 255
• Hue wird zu dem, was die Spezifikation als leistungslose Komponente bezeichnet

Eine Helligkeit von 50% mit 0% Sättigung erzeugt ein Mittelgrau, rgb(128, 128, 128), unabhängig davon, welcher Farbtonwert zufällig im Eingang sitzt.

Hue Wraparound bei 360 Grad

Der Farbton ist kreisförmig, daher durchlaufen die Werte eine Schleife, anstatt an einer Grenze anzuhalten.

Ein Farbton von 480 Grad verhält sich genau wie 120 Grad, und ein Farbton von negativen 120 Grad verhält sich genau wie 240 Grad (W3C, CSS Color Module).

Die meisten Implementierungen behandeln dies mit einer modulo-Operation, bevor die Formel ausgeführt wird, wobei jeder Farbton außerhalb des Bereichs in das Fenster 0 bis 360 zurückgefaltet wird.

Überspringen Sie diesen Schritt und ein Farbton von 400 wird als unterbrochene Eingabe behandelt, anstatt einfach 40 zu sein.

Wie konvertiert man HSL in RGB mit CSS?

Schreiben Sie die Farbe als hsl() und der Browser konvertiert sie intern in RGB, ohne dass ein separater Schritt erforderlich ist.

Die Rendering-Engine erledigt die Mathematik, sobald das Stylesheet geladen wird, und verwendet sRGB als Zielfarbraum.

Das klassische kommagetrennte hsl() funktioniert seit über einem Jahrzehnt in jedem gängigen Browser.

Die neuere CSS (EN)-Syntax lässt die Kommas komplett weg und schreibt so etwas wie hsl(200 80% 50%) anstelle der älteren hsl(200, 80%, 50%) und akzeptiert einen optionalen Alpha-Wert nach einem Schrägstrich (CSS Color Module Level 4 (EN), W3C). Diese moderne Form erreichte im Juli 2022 den Baseline widely available (EN)-Status.

Wenn eine manuelle Konvertierung noch erforderlich ist:

• Canvas- und WebGL-Kontexte, die rohe RGB- oder normalisierte Floats erwarten
• Exportieren eines statischen Hex-Wertes für die Verwendung außerhalb des Browsers
• Umgebungen ohne CSS-Rendering-Engine, z. B. native mobile Layouts

Der andere Weg ist genauso üblich. Jeder, der mit einem RGB-Wert beginnt und das HSL-Äquivalent wünscht, kann es durch einen RGB-zu-HSL-Konverter laufen lassen, anstatt die Mathematik von Hand umzukehren.

Wie konvertiert man HSL in RGB in JavaScript und Python?

Die gleiche Formel funktioniert in jeder Sprache. Nur die Syntax und die Standardwertbereiche ändern sich.

Implementierung von JavaScript

Keine native Funktion: Die Formel wird direkt in das Skript geschrieben.

• Farbton, Sättigung und Helligkeit als einfache Zahlen, Grad und Prozentangaben
• Normalisieren Sie Sättigung und Helligkeit auf einen Bereich von 0 bis 1, bevor Sie die Mathematik durchführen
• Multiplizieren Sie das Endergebnis mit 255 und runden Sie es für eine Standard-8-Bit-Ausgabe auf.

Ein Dutzend Zeilen Code decken die gesamte Funktion ab. Keine Abhängigkeit erforderlich.

Implementierung von Python

Pythons Standardbibliothek liefert die Konvertierung bereits gebaut, durch das colorsys-Modul.

colorsys.hls_to_rgb() akzeptiert seine drei Argumente in der Reihenfolge h, l, s, nicht h, s, l (Python-Dokumentation (EN)), was jeden zum Stolpern bringt, der Code aus einer Sprache portiert, die der Standard-HSL-Reihenfolge folgt.

Ein weiterer Unterschied: colorsys erwartet Farbton, Helligkeit und Sättigung als Bruchteile zwischen 0 und 1, nicht als Grad oder Prozente.

Multiplizieren Sie den Farbton mit 360 und die anderen beiden mit 100, um wieder die bekannten HSL-Zahlen zu erhalten, oder dividieren Sie durch die gleichen Beträge, die eingegeben werden.

Sollte man HSL in RGB manuell konvertieren oder eine Bibliothek oder ein Tool verwenden?

Das Schreiben der Formel selbst ist sinnvoll, wenn die Laufzeit keine Abhängigkeiten zur Verfügung hat und Sie die volle Kontrolle über das Rundungsverhalten haben möchten.

Überall sonst macht es Sinn, auf eine vorhandene Bibliothek zurückzugreifen, besonders wenn Alpha, andere Farbmodelle oder String-Parsing ins Spiel kommen.

Es manuell schreiben:

• Keine Abhängigkeiten, die später installiert, überprüft oder aktualisiert werden müssen
• Volle Kontrolle über Rundung und Ausgabeformat
• Mehr Code zum Testen und Warten, wenn die Anforderungen wachsen

Verwenden einer Bibliothek:

• Verarbeitet Edge-Cases, Alpha und mehrere Farbformate sofort nach dem Auspacken
• Reduziert die Entwicklungszeit für alles, was über eine einzelne Konvertierung hinausgeht
• Fügt dem Projekt eine Abhängigkeit und ein gewisses Bündelgewicht hinzu

Die Paketgröße variiert stark zwischen den Bibliotheken, die für diesen Job gebaut wurden. tinycolor2 wird mit ungefähr 5KB gzipped geliefert, chroma-js mit 13.7KB und color2k mit 2.8KB, gemäß color2ks eigenem veröffentlichtem Größenvergleich (color2k, npm-Paketdokumentation).

Das Ausmaß dieser Bequemlichkeit zeigt sich in den Akzeptanzzahlen. Allein color-convert protokolliert etwa 200 Millionen wöchentliche Downloads in der npm-Registrierung (Snyk-Paketdaten, 2025), weit mehr Traffic als die Farbmathematik eines einzelnen Projekts jemals das Schreiben von Grund auf neu rechtfertigen würde.

Wo wird die HSL-zu-RGB-Konvertierung eigentlich verwendet?

Die Konvertierung sitzt leise hinter fast allem, was jemanden eine Farbe visuell auswählen lässt und dann diese Farbe als Code versendet.

Vier Orte machen den Großteil dieses Verkehrs aus.

Design-Software:

• Figma, Photoshop und Sketch zeigen HSL- oder HSB-Schieberegler an, da Farbtonmodelle der intuitiven Farbanpassung entsprechen
• Jeder Schieberegler wird in RGB konvertiert, sobald er gerendert oder exportiert werden muss

Stylesheets und Design-Token:

Das Theming-System von shadcn/ui hat lange Zeit jede Farbe als rohe HSL-Komponentennummer gespeichert, etwa 222.2 47.4% 11.2% für eine Primärfarbe, und dann diesen Wert zum Zeitpunkt der Verwendung in hsl() eingepackt. Seine Tailwind v4-Themen sind seitdem nach OKLCH umgezogen (shadcn/ui-Dokumentation).

In jedem Fall ermöglicht das Muster einem gesamten Designsystem, Farbton oder Sättigung über Dutzende von Komponenten hinweg zu verschieben, indem eine einzige Variable bearbeitet wird.

Bildverarbeitung:

• Pillow und GIMP passen Farbton oder Helligkeit programmiert an und konvertieren dann vor dem Speichern der Datei wieder in RGB
• Batch-Skripte, die Produktfotos in großen Mengen neu einfärben, führen normalerweise genau diesen Pfad aus

Charting-Bibliotheken stützen sich auch darauf. Sie erzeugen eine Palette von Farbtönen mit einer festen Sättigung und Helligkeit und wandeln sie dann für die Pixel, die tatsächlich den Bildschirm erreichen, in RGB um.

Wann funktioniert die HSL-zu-RGB-Konvertierung nicht oder liefert falsche Ergebnisse?

Die Formel selbst bricht nie. Was bricht, ist die Annahme, dass seine Ausgabe jede Farbe repräsentiert, die ein Bildschirm anzeigen kann.

Wo es zu kurz kommt:

• Farben mit erweitertem Farbraum: HSL basiert auf sRGB. Display P3 deckt ungefähr 50 % mehr Farbraum ab als sRGB (WebKit, 2020). Für Farben in diesem zusätzlichen Bereich ist keine genaue Umrechnung von HSL in RGB möglich.
• HSL verwechselt mit HSV oder HSB: die Buchstaben sehen ähnlich aus, aber die Formeln unterscheiden sich, und wenn ein HSV-Wert durch eine HSL-Formel läuft, wird die komplett falsche Farbe erzeugt
• Nicht normalisierte Eingaben: Die Übergabe von 50 anstelle von 0,5 für Sättigung in eine Funktion, die eine Skala von 0 bis 1 erwartet, gibt einen Wert weit außerhalb eines nutzbaren Bereichs zurück
• Alpha wurde unbemerkt gelöscht: Die Konvertierung von HSLA in RGB ohne Vorwärtsbewegung des Alphakanals erzeugt eine deckende Farbe, wo Transparenz erwartet wurde

Der Leichtigkeitskanal hat eine eigene bekannte Schwachstelle. Die CSS Color Module Level 4 Spezifikation verwendet Blau und Gelb mit der gleichen 50% Helligkeit wie das eigene Beispiel, und die beiden Farbtöne sehen für das menschliche Auge bei weitem nicht gleich hell aus (W3C, CSS Color Module Level 4).

Diese Lücke zwischen numerischer Helligkeit und wahrgenommener Helligkeit ist der Grund, warum neuere Farbräume wie Oklch existieren. Es handelt sich nicht um einen spezifischen Fehler eines einzelnen Konverters.

Nichts davon macht die Konvertierung unzuverlässig. Es bedeutet, dass die Konvertierung eine enger gefasste Frage beantwortet, als wie eine Farbe auf jedem möglichen Bildschirm aussieht.

Häufige Fragen: HSL in RGB umrechnen

Wofür stehen die Buchstaben HSL und RGB?

HSL steht für Farbton, Sättigung und Helligkeit, die Kanäle beschreiben die Position einer Farbe auf dem Farbrad, ihre Intensität und ihre Helligkeit. RGB steht für Rot, Grün und Blau, die additiven Kanäle eines Bildschirms leuchten auf, um diese Farbe anzuzeigen.

Ist HSL das Gleiche wie HSV oder HSB?

Nein, HSV und HSB bezeichnen dasselbe Modell, wobei Wert oder Helligkeit als dritter Kanal anstelle von Helligkeit verwendet wird. Ein Sättigungswert von 100 % bedeutet in jedem Modell einen anderen Farbton. Wenn Sie also einen HSV-Wert über eine HSL-Formel ausführen, wird die falsche Farbe zurückgegeben.

Kann HSLA auf die gleiche Weise in RGBA konvertiert werden?

- Ja. - Ja. Die Farbton-, Sättigungs- und Helligkeitskanäle werden genau wie bei Standard-HSL konvertiert, und der Alphakanal wird unverändert übertragen, da beide Formate die Transparenz identisch ausdrücken, als Dezimalzahl zwischen 0 und 1 oder als entsprechenden Prozentsatz.

Kann man HSL direkt in einen Hex-Code konvertieren?

Ja, obwohl es in zwei Schritten geschieht. Die Formel erzeugt zuerst RGB, und jeder der drei Werte von 0 bis 255 wird dann zu einem zweistelligen Hexadezimalpaar, das den sechsstelligen Hex-Code ergibt, der in CSS und Design-Tools verwendet wird.

Wo hört die Mathematik eines HSL-zu-RGB-Konverters auf, ausreichend zu sein?

Die Formel eines HSL-zu-RGB-Konverters reicht am Rande des sRGB-Farbraums nicht mehr aus, da der Algorithmus Farbton, Sättigung und Helligkeit auf die 16,7 Millionen Farben abbildet, die sRGB ausdrücken kann.

hsl() verfügt über vollständige Browserunterstützung, erschien jedoch im Jahr 2022 immer noch in weniger als 1 % der Farbdeklarationen (HTTP Archive Web Almanac, 2022). Volle native Unterstützung gepaart mit vernachlässigbarer direkter Nutzung zeigt, wo die Konvertierung tatsächlich stattfindet: in Design-Tools und Bibliotheken vor dem Stylesheet.

Die standardmäßige 8-Bit-Ausgabe deckt dieselben 16,7 Millionen Farben ab. Arbeitsabläufe mit großem Farbraum werden auf 16 Bit pro Kanal umgestellt, um gleichmäßige Farbverläufe über einen größeren Farbraum hinweg zu gewährleisten (Apple Developer, WWDC 2017). Durch die Akzeptanz der 8-Bit-Mathematik wird also universelle Kompatibilität erkauft und die zusätzliche Präzision, die diese Bildschirme anzeigen können, eingebüßt.

Das Senden dieser RGB-Ausgabe zum Drucken erfordert eine weitere Konvertierung, da Drucker unterschiedliche Primärfarben verwenden, die von einem RGB-zu-CMYK-Konverter verarbeitet werden.