HEX-Code in HSL umrechnen

Inhalt zuletzt geprüft:

Geben Sie einen HEX-Code ein, und die HSL-Werte erscheinen schon beim Tippen: #3B82F6 ist hsl(217.2, 91.2%, 59.8%). Das Ergebnis hat eine Nachkommastelle und ergibt zurückgerechnet dieselbe Farbe. Mit dem Schalter wählen Sie CSS oder die Werte 0–255 aus dem Office-Dialog.

HSL-Schreibweise

Die CSS-Schreibweise passt zu Stylesheets und den Entwicklertools des Browsers. Die Schreibweise 0–255 zeigt das Dialogfeld „Farben“ in Word, Excel und PowerPoint.

nach

Wie rechnet man HEX in HSL um?

Zerlegen Sie den Code in seine drei RGB-Kanäle und teilen Sie jeden durch 255. Aus dem größten und dem kleinsten Kanal ergeben sich Helligkeit und Sättigung, und der Kanal mit dem höchsten Wert bestimmt den Farbton auf dem Farbkreis[1].


Formel: L = (max + min) ÷ 2, S = (max − L) ÷ min(L, 1 − L), und H ist ein Winkel, der vom Kanal mit dem höchsten Wert aus gezählt wird.


Nehmen wir #3B82F6. Die Kanäle haben die Werte 59, 130 und 246. Geteilt durch 255 ergeben sie 0,231, 0,510 und 0,965. Der Mittelwert aus dem größten und dem kleinsten Kanal ist 0,598, die Helligkeit beträgt also 59,8%. Die Formel für die Sättigung ergibt 91,2%.


Am stärksten ist der Blaukanal, deshalb beginnt die Rechnung für den Farbton bei 240 Grad. Rot ist schwächer als Grün, also werden davon 22,8 Grad abgezogen, und der Farbton liegt bei 217,2°. Die ganze Farbe lautet in CSS hsl(217.2, 91.2%, 59.8%).


Den ersten Schritt zeigt der HEX-in-RGB-Umrechner, und der RGB-in-HSL-Umrechner beginnt direkt bei RGB-Werten.

Was ist das HSL-Farbmodell?

HSL beschreibt eine Farbe mit drei Werten. Der Farbton (englisch hue) ist ein Winkel auf dem Farbkreis, auf dem 0° für Rot, 120° für Grün und 240° für Blau steht. Die Sättigung (saturation) gibt an, wie viel Farbe enthalten ist: 0% ergibt ein Grau, 100% die volle Farbe. Die Helligkeit (lightness) beträgt 0% für Schwarz und 100% für Weiß, eine gewöhnliche Farbe hat 50%[1].


Die CSS-Spezifikation erklärt, wozu die Schreibweise dient. An RGB-Zahlen lässt sich schwer ablesen, wie man eine hellere Variante derselben Farbe erhält, während Sie in HSL nur einen einzigen Wert ändern[1].


George Joblove und Donald Greenberg beschrieben das Modell in der Augustausgabe 1978 der Zeitschrift Computer Graphics, neben dem HSV-Modell von Alvy Ray Smith[2]. In CSS kam es mit CSS Color Module Level 3, das am 7. Juni 2011 zur W3C-Empfehlung wurde[3].


Liegt Ihre Farbe in einer anderen Schreibweise vor, etwa als OKLCH, Lab oder Android-Code, zeigt der Farbumrechner sie gleichzeitig in allen Schreibweisen.

Benannte CSS-Farben: HEX-Code und HSL

Manche Farben lassen sich in CSS als Wort schreiben, und jedes dieser Wörter hat einen eigenen HEX-Code und einen eigenen HSL-Wert[1]. Die letzte Spalte zeigt dieselben Farben in der Skala 0–255, die der Farbdialog in Office anzeigt.
Name in CSSHEX-CodeHSL in CSSHSL in Office (0–255)
black#000000hsl(0, 0%, 0%)170, 0, 0
white#FFFFFFhsl(0, 0%, 100%)170, 0, 255
red#FF0000hsl(0, 100%, 50%)0, 255, 128
lime#00FF00hsl(120, 100%, 50%)85, 255, 128
blue#0000FFhsl(240, 100%, 50%)170, 255, 128
yellow#FFFF00hsl(60, 100%, 50%)42, 255, 128
aqua#00FFFFhsl(180, 100%, 50%)127, 255, 128
fuchsia#FF00FFhsl(300, 100%, 50%)213, 255, 128
silver#C0C0C0hsl(0, 0%, 75.3%)170, 0, 192
gray#808080hsl(0, 0%, 50.2%)170, 0, 128
maroon#800000hsl(0, 100%, 25.1%)0, 255, 64
olive#808000hsl(60, 100%, 25.1%)42, 255, 64
green#008000hsl(120, 100%, 25.1%)85, 255, 64
purple#800080hsl(300, 100%, 25.1%)213, 255, 64
teal#008080hsl(180, 100%, 25.1%)127, 255, 64
navy#000080hsl(240, 100%, 25.1%)170, 255, 64
orange#FFA500hsl(38.8, 100%, 50%)27, 255, 128
rebeccapurple#663399hsl(270, 50%, 40%)191, 128, 102
Grautöne haben in CSS den Farbton 0 und im Office-Dialog 170. Bei 0% Sättigung wirkt sich der Farbton nicht auf die Farbe aus, deshalb steht in der CSS-Schreibweise an dieser Stelle eine Null[1] und im Office-Dialog 170, also zwei Drittel seiner Skala.

Wie unterscheidet sich HSL von HSB und von der Office-Skala?

Figma zeigt dieselbe Farbe in mehreren Modellen, darunter HSL und HSB[4], und der Farbdialog in Word, Excel und PowerPoint gibt HSL in einer Skala von 0 bis 255 an[5]. Die Tabelle stellt alle drei Schreibweisen für acht Oberflächenfarben nebeneinander.
HEX-CodeHSL in CSSHSBHSL in Office (0–255)
#3B82F6hsl(217.2, 91.2%, 59.8%)217,2°; 76%; 96,5%154, 233, 153
#EF4444hsl(0, 84.2%, 60.2%)0°; 71,5%; 93,7%0, 215, 154
#22C55Ehsl(142.1, 70.6%, 45.3%)142,1°; 82,7%; 77,3%100, 180, 116
#F59E0Bhsl(37.7, 92.1%, 50.2%)37,7°; 95,5%; 96,1%26, 235, 128
#8B5CF6hsl(258.3, 89.5%, 66.3%)258,3°; 62,6%; 96,5%183, 228, 169
#1E293Bhsl(217.2, 32.6%, 17.5%)217,2°; 49,2%; 23,1%154, 83, 45
#FAFAFAhsl(0, 0%, 98%)0°; 0%; 98%170, 0, 250
#333333hsl(0, 0%, 20%)0°; 0%; 20%170, 0, 51
Der Farbton ist in HSL und HSB gleich, Sättigung und dritter Wert werden in beiden Modellen jedoch nach unterschiedlichen Formeln berechnet. In HSB hat jede Farbe, deren stärkster Kanal 255 erreicht, beim dritten Wert 100%, in HSL bedeutet eine Helligkeit von 100% Weiß. HSB ist ein anderer Name für HSV, deshalb liefert der RGB-in-HSV-Umrechner HSB-Werte mit einer Nachkommastelle und auch in der OpenCV-Skala.

Wie viele Nachkommastellen braucht HSL?

Wir haben das am 13. September 2026 in Chromium 151 an allen 16 777 216 Farben geprüft. Auf ganze Zahlen gerundetes HSL ergab in 15 012 120 Fällen eine andere Farbe, also bei 89,5% aller Farben. Mit einer Nachkommastelle kam jeder HEX-Code unverändert zurück, und deshalb gibt der Umrechner sein Ergebnis in dieser Form aus.
HEX-CodeErgebnis des UmrechnersDieselben Werte gerundetFarbe aus den gerundeten Werten
#3B82F6hsl(217.2, 91.2%, 59.8%)hsl(217, 91%, 60%)#3C83F6
#EF4444hsl(0, 84.2%, 60.2%)hsl(0, 84%, 60%)#EF4343
#22C55Ehsl(142.1, 70.6%, 45.3%)hsl(142, 71%, 45%)#21C45D
#F59E0Bhsl(37.7, 92.1%, 50.2%)hsl(38, 92%, 50%)#F59F0A
#8B5CF6hsl(258.3, 89.5%, 66.3%)hsl(258, 90%, 66%)#895AF6
#1E293Bhsl(217.2, 32.6%, 17.5%)hsl(217, 33%, 18%)#1F2A3D
In diesen sechs Beispielen weicht die Farbe aus den gerundeten Werten um ein bis zwei Stufen pro Kanal ab. Der Code im Stylesheet stimmt dann nicht mehr mit dem Code im Styleguide überein. Die Farbe haben wir über style.color gesetzt und mit getComputedStyle ausgelesen.

Welche Schreibweisen des HEX-Codes verarbeitet dieser Umrechner?

Das Feld nimmt jede dieser Schreibweisen an und rechnet sie um, Sie müssen vor dem Einfügen also nichts bereinigen. Die Tabelle zeigt, was der Umrechner mit jeder einzelnen macht, und die Ergebnisse hat er selbst berechnet.
Ihre EingabeErgebnis des UmrechnersWie wir das lesen
#3B82F6hsl(217.2, 91.2%, 59.8%)Ein Code mit Rautezeichen, genau so, wie er im Stylesheet steht
3b82f6hsl(217.2, 91.2%, 59.8%)Das Rautezeichen ist nicht nötig, und Kleinbuchstaben lesen wir wie Großbuchstaben
#38Fhsl(215, 100%, 60%)Die dreistellige Kurzform erweitern wir selbst: #38F lesen wir als #3388FF
#3B82F680hsla(217.2, 91.2%, 59.8%, 0.5)Die letzten beiden Stellen sind die Deckkraft — wir nehmen sie mit und geben das Ergebnis als hsla aus
color: #3B82F6;hsl(217.2, 91.2%, 59.8%)Fügen Sie die ganze Zeile aus dem Stylesheet oder den Entwicklertools ein, den Code holen wir heraus
"#3B82F6"hsl(217.2, 91.2%, 59.8%)Anführungszeichen aus einer JSON-Datei oder aus JavaScript lassen wir weg und lesen nur den Code
##3B82F6hsl(217.2, 91.2%, 59.8%)Ein doppeltes Rautezeichen, wie es beim Einfügen neben einem bereits getippten entsteht, stört nicht
#EF44440, 215, 154Steht der Schalter Schreibweise auf Microsoft Office, kommt das Ergebnis auf der Skala 0–255, wie im Dialog Farben in Word und Excel

Wo verwenden Sie das HSL-Ergebnis?

Stylesheets und Browser arbeiten mit der CSS-Schreibweise, Office-Programme mit der Skala 0–255. Stellen Sie deshalb vor dem Kopieren die passende Schreibweise am Schalter ein.

  1. CSS-Stylesheet

    Fügen Sie das Ergebnis als Wert einer Eigenschaft ein, zum Beispiel color: hsl(217.2, 91.2%, 59.8%);. CSS akzeptiert auch die Form mit Leerzeichen und der Deckkraft nach einem Schrägstrich: hsl(217.2 91.2% 59.8% / 50%)[1].

  2. Figma

    Markieren Sie die Ebene und klicken Sie in der rechten Seitenleiste auf das Farbfeld der Füllung. Öffnen Sie unter den Reglern für Farbton und Deckkraft die Liste der Farbmodelle und wählen Sie HSL[4].

  3. PowerPoint, Word und Excel

    Markieren Sie eine Form, klicken Sie auf Formfüllung und wählen Sie Weitere Füllfarben[6]. Stellen Sie auf der Registerkarte Benutzerdefiniert das Farbmodell auf HSL und tragen Sie die drei Office-Werte in die Felder darunter ein.

  4. Chrome

    Klicken Sie mit der rechten Maustaste auf das Element und wählen Sie Untersuchen. Klicken Sie im Stilbereich mit gedrückter Umschalttaste auf das Farbfeld und wählen Sie in der Liste, die sich öffnet, hsl(X X X / X)[7]. Der Wert im Bereich wechselt dann zu HSL.

Andere Einheiten in HSL umrechnen

RGB in HSL

HEX in andere Einheiten umrechnen

HEX in RGBHEX in CMYK

Quellen

  1. CSS Color Module Level 4 — HSL Colors: hsl() and hsla() functions — W3C
  2. HSL and HSV — Wikipedia (englisch)
  3. CSS Color Module Level 3 — HSL color values — W3C
  4. Update fills using the color picker — Figma Help Center
  5. Auswählen von Farben im Dialogfeld Farben — Microsoft Support
  6. Ändern der Farben in einem Textfeld oder in einer Form — Microsoft Support
  7. Mit der Farbauswahl HD- und Nicht-HD-Farben prüfen und debuggen — Chrome for Developers

Alle Werte in den Tabellen haben wir aus den Einheitendefinitionen berechnet und vor der Veröffentlichung rechnerisch geprüft. Historische Angaben und die Namen lokaler Einheiten stützen sich auf die oben genannten Quellen.

Inhalt zuletzt geprüft: · erstellt und geprüft vom Arteon-Team

Häufige Fragen zur Umrechnung von HEX in HSL

Welche HSL-Schreibweise wähle ich im Umrechner?

Wählen Sie CSS für Stylesheets und die Entwicklertools des Browsers. Wählen Sie Microsoft Office (0–255), wenn Sie die Farbe in den Farbdialog von Word, Excel oder PowerPoint übertragen, denn dort reicht jeder der drei Werte von 0 bis 255[5].

Warum kommt eine in Office eingegebene Farbe mit einem anderen HEX-Code zurück?

Der Farbdialog rechnet HSL in ganzen Zahlen auf einer Skala von 0 bis 255, dabei geht ein Teil der Genauigkeit verloren. Wir haben das in Office 2016 geprüft: #3B82F6 erscheint dort als 154, 233 und 153, und diese drei Zahlen ergeben zurückgerechnet #3C83F6. Der Umrechner verwendet denselben Algorithmus und zeigt Ihnen genau die Farbe, die Sie im Programm sehen. Werte aus dem Dialog geben Sie im HSL-in-HEX-Umrechner mit der Office-Schreibweise ein.

Wie schreibe ich eine HSL-Farbe mit Transparenz?

Geben Sie einen achtstelligen Code ein, zum Beispiel #3B82F680. Der Umrechner liefert dann hsla(217.2, 91.2%, 59.8%, 0.5), wobei die vierte Zahl die Deckkraft von 0 bis 1 ist[1]. Die Office-Schreibweise gibt nur die drei Werte für Farbton, Sättigung und Helligkeit aus.

Warum haben Gelb und Blau in HSL dieselbe Helligkeit?

Die Helligkeit in HSL ist der Mittelwert aus dem stärksten und dem schwächsten Kanal und entspricht deshalb nicht dem Helligkeitseindruck des Auges. Die CSS-Spezifikation nennt genau dieses Beispiel: hsl(60 100% 50%) und hsl(240 100% 50%) haben beide 50%, und doch wirkt das Gelb deutlich heller[1].

Wie mache ich eine Farbe in HSL heller?

Lassen Sie Farbton und Sättigung unverändert und erhöhen Sie nur die Helligkeit. hsl(217.2, 91.2%, 59.8%) mit 70% Helligkeit ergibt #6DA2F8. Eine fertige Helligkeitsskala und die Umrechnung beliebiger HSL-Werte in einen Code finden Sie im HSL-in-HEX-Umrechner.

Hat eine Farbe in HSL denselben Kontrast wie in HEX?

Ja, denn beide Schreibweisen beschreiben dieselbe Farbe, und der Kontrast hängt von der Farbe ab. Fügen Sie das Ergebnis in den Farbkontrast-Checker ein, der HSL genauso annimmt wie einen HEX-Code.

Screenshot des kostenlosen Arteon-Werkzeugs: HEX-Code in HSL umrechnen

Helfen Sie uns, unsere Werkzeuge zu verbessern

Haben Sie eine Idee, einen Fehler gefunden oder einen Vorschlag für ein neues Werkzeug? Schreiben Sie uns.