RGB in HSL umrechnen

Was dir HSL verrät und RGB nicht

Ein RGB-Wert ist ein Hardware-Rezept: wie stark die roten, grünen und blauen Subpixel eines Displays angesteuert werden, jeweils auf einer Skala von 0–255. Bildschirme brauchen genau das, Menschen lesen es aber schlecht – niemand sieht rgb(53, 100, 196) und weiß sofort, ob das ein Jeansblau, ein Kobalt oder ein Marineblau ist, geschweige denn, wie er es „ein bisschen heller“ macht, ohne es zu ruinieren.

HSL ordnet dieselbe Information in drei menschenfreundliche Regler um: Farbton (der Winkel auf einem Farbkreis von 0–360°), Sättigung (Abstand vom Grau, 0–100 %) und Helligkeit (Position zwischen Schwarz bei 0 % und Weiß bei 100 %). Bei diesem Umzug geht nichts verloren und nichts kommt hinzu – HSL ist derselbe sRGB-Würfel, nur in Zylinderkoordinaten beschrieben. Jeder rgb()-Wert hat deshalb genau eine HSL-Schreibweise und umgekehrt.

Der Algorithmus aus max, min und Buntheit, Schritt für Schritt

Jede Umrechnung von RGB in HSL folgt denselben fünf Schritten:

• Normalisieren. Teile jeden Kanal durch 255, damit R′, G′ und B′ zwischen 0 und 1 liegen.
• Extremwerte bestimmen. max ist der stärkste Kanal, min der schwächste, und ihr Abstand Δ = max − min ist die Buntheit (Chroma) – ein direktes Maß dafür, wie farbig der Wert ist.
• Helligkeit. L = (max + min) ÷ 2. Beachte: Gemittelt werden nur die beiden Extremwerte; der mittlere Kanal hat kein Mitspracherecht.
• Sättigung. Ist Δ = 0, ist die Farbe unbunt und S = 0. Andernfalls gilt S = Δ ÷ (1 − |2L − 1|): Der Nenner ist die größtmögliche Buntheit bei dieser Helligkeit, S drückt die Buntheit also als Anteil des Erreichbaren aus. Für L ≤ 50 % vereinfacht sich das zu Δ ÷ (max + min).
• Farbton. Der Gewinnerkanal bestimmt den Sektor: Ist max gleich R′, gilt H = 60° × ((G′ − B′) ÷ Δ); ist max gleich G′, gilt H = 60° × ((B′ − R′) ÷ Δ + 2); ist max gleich B′, gilt H = 60° × ((R′ − G′) ÷ Δ + 4). Ein negatives Ergebnis wird durch Addition von 360° umgeschlagen.

Durchgerechnetes Beispiel: rgb(53, 100, 196)

Hier die vollständige Rechnung für die Beispielfarbe dieser Seite. Da jeder Schritt ein Verhältnis ist, kürzt sich das ÷255 überall dort heraus, wo Kanäle verglichen werden – die Brüche bleiben damit exakt:

• Normalisieren: R′ = 53 ÷ 255 ≈ 0.2078, G′ = 100 ÷ 255 ≈ 0.3922, B′ = 196 ÷ 255 ≈ 0.7686.
• Extremwerte: max = B′ ≈ 0.7686, min = R′ ≈ 0.2078, also Δ = 143 ÷ 255 ≈ 0.5608.
• Helligkeit: L = (0.7686 + 0.2078) ÷ 2 ≈ 0.4882 → 48.8%.
• Sättigung: L liegt unter der Hälfte, also S = 143 ÷ (196 + 53) = 143 ÷ 249 ≈ 0.5743 → 57.4%.
• Farbton: Blau ist das Maximum, also H = 60 × ((53 − 100) ÷ 143 + 4) = 60 × 3.6713 ≈ 220.3° (exakt 220.2797…°).

Ergebnis: hsl(220.3, 57.4%, 48.8%) – ein mittelhelles, solide gesättigtes Blau zwischen Azur (210°) und reinem Blau (240°). Schickst du diese gerundeten HSL-Zahlen durch die Umkehrformel zurück, taucht nach dem Runden auf ganze Kanäle wieder rgb(53, 100, 196) auf.

Häufige Umrechnungen von RGB in HSL

Ein paar Fixpunkte lohnen sich zu merken – volle Grundfarben liegen bei 50 % Helligkeit und 100 % Sättigung, und Grautöne melden immer 0 % Sättigung:

Wann HSL im echten Code besser ist als RGB

Jede Änderung, die im Design mit Worten wie heller, weicher oder wärmer beschrieben wird, ist in HSL eine Änderung an einer einzigen Zahl – in RGB dagegen ein Balanceakt über drei Kanäle. Typische Fälle, in denen HSL gewinnt:

• Hover- und Klick-Zustände – H und S beibehalten, L um 8–10 Punkte verschieben: hsl(220, 57%, 49%) dunkelt so zu hsl(220, 57%, 39%) ab und liest sich immer noch als dasselbe Markenblau.
• Farbskalen für Design-Tokens – erzeuge die Stufen 100–900 einer Farbpalette, indem du den Farbton festhältst und die Helligkeit in gleichmäßigen Schritten weiterschaltest.
• Abgeschwächte und deaktivierte Zustände – zieh S Richtung 0, um ein Element auszugrauen, ohne dass sein Farbton wegdriftet.
• Farben für Diagrammreihen – rotiere H in gleich großen Schritten und halte S und L fest, damit sich Kategorien im Farbton unterscheiden, aber gleich viel visuelles Gewicht tragen.
• Stylesheets, die sich gut reviewen lassen – hsl(220, 57%, 49%) sagt auf einen Blick „mittleres Blau“; das entsprechende rgb() sagt gar nichts.

Eine ehrliche Einschränkung: HSL ist nicht wahrnehmungsgleichmäßig. Ein Helligkeitsschritt von zehn Punkten wirkt bei Gelbtönen größer als bei Blautönen, und ein Gelb mit 50 % Helligkeit erscheint dem Auge weit heller als ein Blau mit 50 % Helligkeit. Wenn es auf Gleichmäßigkeit ankommt – barrierefreie Farbskalen, das Messen von Farbabständen –, greif zu OKLCH; für schnelle programmatische Anpassungen bleibt HSL der pragmatische Standard.

Sonderfälle: Grau, Winkelumbruch und Rundung

• Grautöne melden Farbton 0 und Sättigung 0 %. Bei R = G = B ist Δ gleich 0, es gibt keine dominante Wellenlänge, und der Farbton ist mathematisch undefiniert; dass Konverter 0° ausgeben, ist reine Konvention. hsl(0, 0%, 50.2%) und hsl(137, 0%, 50.2%) malen exakt dasselbe Pixel.
• Schwarz und Weiß sind der Extremfall. Bei L = 0 % oder 100 % wird der Nenner der Sättigung, 1 − |2L − 1|, zu 0; das entstehende 0 ÷ 0 wird als S = 0 definiert, statt die Rechnung entgleisen zu lassen.
• Der Farbton lebt auf einem Kreis.rgb(255, 0, 1) ergibt 359.8°, einen Schritt vor dem 0° von Rot – behandle 0° und 360° als dieselbe Richtung und wundere dich bei rötlichen Farben nicht über Farbtöne knapp unter 360.
• Rundung erklärt, warum Tools sich widersprechen. Der exakte Farbton oben ist 220.2797…°; dieser Konverter gibt eine Nachkommastelle aus (220.3), andere schneiden auf 220 ab. Der Unterschied ist unsichtbar, aber genau deshalb können zwei Konverter bei derselben Eingabe unterschiedliche letzte Stellen zeigen.

Jede Berechnung auf dieser Seite passiert lokal – die Mathematik läuft zu 100 % in deinem Browser, und die Werte, die du einfügst, werden nirgendwohin übertragen. Für die Gegenrichtung geht der Konverter HSL zu RGB die Rekonstruktionsformel mit derselben Gründlichkeit durch, und der universelle Farbkonverter liefert zur identischen Eingabe zusätzlich Lab-, LCH- und OKLCH-Werte.