HSV-zu-HSL-Konverter

HSV und HSL sind zwei zylindrische Farbmodelle, die denselben Farbtonwinkel auf dem Rad teilen, Helligkeit und Lebendigkeit aber auf unterschiedlichen Achsen speichern. Spiel-Engines, Videowerkzeuge und viele native Auswahlwerkzeuge sprechen HSV, wo der Wert die maximale Kanalhelligkeit ist, während CSS-Custom-Properties, Designsysteme und Barrierefreiheitsrampen oft HSL bevorzugen, weil die Helligkeit symmetrisch zu Schwarz und Weiß wandert. Dieser HSV-zu-HSL-Konverter nimmt den Farbton in Grad von null bis dreihundertsechzig, die Sättigung als Prozentwert und den Wert als Prozentwert von null bis einhundert entgegen und mappt Sättigung und Wert auf HSL-Sättigung und -Helligkeit, während der Farbton unverändert kopiert wird.

Zwei Farbmodelle mit demselben Farbton

HSV und HSL beschreiben Farben als Farbton auf einem Kreis, speichern Helligkeit und Farbintensität aber unterschiedlich. In HSV ist der Hellwert die Helligkeit des stärksten RGB-Kanals: 100 % ist die hellste Version eines Farbtons, 0 % ist immer Schwarz. In HSL läuft die Helligkeit von Schwarz bei 0 % über den reinen Mittelton bei 50 % bis Weiß bei 100 %. Spiele-Engines, Videowerkzeuge und viele Farbwähler arbeiten mit HSV, während CSS, Designsysteme und abgestufte Paletten für Barrierefreiheit oft HSL bevorzugen. Der Rechner übernimmt den Farbton unverändert und rechnet nur Sättigung und Hellwert in Sättigung und Helligkeit um.

Wie umgerechnet wird und typische Fehler

Die Helligkeit ergibt sich aus dem Hellwert mal eins minus der halben HSV-Sättigung. Aus HSV 210, 70 % und 80 % wird so eine HSL-Helligkeit von 52 % bei gleichem Farbton 210, während die Sättigung unter die ursprünglichen 70 % fällt. Bei Schwarz oder reinem Weiß ist die HSL-Sättigung 0. Der häufigste Fehler ist, die Sättigungszahl einfach zu übernehmen: Beide Modelle messen sie anders, daher stimmen die Zahlen fast nie überein, obwohl die Farbe gleich bleibt. Werte außerhalb der erlaubten Bereiche werden abgelehnt, statt still beschnitten zu werden.

Wie HSV bei gleichem Farbton auf HSL abbildet

Der Farbton ist beiden Modellen gemeinsam: null Grad ist reines Rot, einhundertzwanzig reines Grün, zweihundertvierzig reines Blau, und dreihundertsechzig schließt den Kreis wieder bei Rot. Die Modelle unterscheiden sich darin, wie Lebendigkeit und Helligkeit gespeichert werden. In HSV ist der Wert das Maximum der zugrunde liegenden RGB-Kanäle auf der Einheitsskala, sodass einhundert Prozent Wert die hellste Farbe dieses Farbtons und dieser Sättigung ist und null Prozent Wert unabhängig von der Sättigung immer Schwarz ist.

Die HSV-Sättigung dehnt ein Grau dieses Werts zur voll chromatischen Farbe am gewählten Farbton. In HSL läuft die Helligkeit von Schwarz bei null Prozent über einen reinen Mittelton nahe fünfzig Prozent bis Weiß bei einhundert Prozent, und die HSL-Sättigung dehnt ein Grau dieser Helligkeit zur vollen Chroma. Weil die Geometrien abweichen, ist die numerische Sättigung in HSV für die meisten Farben nicht dieselbe Zahl wie die numerische Sättigung in HSL, auch wenn die wahrgenommene Farbe nach der Umrechnung übereinstimmt.

Der hier genutzte geschlossene Pfad arbeitet auf dem Einheitsintervall: die Helligkeit ist der Wert mal eins minus der Hälfte der HSV-Sättigung, und die HSL-Sättigung ist null bei Schwarz oder Weiß; sonst die Differenz zwischen Wert und Helligkeit geteilt durch das Minimum aus Helligkeit und eins minus Helligkeit. Der Farbton wird unverändert kopiert. Der Farbton muss im geschlossenen Intervall von null bis dreihundertsechzig liegen; Sättigung und Wert müssen jeweils zwischen null und einhundert Prozent inklusive liegen.

Wo HSV-zu-HSL-Umrechnung in der Praxis vorkommt

Native Mobile-Themes, Unity- und Unreal-Materialwähler und viele Grafikbibliotheken bieten wertbasierte Helligkeitsregler; Designsysteme dokumentieren Markenrampen jedoch oft in HSL, damit Produktteams die Helligkeit für zugänglichen Kontrast stufen und Farbton sowie ein perzeptuelles Sättigungsband stabil halten können. Datenvisualisierungs- und generative-Kunst-Werkzeuge, die Künstlerproben als HSV speichern, brauchen einen zuverlässigen Pfad beim Export von Tokens als HSL-Custom-Properties fürs Web. Video- und Broadcast-Pipelines, die Farben in HSV für die Kamerakorrektur dokumentieren, brauchen weiterhin HSL, wenn sie CSS und Designdokumentation speisen.

Lehrpläne und Bootcamps unterrichten zylindrische Modelle nebeneinander und brauchen ein einziges vertrauenswürdiges Orakel für Hausaufgaben-Schlüssel, die mit Lehrbuch-Identitäten übereinstimmen. Barrierefreiheits-Workflows, die HSV aus einem Bildeditor empfangen und dann die wahrgenommene Helligkeit in HSL anpassen, brauchen weiterhin exakte Kanalzuordnung ohne browser-only APIs. Wenn Sie später den umgekehrten HSL-zu-HSV-Pfad, HSV zu RGB, Multi-Format-HEX-LAB-CMYK-Umrechnung oder WCAG-Kontrastprüfungen brauchen, behandeln Sie diese als getrennte Suchintentionen und Landings statt diese dedizierte HSV-zu-HSL-Konverterseite zu überladen.