HSV zu HSL

Konvertieren Sie HSV-Farbwerte in HSL für eine vielseitige Farbmanipulation in Designsystemen

Wechseln Sie zwischen intuitiven Farbmodellen für mehr Designflexibilität

Farbkonverter

HSL Output

hsl(0°, 100%, 50%)

HSL Values

Farbton 0°

0-360° color wheel position

Sättigung 100%

0-100% color intensity

Leichtigkeit 50%

0-100% brightness

hsl(0°, 100%, 50%)

Zusätzliche Formate

HSV Value

hsv(0°, 100%, 100%)

RGB Value

rgb(255, 0, 0)

CSS-Nutzung

color: hsl(0°, 100%, 50%);
background-color: hsl(0°, 100%, 50%);

Conversion-Einblick

Dieses leuchtende Rot behält in beiden Farbmodellen die volle Sättigung, weist jedoch unterschiedliche Helligkeitsmessungen auf, was den Hauptunterschied zwischen Value (HSV) und Lightness (HSL) verdeutlicht.

Konvertierungsbeispiele

Leuchtendes Rot

HSV 0°, 100%, 100%

HSL 0°, 100%, 50%

Unterschied Helligkeit = 50 % des Wertes

Waldgrün

HSV 120°, 75%, 55%

HSL 120°, 60%, 35%

Unterschied Angepasst an die Helligkeitsskala

Königsblau

HSV 220°, 75%, 88%

HSL 220°, 70%, 55%

Unterschied Ausgewogene Helligkeit für die Wahrnehmung

Zartes Rosa

HSV 340°, 40%, 95%

HSL 340°, 70%, 80%

Unterschied Sättigung in HSL erhöht

Gedämpftes Lila

HSV 270°, 30%, 70%

HSL 270°, 30%, 60%

Unterschied Helligkeit nach unten angepasst

Grauton

HSV 0°, 0%, 50%

HSL 0°, 0%, 50%

Unterschied Identisch für Graustufen

Empfohlene Werkzeuge

HSL to HSV Converter

Konvertieren Sie HSL-Farbwerte zurück in HSV für eine alternative Farbmanipulation

Farbharmonie-Generator

Erstellen Sie ausgewogene Farbschemata mithilfe von HSL-basierten Farbbeziehungen

HSL Color Scales

Erzeugen Sie Farbtöne, Schattierungen und Töne beliebiger Farben mithilfe von HSL-Anpassungen

Farbmodell-Komparator

Visualisieren Sie, wie Farben in HSV-, HSL-, RGB- und CMYK-Modellen erscheinen

Über dieses Tool

Dieser HSV-zu-HSL-Konverter ermöglicht einen nahtlosen Übergang zwischen zwei intuitiven Farbmodellen, die jeweils unterschiedliche Vorteile für unterschiedliche Designaufgaben und Arbeitsabläufe bieten.

HSV (Hue, Saturation, Value) represents colors based on human perception, with Value controlling the brightness from black to full color. This makes it particularly intuitive for tasks like adjusting lightness while preserving chromatic intensity, common in interface design.

HSL (Hue, Saturation, Lightness) structures color around perceived lightness, with Lightness ranging from black through the pure color to white. This model excels at creating consistent color scales and harmonies, as equal increments in lightness produce perceptually consistent steps.

Beide Modelle nutzen zwar Farbton- und Sättigungskomponenten, doch die Helligkeitsbehandlung (Wert vs. Helligkeit) führt zu grundlegend unterschiedlichem Verhalten. Dieser Konverter verwendet präzise mathematische Algorithmen, um zwischen diesen Modellen zu übersetzen und gleichzeitig die visuelle Konsistenz zu wahren. So können Designer die Stärken jedes Modells in ihrem gesamten Arbeitsablauf nutzen.