HSV HSL:ksi

Muunna HSV-väriarvot HSL-muotoon monipuolista värien käsittelyä varten suunnittelujärjestelmissä

Vaihda intuitiivisten värimallien välillä parantaaksesi suunnittelun joustavuutta

Värimuunnin

HSL Output

hsl(0°, 100%, 50%)

HSL Values

Värisävy 0°

0-360° color wheel position

Kylläisyys 100%

0-100% color intensity

Keveys 50%

0-100% brightness

hsl(0°, 100%, 50%)

Lisämuodot

HSV Value

hsv(0°, 100%, 100%)

RGB Value

rgb(255, 0, 0)

CSS-käyttö

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

Konversiotiedot

Tämä eloisa punainen säilyttää täyden kylläisyyden molemmissa värimalleissa, mutta sen kirkkausmittaukset vaihtelevat, mikä osoittaa arvon (HSV) ja vaaleuden (HSL) välisen keskeisen eron.

Muunnosesimerkkejä

Eloisanpunainen

HSV 0°, 100%, 100%

HSL 0°, 100%, 50%

Ero Keveys = 50 % arvosta

Metsänvihreä

HSV 120°, 75%, 55%

HSL 120°, 60%, 35%

Ero Säädetty vaaleusasteikolle

Kuninkaallinen sininen

HSV 220°, 75%, 88%

HSL 220°, 70%, 55%

Ero Keveys tasapainotettu havainnointia varten

Pehmeä pinkki

HSV 340°, 40%, 95%

HSL 340°, 70%, 80%

Ero HSL-kielen saturaatio lisääntyi

Vaimennettu violetti

HSV 270°, 30%, 70%

HSL 270°, 30%, 60%

Ero Kirkkautta säädetty alaspäin

Harmaa sävy

HSV 0°, 0%, 50%

HSL 0°, 0%, 50%

Ero Identtinen harmaasävyille

Suositellut työkalut

HSL to HSV Converter

Muunna HSL-väriarvot takaisin HSV-muotoon vaihtoehtoista värien käsittelyä varten

Väriharmonian generaattori

Luo tasapainoisia värimaailmoja käyttämällä HSL-pohjaisia värisuhteita

HSL Color Scales

Luo minkä tahansa värin sävyjä, varjostuksia ja sävyjä HSL-säätöjen avulla

Värimallin vertailu

Visualisoi, miten värit näkyvät HSV-, HSL-, RGB- ja CMYK-malleissa

Tietoja tästä työkalusta

Tämä HSV-HSL-muunnin mahdollistaa saumattoman siirtymisen kahden intuitiivisen värimallin välillä, joilla molemmilla on omat etunsa erilaisissa suunnittelutehtävissä ja työnkuluissa.

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.

Vaikka molemmissa malleissa on yhteiset sävy- ja kylläisyyskomponentit, niiden kirkkauden käsittely (arvo vs. vaaleus) luo perustavanlaatuisesti erilaisia käyttäytymismalleja. Tämä muunnin käyttää tarkkoja matemaattisia algoritmeja näiden mallien väliseen muuntamiseen säilyttäen samalla visuaalisen yhtenäisyyden, jolloin suunnittelijat voivat hyödyntää kunkin mallin vahvuuksia koko työnkulussaan.