HSV till HSL

Konvertera HSV-färgvärden till HSL för mångsidig färgmanipulation i designsystem

Växla mellan intuitiva färgmodeller för ökad designflexibilitet

Färgkonverterare

HSL Output

hsl(0°, 100%, 50%)

HSL Values

Nyans 0°

0-360° color wheel position

Mättnad 100%

0-100% color intensity

Lätthet 50%

0-100% brightness

hsl(0°, 100%, 50%)

Ytterligare format

HSV Value

hsv(0°, 100%, 100%)

RGB Value

rgb(255, 0, 0)

CSS-användning

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

Konverteringsinsikt

Denna livfulla röda färg bibehåller full mättnad i båda färgmodellerna men visar olika ljusstyrkemätningar, vilket demonstrerar den viktigaste skillnaden mellan värde (HSV) och ljushet (HSL).

Konverteringsexempel

Livfull röd

HSV 0°, 100%, 100%

HSL 0°, 100%, 50%

Skillnad Lätthet = 50 % av värdet

Skogsgrön

HSV 120°, 75%, 55%

HSL 120°, 60%, 35%

Skillnad Justerad för ljusstyrka

Kunglig blå

HSV 220°, 75%, 88%

HSL 220°, 70%, 55%

Skillnad Lätthet balanserad för uppfattning

Mjukt rosa

HSV 340°, 40%, 95%

HSL 340°, 70%, 80%

Skillnad Mättnaden ökade i HSL

Dämpad lila

HSV 270°, 30%, 70%

HSL 270°, 30%, 60%

Skillnad Ljusstyrka justerad nedåt

Grå ton

HSV 0°, 0%, 50%

HSL 0°, 0%, 50%

Skillnad Identisk för gråskala

Rekommenderade verktyg

HSL to HSV Converter

Konvertera HSL-färgvärden tillbaka till HSV för alternativ färgmanipulation

Färgharmonigenerator

Skapa balanserade färgscheman med hjälp av HSL-baserade färgrelationer

HSL Color Scales

Generera nyanser, nyanser och toner av valfri färg med hjälp av HSL-justeringar

Färgmodelljämförare

Visualisera hur färger visas i HSV-, HSL-, RGB- och CMYK-modeller

Om det här verktyget

Denna HSV till HSL-konverterare möjliggör en sömlös övergång mellan två intuitiva färgmodeller, var och en med distinkta fördelar för olika designuppgifter och arbetsflöden.

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.

Även om båda modellerna delar nyans- och mättnadskomponenter, skapar deras behandling av ljusstyrka (värde kontra ljusstyrka) fundamentalt olika beteenden. Denna konverterare använder exakta matematiska algoritmer för att översätta mellan dessa modeller samtidigt som den bevarar visuell konsistens, vilket gör det möjligt för designers att utnyttja styrkorna hos varje modell genom hela sitt arbetsflöde.