RGB-Werte in HSL umrechnen

Inhalt zuletzt geprüft:

Geben Sie drei RGB-Kanäle ein, und die HSL-Werte erscheinen schon beim Tippen: rgb(59, 130, 246) ist hsl(217.2, 91.2%, 59.8%). Das Feld nimmt Zahlen mit und ohne Klammern an und erkennt Kanäle, die als Brüche von 0 bis 1 geschrieben sind. Der Schalter gibt CSS oder die Office-Skala aus.

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

Teilen Sie jeden Kanal durch 255 und suchen Sie den größten und den kleinsten Wert. Die Helligkeit ist der Mittelwert dieser beiden Zahlen. Die Sättigung ergibt sich aus ihrem Abstand, und der Farbton hängt davon ab, welcher Kanal der stärkste ist[1].


Formel: Δ = max − min, L = (max + min) ÷ 2, S = Δ ÷ (1 − |2L − 1|), und wenn Rot der stärkste Kanal ist, gilt H = 60° × ((G − B) ÷ Δ).


Nehmen wir rgb(239, 68, 68). Durch 255 geteilt hat Rot den Wert 0,937, Grün und Blau haben je 0,267. Der Mittelwert von 0,937 und 0,267 beträgt 0,602, die Helligkeit liegt also bei 60,2%. Der Abstand der beiden Zahlen beträgt 0,671 und ergibt eine Sättigung von 84,2%.


Grün und Blau sind hier gleich groß, daher beträgt der Farbton genau 0°. Die ganze Farbe lautet hsl(0, 84.2%, 60.2%). Ist Grün der stärkste Kanal, zählt der Farbton ab 120°, deshalb ergibt rgb(34, 197, 94) den Wert hsl(142.1, 70.6%, 45.3%).


Die HEX-Codes dieser Farben liefert der RGB-in-HEX-Umrechner. Von einem Code aus rechnet der HEX-in-HSL-Umrechner.

Worin unterscheidet sich HSL von RGB?

RGB beschreibt eine Farbe über die Mengen an rotem, grünem und blauem Licht, die ein Bildschirm zu einem Pixel mischt. HSL beschreibt dieselbe Farbe über ihren Farbton, ihre Buntheit und ihre Helligkeit. Die CSS-Spezifikation hält fest, dass man an RGB-Zahlen schwer erkennt, wie man eine Farbe heller macht und dabei ihren Farbton behält[1].


Beide Schreibweisen decken denselben sRGB-Farbraum ab. Eine in CSS als HSL angegebene Farbe rechnet der Browser in sRGB um[1], daher lässt sich jede HSL-Farbe als drei RGB-Kanäle schreiben und umgekehrt.


Die Urheber des Modells, George Joblove und Donald Greenberg, benannten seine Dimensionen 1978 anders: hue, relative chroma und intensity[2]. Die CSS-Spezifikation nennt sie hue, saturation und lightness, auf Deutsch Farbton, Sättigung und Helligkeit[1].


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

Welche HSL-Werte haben RGB-Grautöne?

Wenn alle drei Kanäle gleich sind, ist die Farbe grau und ihre Sättigung beträgt 0%. Wie hell oder dunkel das Grau ist, bestimmt dann allein die Helligkeit, und der Farbton hat keinen Einfluss auf das Ergebnis[1].
RGB-WerteHEX-CodeHSL in CSSHSL in Office (0–255)
0, 0, 0#000000hsl(0, 0%, 0%)170, 0, 0
32, 32, 32#202020hsl(0, 0%, 12.5%)170, 0, 32
64, 64, 64#404040hsl(0, 0%, 25.1%)170, 0, 64
96, 96, 96#606060hsl(0, 0%, 37.6%)170, 0, 96
128, 128, 128#808080hsl(0, 0%, 50.2%)170, 0, 128
160, 160, 160#A0A0A0hsl(0, 0%, 62.7%)170, 0, 160
192, 192, 192#C0C0C0hsl(0, 0%, 75.3%)170, 0, 192
224, 224, 224#E0E0E0hsl(0, 0%, 87.8%)170, 0, 224
255, 255, 255#FFFFFFhsl(0, 0%, 100%)170, 0, 255
In CSS ist die Helligkeit eines Grautons der Kanalwert geteilt durch 255. Der Office-Farbdialog verwendet dieselbe Skala wie die RGB-Kanäle, daher entspricht bei Grautönen seine dritte Zahl dem Kanalwert.

Wie schreibt man eine RGB-Farbe mit Deckkraft in HSL?

Die Deckkraft hat in beiden Schreibweisen denselben Wert: Die vierte Zahl in rgba() ist die vierte Zahl in hsla(). Die Tabelle zeigt sieben Deckkraftwerte für rgb(59, 130, 246) zusammen mit dem HEX-Code, in dem die Deckkraft die letzten zwei Stellen belegt.
DeckkraftrgbahslaHEX-Code
100%rgba(59, 130, 246, 1)hsl(217.2, 91.2%, 59.8%)#3B82F6
90%rgba(59, 130, 246, 0.9)hsla(217.2, 91.2%, 59.8%, 0.9)#3B82F6E6
75%rgba(59, 130, 246, 0.75)hsla(217.2, 91.2%, 59.8%, 0.75)#3B82F6BF
50%rgba(59, 130, 246, 0.5)hsla(217.2, 91.2%, 59.8%, 0.5)#3B82F680
25%rgba(59, 130, 246, 0.25)hsla(217.2, 91.2%, 59.8%, 0.25)#3B82F640
10%rgba(59, 130, 246, 0.1)hsla(217.2, 91.2%, 59.8%, 0.1)#3B82F61A
0%rgba(59, 130, 246, 0)hsla(217.2, 91.2%, 59.8%, 0)#3B82F600
Bei einer Deckkraft von 1 gibt der Umrechner einfaches hsl() aus, denn volle Deckkraft ist der Standardwert.

Wie rechnet man Kanäle als Brüche von 0 bis 1 in HSL um?

Manche Bibliotheken schreiben Kanäle als Brüche: Das Python-Modul colorsys etwa gibt alle Werte im Bereich von 0 bis 1 an[3]. Der Umrechner erkennt diese Schreibweise, wenn mindestens eine der drei Zahlen Nachkommastellen hat. Wie in Python steht dabei ein Punkt vor den Nachkommastellen.
Kanäle 0–1HSL in CSSHSL in Office (0–255)
0.2314, 0.5098, 0.9647hsl(217.2, 91.2%, 59.8%)154, 233, 153
0.1333, 0.7725, 0.3686hsl(142.1, 70.6%, 45.3%)100, 180, 116
0.5, 0.5, 0.5hsl(0, 0%, 50.2%)170, 0, 128
1.0, 0, 0hsl(0, 100%, 50%)0, 255, 128
Rot als 1, 0, 0 enthält nur ganze Zahlen, daher liest der Umrechner es auf der Skala 0–255. 1.0, 0, 0 zeigt Brüche an und ergibt volles Rot.

Welche Schreibweisen der RGB-Werte 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
rgb(59, 130, 246)hsl(217.2, 91.2%, 59.8%)Die CSS-Schreibweise mit Klammern übernehmen wir unverändert
59 130 246hsl(217.2, 91.2%, 59.8%)Drei durch Leerzeichen getrennte Zahlen genügen, Klammern und Kommas brauchen Sie nicht
R: 59, G: 130, B: 246hsl(217.2, 91.2%, 59.8%)Kanalbuchstaben, wie sie im Markenhandbuch stehen, lassen wir weg und nehmen nur die Zahlen
rgb(23.1%, 51%, 96.5%)hsl(217.2, 91.2%, 59.8%)Kanäle in Prozent rechnen wir selbst auf die Skala 0–255 um
rgba(59, 130, 246, 0,5)hsla(217.2, 91.2%, 59.8%, 0.5)Eine mit Dezimalkomma geschriebene Deckkraft übernehmen wir in das Ergebnis als hsla
0,2314 0,5098 0,9647hsl(217.2, 91.2%, 59.8%)Kanäle als Brüche von 0 bis 1 erkennen wir am Dezimalkomma und rechnen sie auf 0–255 um
[59, 130, 246]hsl(217.2, 91.2%, 59.8%)Ein von Python ausgegebenes NumPy-Array lesen wir samt eckigen Klammern
background-color: rgb(59, 130, 246);hsl(217.2, 91.2%, 59.8%)Fügen Sie die ganze Zeile aus dem Stylesheet ein, die Farbe holen wir heraus
300, -20, 128hsl(329.9, 100%, 50%)Werte außerhalb des Bereichs begrenzen wir genau wie der Browser: 300 auf 255 und −20 auf 0

Wie rechnet man RGB in HSL im Code, in CSS und in Office um?

Python, CSS und Office rechnen RGB selbst in HSL um. Jedes davon schreibt das Ergebnis in einer anderen Form, daher steht hier, wie Sie es jeweils lesen.

  1. Python

    colorsys.rgb_to_hls(r, g, b) nimmt Kanäle von 0 bis 1 und gibt Farbton, Helligkeit und Sättigung in dieser Reihenfolge zurück[3]. Für #3B82F6 beträgt der Farbton 0,6034. Das ist ein Anteil an einer vollen Umdrehung, mit 360 multipliziert ergibt er also 217,2°.

  2. CSS

    Mit der relativen Syntax hsl(from rgb(59 130 246) h s calc(l + 10)) rechnet der Browser RGB selbst in HSL um und erhöht die Helligkeit um 10 Punkte[4]. Wir haben diese Syntax in Chromium 151 getestet.

  3. Office-Farbdialog

    Geben Sie die Kanäle beim Farbmodell RGB ein und stellen Sie das Farbmodell danach auf HSL um. Der Dialog zeigt Farbton, Sättigung und Helligkeit auf einer Skala von 0 bis 255[5], also dieselben Zahlen, die der Umrechner in der Schreibweise Microsoft Office (0–255) ausgibt.

Andere Einheiten in HSL umrechnen

HEX in HSL

RGB in andere Einheiten umrechnen

RGB in HEXRGB in CMYKRGB in HSV

Quellen

  1. CSS Color Module Level 4 — Converting sRGB Colors to HSL — W3C
  2. HSL and HSV — Wikipedia (englisch)
  3. colorsys — Conversions between color systems — Python Software Foundation
  4. Verwendung relativer Farben — MDN Web Docs
  5. Auswählen von Farben im Dialogfeld Farben — Microsoft Support

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

Kann ich RGB-Kanäle in Prozent eingeben?

Ja. Der Umrechner rechnet Prozentwerte in die Skala 0–255 um, daher ergibt rgb(23.1%, 51%, 96.5%) dasselbe wie rgb(59, 130, 246), nämlich hsl(217.2, 91.2%, 59.8%).

Warum gibt getComputedStyle rgb zurück, obwohl ich in CSS hsl geschrieben habe?

Der Browser rechnet eine HSL-Farbe beim Berechnen des Stils in sRGB um und schreibt den berechneten Wert als rgb() oder rgba()[1]. Wenn Sie wieder HSL sehen möchten, rechnen Sie dieses Ergebnis hier um.

Warum verwendet colorsys in Python eine andere Reihenfolge als CSS?

Das Modul colorsys nennt dieses Modell HLS und gibt die Helligkeit vor der Sättigung zurück[3]. Die Werte (0.6034, 0.598, 0.912) bedeuten also einen Farbton von 217,2°, eine Helligkeit von 59,8% und eine Sättigung von 91,2%, in CSS geschrieben als hsl(217.2, 91.2%, 59.8%).

Wie rechne ich HSL wieder in RGB um?

Geben Sie den Wert in den HSL-in-RGB-Umrechner ein. Die Schaltfläche Reihenfolge tauschen führt Sie mit dem aktuellen Ergebnis dorthin.

Hat ein Grauton in HSL einen Farbton?

Bei 0% Sättigung verändert der Farbton die Farbe nicht[1], daher gibt der Umrechner in CSS-Schreibweise null aus. Der Office-Farbdialog setzt an diese Stelle 170, und die Farbe bleibt dieselbe.

Wie prüfe ich, ob eine RGB-Farbe auf einem Hintergrund lesbar ist?

Fügen Sie die RGB-Werte oder das HSL-Ergebnis in den Farbkontrast-Checker ein. Er zeigt das Kontrastverhältnis zusammen mit den WCAG-Schwellen für Text.

Screenshot des kostenlosen Arteon-Werkzeugs: RGB-Werte 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.