PantoneVerktøy

HSV til HSL

Konverter HSV-fargeverdier til HSL for allsidig fargemanipulering i designsystemer

Veksle mellom intuitive fargemodeller for forbedret designfleksibilitet

Fargekonverterer

HSV Input

180° 360°
100%
0% 50% 100%
100%
0% 50% 100%

Klikk på fargeprøver for eksempler

HSL Output

hsl(0°, 100%, 50%)

HSL Values

Fargetone

0-360° color wheel position

Metning 100%

0-100% color intensity

Letthet 50%

0-100% brightness

hsl(0°, 100%, 50%)

Ytterligere formater

HSV Value

hsv(0°, 100%, 100%)

RGB Value

rgb(255, 0, 0)

CSS-bruk

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

Konverteringsinnsikt

Denne livlige rødfargen opprettholder full metning i begge fargemodellene, men viser forskjellige lysstyrkemålinger, noe som demonstrerer den viktigste forskjellen mellom verdi (HSV) og lyshet (HSL).

Eksempler på konverteringer

Livlig rød

HSV 0°, 100%, 100%
HSL 0°, 100%, 50%
Forskjell Letthet = 50 % av verdien

Skoggrønn

HSV 120°, 75%, 55%
HSL 120°, 60%, 35%
Forskjell Justert for lysstyrkeskala

Kongeblå

HSV 220°, 75%, 88%
HSL 220°, 70%, 55%
Forskjell Letthet balansert for persepsjon

Myk rosa

HSV 340°, 40%, 95%
HSL 340°, 70%, 80%
Forskjell Metningen økte i HSL

Dempet lilla

HSV 270°, 30%, 70%
HSL 270°, 30%, 60%
Forskjell Lysstyrke justert nedover

Gråtone

HSV 0°, 0%, 50%
HSL 0°, 0%, 50%
Forskjell Identisk for gråtoner

Anbefalte verktøy

Om dette verktøyet

Denne HSV-til-HSL-konvertereren muliggjør sømløs overgang mellom to intuitive fargemodeller, hver med distinkte fordeler for ulike designoppgaver og arbeidsflyter.

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.

Selv om begge modellene deler fargetone- og metningskomponenter, skaper behandlingen av lysstyrke (verdi vs. lyshet) fundamentalt forskjellig oppførsel. Denne konverteren bruker presise matematiske algoritmer for å oversette mellom disse modellene samtidig som den bevarer visuell konsistens, slik at designere kan utnytte styrkene til hver modell gjennom hele arbeidsflyten.

Ofte stilte spørsmål