HSL↔HSV-Konverter

HSL und HSV sind zwei zylindrische Farbmodelle, die denselben Farbtonwinkel am Rad teilen, den zweiten und dritten Achsen aber unterschiedlich behandeln: HSL nutzt Sättigung und Helligkeit, HSV nutzt Sättigung und Wert (Helligkeit). Designer wählen Farben oft in HSL, weil die Helligkeit symmetrisch zu Schwarz und Weiß wandert; Spiel-Engines, Bildeditoren und viele Video-Pipelines sprechen dagegen HSV, weil der Wert direkter der maximalen Kanalhelligkeit entspricht. Dieser Konverter nimmt eine Richtung —HSL nach HSV oder HSV nach HSL—, den Farbton in Grad von 0 bis 360, die Sättigung als Prozent und Helligkeit oder Wert als Prozent von 0 bis 100 entgegen und liefert das umgerechnete Triplett mit beiden Modellobjekten befüllt.

Wie HSL und HSV am gleichen Farbton zusammenhängen

Der Farbton ist geteilt: 0 Grad ist reines Rot, 120 reines Grün, 240 reines Blau und 360 schließt den Kreis wieder bei Rot. Die Modelle divergieren darin, wie Lebendigkeit und Helligkeit gespeichert werden. In HSL läuft die Helligkeit von Schwarz bei 0 Prozent über einen reinen Mittelton nahe 50 Prozent bis Weiß bei 100 Prozent, und die HSL-Sättigung streckt ein Grau dieser Helligkeit zum voll chromatischen Farbton am gewählten Hue.

In HSV ist der Wert das Maximum der zugrundeliegenden RGB-Kanäle auf der Einheitsskala, sodass 100 Prozent Wert die hellste Farbe dieses Farbtons und dieser Sättigung ist und 0 Prozent Wert unabhängig von der Sättigung immer Schwarz ist. Weil die Geometrien abweichen, ist die numerische Sättigung in HSL für die meisten Farben nicht dieselbe Zahl wie die numerische Sättigung in HSV, selbst wenn die wahrgenommene Farbe nach der Umrechnung übereinstimmt.

Der hier genutzte geschlossen-formale Pfad arbeitet auf dem Einheitsintervall: für HSL nach HSV gilt Wert gleich Helligkeit plus HSL-Sättigung mal Minimum aus Helligkeit und eins minus Helligkeit, und die HSV-Sättigung ist 0 wenn der Wert 0 ist, sonst zweimal eins minus Helligkeit geteilt durch den Wert. Für HSV nach HSL gilt Helligkeit gleich Wert mal eins minus der Hälfte der HSV-Sättigung, und die HSL-Sättigung ist 0 bei Schwarz oder Weiß, sonst die Lücke 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 0 bis 360 liegen; Sättigung, Helligkeit und Wert müssen jeweils zwischen 0 und 100 Prozent einschließlich liegen.

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

Designsysteme erstellen Markenrampen oft in HSL, damit Produktteams die Helligkeit für zugänglichen Kontrast stufen können und dabei Farbton sowie ein perzeptuelles Sättigungsband stabil halten; native mobile Themes, Unity- und Unreal-Materialwähler sowie viele Grafikbibliotheken erwarten jedoch HSV oder HSB für künstlerorientierte Helligkeitsregler. Datenvisualisierungs- und generative Kunstwerkzeuge mit Farbtonrad und Wertregler brauchen eine zuverlässige Inverse beim Export von als HSL-Custom-Properties gespeicherten Tokens. Video- und Broadcast-Pipelines, die Farben in HSV für die Kameragradierung dokumentieren, brauchen weiterhin HSL beim Speisen von CSS und Designdokumentation.

Curricula und Bootcamps lehren zylindrische Modelle nebeneinander und brauchen ein einziges vertrauenswürdiges Orakel für Hausaufgaben-Schlüssel, die mit Lehrbuchidentitäten übereinstimmen. Barrierefreiheits-Workflows, die wahrgenommene Helligkeit in HSL anpassen und dann an einen HSV-basierten Editor übergeben, brauchen weiterhin exakte Kanalzuordnung ohne browser-only APIs. Wenn Sie später HSL nach RGB, Multi-Format-HEX-LAB-CMYK-Konvertierung oder WCAG-Kontrastprüfungen brauchen, behandeln Sie diese als getrennte Suchabsichten und Landings statt diese dedizierte HSL-zu-HSV-Konverterseite zu überladen.