Hogyan alakítsunk át HEX kódot HSL-re?

Először a hex kódot piros, zöld és kék összetevőre bontjuk (0-255), majd ugyanazt a színt átírjuk árnyalatra, telítettségre és fényességre. Az árnyalat a színkörön mért szög (0-360), a telítettség azt mutatja, milyen élénk a szín (0-100%), a fényesség pedig azt, mennyire világos (0-100%). A #3366cc így hsl(220, 60%, 50%) lesz. Az eszköz ezt gépelés közben azonnal kiszámolja.

Így működik

1Add meg a hex kódot. Írj be vagy illessz be egy hex színt, például #3366cc-t (vagy #36c-t), vagy válassz egyet a színmintával. A # jel elhagyható.

2Olvasd le a HSL értéket. A hsl() string, a nyers értékek és az élő színelőnézet gépelés közben frissül, az árnyalat, telítettség és fényesség szerinti bontással együtt.

3Másold ki a szükséges formátumot. Kattints a Másolás gombra a hsl() string vagy a nyers értékek mellett. Fordítva kellene? Add meg lent az árnyalatot, telítettséget és fényességet, és visszakapod a hex kódot.

Kinek hasznos

Frontend fejlesztők, akik egy hex kódot alakítanak át hsl()-re, hogy hover és fókusz állapotokhoz finomítsák a fényességet anélkül, hogy teljesen új színt kellene választaniuk.

Palettát építő tervezők, akik rögzített árnyalat mellett lépkednek a telítettséggel és fényességgel, hogy egyetlen márkaszínből árnyalatokat és tónusokat hozzanak létre.

Témák és design tokenek szerzői, akik HSL-ben tárolják a színeket, mert kézzel sokkal könnyebb olvasni és módosítani, mint egy hex stringet.

Bárki, aki színeket egyeztet olyan eszközök között, ahol az egyik hexet vár (Figma, a legtöbb CSS), a másik pedig HSL-t (SCSS segédfüggvények, egyes színrendszerek).

Az átalakító minden CSS hex formátumot elfogad: a 6 jegyű #3366cc-t, a 3 jegyű rövidített #36c alakot, valamint a 4 és 8 jegyű, alfacsatornát is tartalmazó verziókat, kettőskereszttel (#) vagy anélkül. Megjeleníti a hsl() vagy hsla() stringet, a nyers értékeket és egy összetevőnkénti bontást - illetve egy fordított HSL-HEX sort is, ha a másik irányba szeretnél haladni. Minden a böngésződben fut - nincs feltöltés, nincs regisztráció, nincs korlát.

Gyakori kérdések

Ingyenes ez a HEX HSL átalakító?

Igen - 100%-ban ingyenes, regisztráció és korlátozás nélkül. Teljesen a böngésződben fut.

Feltöltődnek valahova a színeim?

Nem. Az átalakítást sima JavaScript végzi a saját eszközödön - semmi nem kerül szerverre, és az oldal betöltése után offline is működik tovább.

Mi az a HSL?

A HSL az árnyalat (hue), telítettség (saturation) és fényesség (lightness) rövidítése. Az árnyalat egy 0 és 360 fok közötti szög a színkörön, a telítettség 0-tól 100 százalékig mutatja, mennyire élénk a szín, a fényesség pedig 0 százaléktól (fekete) az 50 százalékos tiszta színen át 100 százalékig (fehér) tart.

Hogyan alakítsunk át hex kódot HSL-re kézzel?

A hex kódot bontsd piros, zöld és kék összetevőre, majd mindegyiket oszd el 255-tel. A három érték közül vedd a maximumot és a minimumot: a fényesség ezek átlaga, a telítettség (max - min) osztva (1 - |2L - 1|)-gyel, az árnyalatot pedig az adja meg, melyik csatorna a legnagyobb, 0-360 fokra átszámítva.

Támogatja a 3 jegyű rövidített alakot, például a #36c-t?

Igen. A CSS rövidített formátumban minden számjegy megduplázódik, így a #36c #3366cc-re bővül, ami hsl(220, 60%, 50%)-re alakul. A 4 jegyű forma ugyanígy működik, az utolsó számjegy pedig az alfát adja.

Hogyan kezeli az átlátszóságot (HSLA)?

A 8 jegyű hex kód az utolsó két karakterben hordozza az alfa értéket. Ezt a bájtot (0-255) elosztjuk 255-tel, így megkapjuk a hsla() által várt 0-1 közötti alfaértéket, három tizedesjegyre kerekítve - így a #3366cc80-ból hsla(220, 60%, 50%, 0.502) lesz.

Vissza tudja alakítani a HSL-t HEX-re?

Igen. Használd az eredmény alatti HSL-HEX sort: add meg az árnyalatot (0-360), valamint a telítettséget és fényességet (0-100%), és azonnal megkapod a hex kódot. A tartományon kívüli értékeket a program érvényes határok közé szorítja.

Miért hasznosabb a HSL, mint a hex?

A HSL emberi szemmel is olvasható: egy színt az L emelésével világosíthatsz, az S csökkentésével tompíthatsz, vagy a H módosításával válthatsz másik színcsaládra - mindezt hex számjegyek találgatása nélkül. Emiatt ideális egységes paletták, hover állapotok és design tokenek kialakításához.