HSL in RGB-Werte umrechnen
Geben Sie HSL-Werte ein, und die RGB-Kanäle erscheinen schon beim Tippen: hsl(217.2, 91.2%, 59.8%) ist rgb(59, 130, 246). Das Ergebnis steht immer auf der Skala 0 bis 255, und die Deckkraft aus hsla erscheint in rgba. Mit der Office-Schreibweise geben Sie Zahlen 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.
Wie rechnet man HSL in RGB um?
Berechnen Sie jeden Kanal einzeln mit einer Formel aus der CSS-Spezifikation. In dieser Formel hat Rot die Zahl n gleich 0, Grün 8 und Blau 4[1]. Sättigung und Helligkeit setzen Sie als Brüche von 0 bis 1 ein.
Formel: k = (n + H ÷ 30) mod 12, a = S × min(L, 1 − L), Kanal = L − a × max(−1, min(k − 3, 9 − k, 1)).
Nehmen wir hsl(0, 84.2%, 60.2%). Eine Helligkeit von 0,602 und eine Sättigung von 0,842 ergeben a gleich 0,335. Für Rot ist k gleich 0, die Klammer ergibt also −1, und der Kanal beträgt 0,602 + 0,335, also 0,937.
Für Grün und Blau ergibt die Klammer 1. Beide Kanäle betragen daher 0,602 − 0,335, also 0,267. Mit 255 multipliziert und gerundet ergibt das rgb(239, 68, 68). Chromium 151, in dem wir es getestet haben, liefert dasselbe Ergebnis.
Den HEX-Code dieser Farbe gibt der HSL-in-HEX-Umrechner aus. Der RGB-in-HSL-Umrechner rechnet RGB wieder in HSL um.
Wie wird HSL in RGB-Kanäle übersetzt?
Der Farbton bestimmt die Farbe auf dem Farbkreis, also welche RGB-Kanäle stark und welche schwach sind. Bei 0° ist Rot der stärkste Kanal, bei 120° Grün und bei 240° Blau[1].
Die Sättigung gibt an, wie weit die Kanäle auseinanderliegen. Bei 0% sind alle drei gleich, und die Farbe ist grau. Die Helligkeit legt das Niveau aller Kanäle zugleich fest: Bei 0% steht jeder auf 0, bei 100% jeder auf 255, und bei 50% hat die Farbe ihre gewöhnliche Form[1].
CSS kennt für diese Schreibweise zwei Syntaxen. In der älteren trennen Kommas die Werte, und Sättigung und Helligkeit brauchen ein Prozentzeichen. In der neueren trennen Leerzeichen die Werte, die Deckkraft folgt nach einem Schrägstrich, und Sättigung und Helligkeit dürfen ohne Prozentzeichen stehen[1]. Der Umrechner liest beide, daher ergibt hsl(217.2 91.2 59.8) dasselbe wie hsl(217.2, 91.2%, 59.8%).
Liegt Ihre Farbe in einer anderen Schreibweise vor, etwa als OKLCH, Lab oder Android-Code, zeigt der Farbumrechner sie gleichzeitig in allen Schreibweisen.
Wie verändert die Sättigung die RGB-Werte?
hsl(217.2, 91.2%, 59.8%) in Schritten von 10 Punkten von 100% auf 0%. Farbton und Helligkeit bleiben gleich, so sehen Sie, wie der Abstand zwischen den Kanälen kleiner wird.| Sättigung | HSL | RGB-Werte |
|---|---|---|
| 100% | hsl(217.2, 100%, 59.8%) | 50, 128, 255 |
| 90% | hsl(217.2, 90%, 59.8%) | 60, 130, 245 |
| 80% | hsl(217.2, 80%, 59.8%) | 70, 133, 234 |
| 70% | hsl(217.2, 70%, 59.8%) | 81, 135, 224 |
| 60% | hsl(217.2, 60%, 59.8%) | 91, 138, 214 |
| 50% | hsl(217.2, 50%, 59.8%) | 101, 140, 204 |
| 40% | hsl(217.2, 40%, 59.8%) | 111, 143, 193 |
| 30% | hsl(217.2, 30%, 59.8%) | 122, 145, 183 |
| 20% | hsl(217.2, 20%, 59.8%) | 132, 148, 173 |
| 10% | hsl(217.2, 10%, 59.8%) | 142, 150, 163 |
| 0% | hsl(217.2, 0%, 59.8%) | 152, 152, 152 |
Wie schreibt man den Farbton in Grad, Gon, Radiant und Umdrehungen?
| CSS-Schreibweise | Winkel in Grad | RGB-Werte |
|---|---|---|
| hsl(90deg, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(90, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(100grad, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(0.25turn, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(1.5708rad, 100%, 50%) | 90,0002° | 127, 255, 0 |
| hsl(1.570796rad, 100%, 50%) | 89,99998° | 128, 255, 0 |
Welche Schreibweisen von HSL verarbeitet dieser Umrechner?
| Ihre Eingabe | Ergebnis des Umrechners | Wie wir das lesen |
|---|---|---|
| hsl(217.2, 91.2%, 59.8%) | rgb(59, 130, 246) | Die CSS-Schreibweise mit Kommas übernehmen wir unverändert |
| H 217.2 S 91.2 L 59.8 | rgb(59, 130, 246) | Kanalbuchstaben und fehlende Prozentzeichen stören nicht, die Zahlen lesen wir der Reihe nach |
| hsla(217,2, 91,2%, 59,8%, 0,5) | rgba(59, 130, 246, 0.5) | Das Dezimalkomma funktioniert auch bei der Deckkraft, Sie müssen es nicht in einen Punkt ändern |
| hsl(0.25turn, 100%, 50%) | rgb(128, 255, 0) | Einen Farbton in Umdrehungen rechnen wir in Grad um: 0.25turn sind bei uns 90° |
| hsl(-120, 100%, 50%) | rgb(0, 0, 255) | Einen negativen Farbton zählen wir vom Ende des Farbkreises aus, genau wie der Browser |
| hsl(0, 150%, 50%) | rgb(255, 0, 0) | Sättigung über 100% begrenzen wir auf 100%, genau wie der Browser |
| color: hsl(217, 91%, 60%); | rgb(60, 131, 246) | Fügen Sie die ganze Zeile aus dem Stylesheet ein, die Farbe holen wir heraus |
| 154, 233, 153 | rgb(60, 131, 246) | Drei 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 |
Wo geben Sie das RGB-Ergebnis ein?
Google Docs und der Office-Dialog übernehmen RGB-Werte direkt aus dem Umrechner, während Code das Ergebnis oft als Brüche braucht.
Google Docs, Tabellen und Präsentationen
Klicken Sie in der Symbolleiste auf Textfarbe oder ein anderes Werkzeug mit Farboptionen und unter Benutzerdefiniert auf Benutzerdefinierte Farbe hinzufügen. Im Fenster, das sich öffnet, geben Sie den Hex-Code oder die RGB-Werte ein[3].Office-Farbdialog
Lassen Sie auf der Registerkarte Benutzerdefiniert das Farbmodell auf RGB und tragen Sie die drei Zahlen in die Felder für Rot, Grün und Blau ein[4]. In unserem Test in Office 2016 nahmen diese Felder Werte von 0 bis 255 an.Python
colorsys.hls_to_rgb(h, l, s)nimmt die Helligkeit vor der Sättigung und alle drei Werte als Brüche von 0 bis 1[5]. Auch das Ergebnis besteht aus Brüchen, multiplizieren Sie also jeden Kanal mit 255, um die Zahlen des Umrechners zu erhalten.JavaScript
Die CSS-Spezifikation enthält eine fertige FunktionhslToRgb(hue, sat, light), die den Farbton in Grad und Sättigung und Helligkeit von 0 bis 100 annimmt[1]. Sie gibt Kanäle von 0 bis 1 zurück, und der Umrechner verwendet dieselbe Formel.
Andere Einheiten in RGB umrechnen
HSL in andere Einheiten umrechnen
Quellen
- CSS Color Module Level 4 — Converting HSL Colors to sRGB — W3C
- CSS Values and Units Module Level 4 — Angle Units — W3C
- Farbe von Text, Objekten und Hintergründen ändern — Google Docs-Editoren-Hilfe
- Auswählen von Farben im Dialogfeld Farben — Microsoft Support
- colorsys — Conversions between color systems — Python Software Foundation
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 RGB
Warum ergibt das zurückgerechnete RGB-Ergebnis einen leicht anderen HSL-Wert?
RGB-Kanäle nehmen nur ganze Zahlen an, daher ergeben mehrere HSL-Werte dieselbe Farbe. hsl(217, 91%, 60%) ergibt rgb(60, 131, 246), und diese Farbe zurückgerechnet ist hsl(217.1, 91.2%, 60%). Beide beschreiben auf dem Bildschirm genau dieselbe Farbe.
Wie rechne ich Zahlen aus dem Office-Farbdialog in RGB um?
Wählen Sie die Schreibweise Microsoft Office (0–255) und geben Sie die drei Zahlen aus dem Dialog ein. Die Werte 154, 233 und 153 ergeben rgb(60, 131, 246), denn der Dialog rechnet HSL auf einer Skala von 0 bis 255[4] und verliert dabei etwas Genauigkeit. Geben Sie die Zahlen erst nach dem Umstellen ein, denn eine Farbe, die schon im Feld steht, schreibt der Schalter als dieselbe Farbe in der neuen Schreibweise um.
Kann ich Sättigung und Helligkeit ohne Prozentzeichen eingeben?
Ja. Der Umrechner liest einfache Zahlen so, wie es die neuere CSS-Syntax tut, daher ergibt 217.2 91.2 59.8 den Wert rgb(59, 130, 246)[1].
Wie erhalte ich RGB-Kanäle als Brüche von 0 bis 1?
Rechnen Sie den HSL-Wert mit dem HSL-in-HEX-Umrechner in einen Code um und geben Sie diesen Code in den Umrechner HEX in RGB ein, mit dem Schalter auf 0–1. Für hsl(217.2, 91.2%, 59.8%) erhalten Sie 0,2314, 0,5098 und 0,9647.
Zeigt der Browser dieselbe Farbe wie der Umrechner?
Ja. Wir haben das in Chromium 151 an allen 16 777 216 Farben getestet: Die HSL-Werte aus unseren Umrechnern ergaben im Browser genau die RGB-Kanäle, von denen wir ausgegangen waren.
Wie lege ich in RGB eine Farbe mit Transparenz fest?
Ergänzen Sie den HSL-Wert um die Deckkraft, zum Beispiel hsla(217.2, 91.2%, 59.8%, 0.5). Der Umrechner gibt rgba(59, 130, 246, 0.5) aus, und die vierte Zahl bleibt gleich.
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.