Töötab täielikult sinu brauseris - midagi ei laadita üles, kontot pole vaja.

Kuidas teisendada HEX HSL-iks?

Kõigepealt loe hex-koodi punase, rohelise ja sinise väärtusena (0-255), seejärel kirjelda sama värvi toonina, küllastusena ja heledusena. Toon on nurk värviratta peal (0-360), küllastus näitab, kui erk värv on (0-100%), ja heledus, kui hele see on (0-100%). #3366cc muutub väärtuseks hsl(220, 60%, 50%). See tööriist teeb seda kohe, kui sa kirjutad.

Kuidas kasutada

1Sisesta hex-kood. Kirjuta või kleebi hex-värv, näiteks #3366cc (või #36c), või vali see värvivalijaga. Märk # ei ole kohustuslik.

2Loe HSL väärtust. hsl() väärtus, puhtad väärtused ja otsene värvieelvaade uuenevad kirjutamise ajal, koos kanalipõhise lahtiseletusega tooni, küllastuse ja heleduse kohta.

3Kopeeri vajalik vorming. Klõpsa Kopeeri hsl() väärtuse või toorväärtuste kõrval. Vaja vastupidist suunda? Sisesta allpool toon, küllastus ja heledus, et saada hex-kood tagasi.

Kellele see sobib

Front-end arendajad, kes teisendavad hex-koodi hsl()-iks, et hover- ja focus-olekute jaoks heledust muuta ilma täiesti uut värvi valimata.

Paletti loovad disainerid, kes hoiavad tooni fikseerituna ning muudavad küllastust ja heledust, et saada ühest brändivärvist erinevaid toone ja varjundeid.

Teema- ja disainitokenite autorid, kes salvestavad värve HSL-ina, sest seda on käsitsi palju lihtsam lugeda ja kohandada kui hex-stringi.

Igaüks, kes ühtlustab värve tööriistade vahel, kus üks eeldab hex-vormingut (Figma, enamik CSS-i) ja teine HSL-i (SCSS-i abifunktsioonid, mõned värvisüsteemid).

Teisendaja aktsepteerib kõiki CSS-i hex-vorme: 6-kohaline #3366cc, 3-kohaline lühivorm #36c, ning 4- ja 8-kohaline vorm alfakanaliga, kas märgiga # või ilma. See näitab hsl() või hsla() väärtust, puhtaid väärtusi ja kanalipõhist lahtiseletust - ning vastupidist HSL to HEX rida, kui vajad teisendust vastupidises suunas. Kõik toimub sinu brauseris - ilma üleslaadimise, konto ja piiranguteta.

Korduvad küsimused

Kas see HEX to HSL teisendaja on tasuta?

Jah - see on täiesti tasuta, registreerimiseta ja piiranguteta. See töötab täielikult sinu brauseris.

Kas mu värvid saadetakse kuhugi?

Ei. Teisendus on tavaline JavaScript, mis töötab sinu seadmes - midagi ei saadeta serverisse ning tööriist töötab ka võrguühenduseta pärast lehe laadimist.

Mis on HSL?

HSL tähendab toon (hue), küllastus (saturation) ja heledus (lightness). Toon on nurk 0 kuni 360 kraadi värviratta peal, küllastus näitab, kui erk värv on vahemikus 0 kuni 100 protsenti, ja heledus ulatub 0 protsendist (must) läbi puhta värvi 50 protsendi juures kuni 100 protsendini (valge).

Kuidas teisendada hex HSL-iks käsitsi?

Teisenda hex punaseks, roheliseks ja siniseks ning jaga kõik kolm 255-ga. Võta kolmest suurim ja väikseim väärtus: heledus on nende keskmine, küllastus on (suurim - väikseim) jagatud (1 - |2L - 1|)-ga ning toon tuleb sellest, milline kanal on suurim, skaleerituna 0-360 kraadini.

Kas see toetab 3-kohalist lühivormi, näiteks #36c?

Jah. CSS-i lühivormis dubleeritakse iga number, seega #36c laieneb kujule #3366cc ja teisendub väärtuseks hsl(220, 60%, 50%). 4-kohaline vorm töötab samamoodi, kusjuures viimane number on alfaväärtus.

Kuidas see käsitleb läbipaistvust (HSLA)?

8-kohaline hex-kood kannab alfaväärtust oma viimases paaris. See bait (0-255) jagatakse 255-ga, et saada hsla() nõutav väärtus vahemikus 0-1, ümardatuna kolme kohani pärast koma - nii saab #3366cc80 väärtuseks hsla(220, 60%, 50%, 0.502).

Kas see suudab teisendada HSL tagasi HEX-iks?

Jah. Kasuta tulemuse all olevat HSL to HEX rida: sisesta toon (0-360) ning küllastus ja heledus (0-100%) ja saad kohe hex-koodi. Vahemikust välja jäävad väärtused piiratakse õigesse vahemikku.

Miks on HSL hex-koodist kasulikum?

HSL on inimloetav: värvi saab heledamaks muuta L-i suurendades, tuhmimaks S-i vähendades või selle värvitooni muuta H-i muutes - ilma hex-numbreid arvamata. See sobib suurepäraselt ühtsete palettide, hover-olekute ja disainitokenite loomiseks.