HSL in einen HEX-Code umrechnen

Inhalt zuletzt geprüft:

Geben Sie HSL-Werte ein, und der HEX-Code erscheint schon beim Tippen: hsl(217.2, 91.2%, 59.8%) ist #3B82F6. Das Feld nimmt Kommas, Leerzeichen und die Deckkraft nach einem Schrägstrich an. Mit der Office-Schreibweise geben Sie die drei Werte 0–255 aus dem Farbdialog ein.

Geben Sie den Farbton in Grad sowie Sättigung und Helligkeit in Prozent ein. Trennen Sie die Werte mit Kommas oder Leerzeichen.

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 HSL in HEX um?

Wandeln Sie Sättigung und Helligkeit in Brüche von 0 bis 1 um, berechnen Sie daraus die drei RGB-Kanäle und schreiben Sie jeden Kanal als zwei Hexadezimalziffern. Grundlage der Rechnung ist die Chroma, also der Abstand zwischen dem stärksten und dem schwächsten Kanal der Farbe[1]. Stammen die Zahlen aus dem Office-Farbdialog, stellen Sie zuerst die Schreibweise Microsoft Office (0–255) ein. Steht schon eine Farbe im Feld, schreibt der Schalter sie als dieselbe Farbe in der neuen Schreibweise um.


Formel: C = (1 − |2L − 1|) × S, der stärkste Kanal ist L + C ÷ 2, der schwächste L − C ÷ 2.


Nehmen wir hsl(217.2, 91.2%, 59.8%). Die Chroma beträgt hier 0,733. Der stärkste Kanal hat also 0,965, der schwächste 0,231. Ein Farbton von 217,2° liegt zwischen Cyan und Blau. Deshalb ist Blau der stärkste und Rot der schwächste Kanal, und Grün liegt dazwischen bei 0,510[1].


Mit 255 multipliziert ergeben die Kanäle 59, 130 und 246. Hexadezimal sind das 3B, 82 und F6, also der Code #3B82F6. Beide Hälften dieses Weges haben ein eigenes Werkzeug: den HSL-in-RGB-Umrechner und den RGB-in-HEX-Umrechner.

Was bedeuten Farbton, Sättigung und Helligkeit in HSL?

Der erste Wert ist der Farbton, angegeben als Winkel auf dem Farbkreis. Die Grundfarben des Bildschirms liegen darauf 120 Grad auseinander: Rot bei 0°, Grün bei 120° und Blau bei 240°, und 360° ist wieder Rot[2].


Der zweite Wert ist die Sättigung. Bei 100% hat die Farbe ihre volle Buntheit, bei 0% wird sie zu einem Grau, in dem der Farbton keine Rolle mehr spielt. Der dritte Wert ist die Helligkeit. Sie ergibt bei 0% Schwarz, bei 100% Weiß, und die volle Farbe eines Farbtons liegt bei 50%[2].


CSS nimmt den Farbton auch in anderen Winkeleinheiten an. Eine volle Umdrehung sind 360 Grad, 400 Gon, 2π Radiant oder eine Umdrehung, geschrieben als 1turn[3]. Der Umrechner liest alle diese Formen, daher ergibt 0.25turn dieselbe Farbe wie 90°.


Das HSL-Modell wurde 1978 beschrieben, und schon 1979 stellte Tektronix Grafikterminals vor, bei denen man Farben in HSL einstellte[1].


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

Wie erzeugt man hellere und dunklere Varianten einer Farbe in HSL?

Ändern Sie nur die Helligkeit und lassen Sie Farbton und Sättigung unverändert. Die Tabelle zeigt neun Helligkeitsstufen für hsl(217.2, 91.2%, 59.8%) und die HEX-Codes, die sich daraus ergeben.
HelligkeitHSLHEX-Code
10%hsl(217.2, 91.2%, 10%)#021431
20%hsl(217.2, 91.2%, 20%)#042862
30%hsl(217.2, 91.2%, 30%)#073C92
40%hsl(217.2, 91.2%, 40%)#0950C3
50%hsl(217.2, 91.2%, 50%)#0B64F4
60%hsl(217.2, 91.2%, 60%)#3C83F6
70%hsl(217.2, 91.2%, 70%)#6DA2F8
80%hsl(217.2, 91.2%, 80%)#9DC1FB
90%hsl(217.2, 91.2%, 90%)#CEE0FD
Die Stufe 60% ergibt #3C83F6. Die Ausgangsfarbe #3B82F6 hat eine Helligkeit von 59,8%, also 0,2 Prozentpunkte weniger.

Welche HEX-Codes haben Farbtöne im Abstand von 30 Grad?

Die CSS-Spezifikation zeigt die HSL-Palette in Schritten von 30°, von Rottönen über Gelb, Grün, Cyan und Blau bis zu Magenta[2]. Alle Zeilen haben 100% Sättigung und 50% Helligkeit.
FarbtonFarbtöne in der CSS-SpezifikationHSLHEX-Code
0°Rottönehsl(0, 100%, 50%)#FF0000
30°Rot-Gelb, also Orangehsl(30, 100%, 50%)#FF8000
60°Gelbtönehsl(60, 100%, 50%)#FFFF00
90°Gelb-Grünhsl(90, 100%, 50%)#80FF00
120°Grüntönehsl(120, 100%, 50%)#00FF00
150°Grün-Cyanhsl(150, 100%, 50%)#00FF80
180°Cyantönehsl(180, 100%, 50%)#00FFFF
210°Cyan-Blauhsl(210, 100%, 50%)#0080FF
240°Blautönehsl(240, 100%, 50%)#0000FF
270°Blau-Magentahsl(270, 100%, 50%)#8000FF
300°Magentatönehsl(300, 100%, 50%)#FF00FF
330°Magenta-Rothsl(330, 100%, 50%)#FF0080
Die Farbtöne bei 0°, 120° und 240° sind die Grundfarben des Bildschirms, ihre Codes haben also einen vollen und zwei leere Kanäle. In den Zwischenschritten wie 30° und 90° steht ein Kanal auf der halben Skala, hexadezimal 80.

Welchen HEX-Code ergeben die Zahlen aus dem Office-Farbdialog?

Der Farbdialog in Office zeigt Farbton, Sättigung und Helligkeit in einer Skala von 0 bis 255[4]. Wir haben solche Zahlen in Office 2016 eingegeben und das Ergebnis im selben Dialog abgelesen, und 40 Kombinationen kamen im Umrechner genauso heraus wie im Programm. Die Tabelle zeigt zehn davon.
Werte in OfficeHEX-CodeDieselbe Farbe in CSS
0, 255, 128#FF0101hsl(0, 100%, 50.2%)
42, 255, 128#FFFF01hsl(60, 100%, 50.2%)
85, 255, 128#01FF01hsl(120, 100%, 50.2%)
127, 255, 128#01FFFFhsl(180, 100%, 50.2%)
170, 255, 128#0101FFhsl(240, 100%, 50.2%)
213, 255, 128#FF01FFhsl(300, 100%, 50.2%)
154, 233, 153#3C83F6hsl(217.1, 91.2%, 60%)
170, 0, 128#808080hsl(0, 0%, 50.2%)
0, 0, 255#FFFFFFhsl(0, 0%, 100%)
0, 0, 0#000000hsl(0, 0%, 0%)
Reines Rot, eingegeben als 0, 255 und 128, ergibt #FF0101. Eine Helligkeit von 128 ist auf einer Skala bis 255 etwas mehr als die Hälfte, daher haben die beiden schwächeren Kanäle den Wert 1.

Welche Schreibweisen von HSL 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
hsl(217.2, 91.2%, 59.8%)#3B82F6Die ältere CSS-Schreibweise mit Kommas lesen wir genauso wie die neue
hsl(217.2 91.2% 59.8%)#3B82F6Die neuere CSS-Schreibweise mit Leerzeichen übernehmen wir unverändert
217,2 91,2 59,8#3B82F6Nur Zahlen mit Dezimalkomma, ohne Klammern und ohne Prozentzeichen — wir gehen nach ihrer Reihenfolge
H: 217.2 S: 91.2% L: 59.8%#3B82F6Kanalbuchstaben mit Doppelpunkt, wie sie im Markenhandbuch stehen, lassen wir weg und nehmen die Zahlen
hsl(217.2 91.2% 59.8% / 50%)#3B82F680Die Deckkraft nach dem Schrägstrich hängen wir als die letzten beiden Stellen an den Code an
180°, 100%, 50%#00FFFFEin Gradzeichen beim Farbton stört nicht, wir lesen nur die Zahl
color: hsl(217, 91%, 60%);#3C83F6Fügen Sie die ganze Zeile aus dem Stylesheet ein, die Farbe holen wir heraus
154, 233, 153#3C83F6Drei Zahlen auf der Skala 0–255, also die Schreibweise Microsoft Office aus dem Dialog Farben in Word und Excel — bei dieser Stellung des Schalters Schreibweise lesen wir sie wie Prozentwerte

Woher bekommen Sie HSL-Werte, und wo fügen Sie den HEX-Code ein?

Die ersten beiden Stellen liefern HSL-Werte zum Umrechnen, die beiden folgenden nehmen den fertigen HEX-Code an.

  1. Office-Farbdialog

    Klicken Sie auf Formfüllung und wählen Sie Weitere Füllfarben[5]. Stellen Sie auf der Registerkarte Benutzerdefiniert das Farbmodell auf HSL und übernehmen Sie die drei Zahlen aus den Feldern darunter. Im Umrechner wählen Sie die Schreibweise Microsoft Office (0–255).

  2. CSS-Stylesheet

    Suchen Sie in der Datei nach hsl( oder hsla( und kopieren Sie den ganzen Wert samt Klammern. Der Umrechner nimmt ihn mit Kommas, Leerzeichen und der Deckkraft nach einem Schrägstrich an.

  3. Google Docs, Tabellen und Präsentationen

    Klicken Sie in der Symbolleiste auf Textfarbe oder ein anderes Werkzeug mit Farboptionen. Klicken Sie unter Benutzerdefiniert auf Benutzerdefinierte Farbe hinzufügen, fügen Sie den HEX-Code ein und klicken Sie auf OK[6].

  4. Figma

    Klicken Sie in der rechten Seitenleiste auf das Farbfeld der Füllung. Wählen Sie in der Liste der Farbmodelle unter den Reglern Hex[7] und fügen Sie den Code in das Feld daneben ein.

Andere Einheiten in HEX umrechnen

RGB in HEXCMYK in HEX

HSL in andere Einheiten umrechnen

HSL in RGB

Quellen

  1. HSL and HSV — Wikipedia (englisch)
  2. CSS Color Module Level 4 — HSL Colors: hsl() and hsla() functions — W3C
  3. CSS Values and Units Module Level 4 — Angle Units — W3C
  4. Auswählen von Farben im Dialogfeld Farben — Microsoft Support
  5. Ändern der Farben in einem Textfeld oder in einer Form — Microsoft Support
  6. Farbe von Text, Objekten und Hintergründen ändern — Google Docs-Editoren-Hilfe
  7. Update fills using the color picker — Figma Help Center

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 HSL in HEX

Warum ergibt hsl(217, 91%, 60%) einen anderen Code als #3B82F6?

Auf ganze Zahlen gerundetes HSL beschreibt die Farbe weniger genau. hsl(217, 91%, 60%) ergibt #3C83F6, während #3B82F6 den Wert hsl(217.2, 91.2%, 59.8%) hat. Wie viele Farben sich durch solches Runden ändern, zeigt eine Tabelle im HEX-in-HSL-Umrechner.

Wie gebe ich eine HSL-Farbe mit Transparenz ein?

Schreiben Sie die Deckkraft nach einem Schrägstrich, zum Beispiel hsl(217.2 91.2% 59.8% / 50%), oder geben Sie sie als vierten Wert von hsla() an[2]. Der Umrechner liefert dann den achtstelligen Code #3B82F680, dessen letzte zwei Ziffern die Deckkraft enthalten.

Was passiert, wenn ich eine Sättigung außerhalb von 0–100% eingebe?

Der Umrechner setzt sie auf die Grenze des Bereichs, 150% zählen also als 100%. Ein negativer Wert zählt als 0%, so wie es die CSS-Spezifikation vorschreibt[2]. Für die Helligkeit gilt dasselbe.

Ist ein Farbton von 360° dieselbe Farbe wie 0°?

Ja. Der Farbton ist ein Winkel, daher steht 360° für dasselbe Rot wie 0°[2]. Aus demselben Grund ergibt 480° dasselbe Grün wie 120° und −120° dasselbe Blau wie 240°.

Wie rechne ich HSL in RGB-Werte um?

Geben Sie den Wert in den HSL-in-RGB-Umrechner ein, der drei Kanäle von 0 bis 255 ausgibt. Für hsl(217.2, 91.2%, 59.8%) ist das Ergebnis rgb(59, 130, 246).

Wie übertrage ich eine Farbe aus dem Office-Dialog in ein Stylesheet?

Wählen Sie die Schreibweise Microsoft Office (0–255) und geben Sie die drei Zahlen aus dem Farbdialog ein. Den HEX-Code aus dem Ergebnisfeld können Sie direkt in CSS einfügen, und der HEX-in-HSL-Umrechner gibt dieselbe Farbe in Grad und Prozent aus.

Screenshot des kostenlosen Arteon-Werkzeugs: HSL in einen HEX-Code 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.