Zum Hauptinhalt springen
ToolsByUs

RGB in HSL umwandeln

Der RGB-zu-HSL-Konverter beschreibt drei Farbkanäle neu als Winkel, Sättigung und Helligkeit. Nur der größte und der kleinste Kanal zählen: Ihre Mitte ist die Helligkeit, ihr Abstand ist die Chroma, und welcher von beiden größer ist, wählt den 60°-Sektor, in den der Farbton fällt. Die Position des mittleren Kanals innerhalb dieses Sektors liefert den exakten Winkel.

Nur lokal
RGB-Eingabe

Links eine Farbe eingeben. Akzeptiert werden Hexwerte mit oder ohne Raute, rgb(), hsl(), oklch() und CSS-Farbnamen.

Wie funktioniert RGB in HSL umwandeln?

Die gesamte Umwandlung hängt an zwei Zahlen: dem größten Kanal und dem kleinsten. Skalieren Sie alle drei auf 0–1, dann ist die Helligkeit die Mitte dieser beiden, und die Chroma ist ihr Abstand. Ist die Chroma null, sind die drei Kanäle gleich, die Farbe ist ein Grau, und es gibt keinen Farbton zu berechnen.

Welcher Kanal am größten ist, bestimmt den Sektor

Der Farbkreis zerfällt in sechs 60°-Sektoren. Rot als größter Kanal bringt Sie in den Sektor von Magenta bis Gelb; Grün als größter in den von Gelb bis Cyan; Blau als größter in den von Cyan bis Magenta. Wo genau Sie landen, hängt vom mittleren Kanal ab: Bei einem Rot-Maximum ist der Winkel ((G − B) / chroma) × 60, für die beiden anderen derselbe Ausdruck mit einem Versatz von 2 oder 4 Sektoren.

Dieser Ausdruck kann negativ ausfallen – wenn bei einer rotdominanten Farbe Blau größer ist als Grün. Deshalb addiert jede korrekte Implementierung 360 und nimmt den Rest. Eine Implementierung, die diesen Umlauf überspringt, liefert für rund ein Sechstel aller Farben einen negativen Farbton, und der Bug bleibt unsichtbar, bis etwas Nachgelagertes danach sortieren will.

Die Sättigung wird gegen das Mögliche gemessen

Die Sättigung ist nicht die rohe Chroma; sie ist die Chroma geteilt durch die größte Chroma, die die Helligkeit zulässt, also 1 − |2L − 1|. Dieser Nenner geht an beiden Extremen gegen null, sodass eine fast schwarze oder fast weiße Farbe mit winzigem Kanalunterschied als stark gesättigt gemeldet wird. Das ist korrekt – und es ist nicht das, was die meisten Menschen unter der Zahl verstehen.

Wofür HSL gut ist – und wofür nicht

Für Menschen ist es eine gute Schreibweise. „Gleiche Farbe, weniger gesättigt“ und „gleiche Farbe, ein bisschen dunkler“ sind in HSL Änderungen an einer Zahl und in RGB Änderungen an drei Zahlen, und ein Schieberegler für den Farbton ergibt nur in einem polaren Raum Sinn. Das ist ein echter Vorteil, und deshalb hat HSL überlebt.

Für Rechnerei ist es eine schlechte Grundlage. Seine Helligkeitsachse gewichtet die drei Kanäle gleich, das menschliche Sehen gewichtet Grün etwa zehnmal stärker als Blau – gleiche Helligkeitszahlen sehen also nicht gleich hell aus. Jede Farbrampe, Mischung oder Kontrastbeurteilung auf HSL-Basis erbt diesen Fehler. OKLCH ist dieselbe Art von Schreibweise – Winkel, Chroma, Helligkeit –, mit einer Achse, die dem entspricht, was das Auge meldet, und sie steht in der Ausgabe unten.

RGB-Kanäle

rgb(255 136 0)

Farbton, Sättigung, Helligkeit

hsl(32 100% 50%)

max = 255 (red)   → 1.000
min =   0 (blue)  → 0.000
chroma = 1.000
lightness = (1.000 + 0.000) / 2 = 50%
hue = ((0.533 − 0.000) / 1.000) × 60 = 32°

Welche Optionen und Sonderfälle unterstützt RGB in HSL umwandeln?

Technische Referenz und Optionen
ParameterTypStandardVerhalten & Sonderfälle
max, min0–1—Der größte und der kleinste der drei skalierten Kanäle. Alles andere leitet sich aus diesen beiden Werten ab.
Chromamax − min—Wie weit die Farbe von Grau entfernt ist. Null bedeutet ein Grau, und der Farbton ist dann undefiniert.
Helligkeit(max + min) / 2—Die Mitte. Beachten Sie, dass ignoriert wird, welche Kanäle das waren – genau darin liegt das perzeptive Problem von HSL.
Sättigungchroma / (1 − |2L − 1|)—Chroma relativ zum Maximum, das bei dieser Helligkeit verfügbar ist – kein absolutes Maß.
Farbton (Maximum Rot)((G − B) / C) × 60—Kann negativ sein, wenn B > G gilt; addieren Sie 360 und nehmen Sie den Rest.
Farbton (Maximum Grün)((B − R) / C + 2) × 60—Derselbe Ausdruck, um zwei Sektoren verschoben.
Farbton (Maximum Blau)((R − G) / C + 4) × 60—Um vier Sektoren verschoben.
GrauC = 0Farbton 0Wird als 0 gemeldet, nicht als das, was die Arithmetik aus drei gleichen Zahlen erzeugt.

Häufig gestellte Fragen

Wie wandelt man RGB in HSL um?

Teilen Sie jeden Kanal durch 255. Nehmen Sie den größten und den kleinsten: Die Helligkeit ist ihre Mitte, die Chroma ihre Differenz. Ist die Chroma null, ist die Farbe ein Grau, und Sie sind fertig. Sonst ist die Sättigung chroma / (1 − |2L − 1|), und der Farbton hängt davon ab, welcher Kanal am größten war: Rot ergibt ((G − B) / chroma) × 60, Grün ((B − R) / chroma + 2) × 60, Blau ((R − G) / chroma + 4) × 60. Ist das Ergebnis negativ, addieren Sie 360 und nehmen den Rest.

Warum ist mein Farbton negativ?

Weil der Rot-Maximum-Zweig Blau von Grün abzieht; ist Blau der größere der beiden, liegt das Ergebnis unter null. Die Abhilfe ist das Modulo, das jede korrekte Implementierung hat: 360 addieren und den Rest nehmen. Das betrifft rund ein Sechstel des Farbraums – die Magenta-Seite von Rot – und fällt meist nicht auf, bis etwas nach Farbton sortieren oder interpolieren will.

Was misst die Sättigung in HSL eigentlich?

Die Chroma relativ zur größten Chroma, die die Helligkeit aufnehmen kann, nicht die Chroma selbst. Deshalb meldet rgb(2 0 0) – fast schwarz – 100% Sättigung: Innerhalb dessen, was bei 0.4% Helligkeit möglich ist, ist es so farbig, wie eine Farbe nur sein kann. Ein absolutes Maß für Farbigkeit ist dagegen die Chroma von OKLCh.

Ist HSL für CSS besser als RGB?

Zum Bearbeiten von Hand oft ja: Entsättigen oder Abdunkeln ist eine Zahl statt dreier, und über einen Farbton kann man nachdenken. Für alles Generierte – eine Abstufung, einen Verlauf, einen interpolierten Zustand – ist es schlechter, als es aussieht, denn seine Helligkeit ist nicht wahrnehmungsnah, und gleichmäßig verteilte Zahlen ergeben ungleichmäßig verteilte Farben. Verwenden Sie es, wo ein Mensch es eintippt, und OKLCH, wo ein Programm es berechnet.

Geht bei der Umwandlung etwas verloren?

Mathematisch nicht – HSL und RGB beschreiben exakt dieselbe Farbmenge, und die Abbildung ist umkehrbar. Genauigkeit geht daran verloren, wie das Ergebnis geschrieben wird: Ein ganzzahliger Farbton und ein Zehntel Prozent reichen nicht, um jeden der 16.7 Millionen sRGB-Werte zu unterscheiden; zwei Farben können sich also als dasselbe HSL ausgeben. Die Werte hier tragen genug Nachkommastellen für einen Rundtrip.

Warum melden zwei sehr unterschiedliche Farben denselben Farbton?

Weil der Farbton nur die Richtung einer Farbe festhält, nicht wie viel von ihr da ist. rgb(255 0 0) und rgb(40 30 30) liegen beide bei Farbton 0 und unterscheiden sich vollständig in Sättigung und Helligkeit. Diese Trennung ist der Sinn von HSL – eine Achse für die Frage, welche Farbe es ist, zwei dafür, wie intensiv und wie hell – und deshalb kann eine fast graue Farbe trotzdem einen überzeugend aussehenden Farbton melden.

ToolsByUs-Team · Wie wir unsere Tools prüfen