Kaip konvertuoti HEX į HSL?

Pirmiausia hex kodas išskaidomas į raudoną, žalią ir mėlyną spalvas (0-255), o tada ta pati spalva užrašoma per atspalvį, sodrumą ir šviesumą. Atspalvis - tai kampas spalvų rate (0-360), sodrumas rodo, kokia ryški spalva (0-100 %), o šviesumas - kokia šviesi ji atrodo (0-100 %). #3366cc virsta hsl(220, 60%, 50%). Šis įrankis viską perskaičiuoja iškart, kol rašai.

Kaip naudotis

1Įvesk hex kodą. Įrašyk arba įklijuok hex spalvą, pvz. #3366cc (arba #36c), arba pasirink ją spalvų pasirinkiklyje. Simbolis # nebūtinas.

2Perskaityk HSL reikšmę. hsl() eilutė, atskiros reikšmės ir gyva spalvos peržiūra atsinaujina iškart, kol rašai, kartu su atspalvio, sodrumo ir šviesumo paaiškinimu.

3Nukopijuok reikiamą formatą. Paspausk Kopijuoti šalia hsl() eilutės arba atskirų reikšmių. Reikia atvirkštinio veiksmo? Įvesk atspalvį, sodrumą ir šviesumą žemiau, kad gautum hex kodą atgal.

Kam pravers

Front-end kūrėjai, verčiantys hex kodą į hsl(), kad galėtų koreguoti šviesumą užvedimo ar fokuso būsenoms, nerinkdami visai naujos spalvos.

Dizaineriai, kuriantys spalvų paletes, kurie palieka tą patį atspalvį, o keičia tik sodrumą ir šviesumą, taip iš vienos prekės ženklo spalvos gaudami šviesesnius ir tamsesnius tonus.

Temų ir dizaino žetonų autoriai, kurie spalvas saugo HSL formatu, nes jį daug lengviau skaityti ir koreguoti ranka nei hex eilutę.

Visi, kurie derina spalvas tarp įrankių, kai vienas laukia hex (Figma, dauguma CSS), o kitas - HSL (SCSS pagalbinės funkcijos, kai kurios spalvų sistemos).

Konverteris atpažįsta visus CSS hex formatus: 6 ženklų #3366cc, sutrumpintą 3 ženklų #36c, taip pat 4 ir 8 ženklų formatus su alfa kanalu, su # ar be jo. Jis parodo hsl() arba hsla() eilutę, atskiras reikšmes ir kiekvienos dedamosios paaiškinimą - o jei reikia atvirkščiai, apačioje rasi HSL į HEX eilutę. Viskas vyksta tavo naršyklėje - jokio kėlimo į serverį, jokios registracijos, jokių apribojimų.

DUK

Ar šis HEX į HSL konverteris nemokamas?

Taip - jis 100 % nemokamas, be registracijos ir be jokių apribojimų. Viskas vyksta tiesiog tavo naršyklėje.

Ar mano spalvos kur nors siunčiamos?

Ne. Konvertavimas vyksta paprastu JavaScript kodu tiesiai tavo įrenginyje - niekas nesiunčiama į serverį, o įrankis toliau veikia net ir be interneto, kai puslapis jau įkeltas.

Kas yra HSL?

HSL - tai atspalvis (hue), sodrumas (saturation) ir šviesumas (lightness). Atspalvis yra kampas nuo 0 iki 360 laipsnių spalvų rate, sodrumas rodo, kokia ryški spalva - nuo 0 iki 100 procentų, o šviesumas kinta nuo 0 procentų (juoda) per gryną spalvą ties 50 procentų iki 100 procentų (balta).

Kaip konvertuoti hex į HSL ranka?

Hex kodą paverti raudonos, žalios ir mėlynos reikšmėmis ir kiekvieną padalyk iš 255. Iš šių trijų reikšmių išrink didžiausią ir mažiausią: šviesumas yra jų vidurkis, sodrumas skaičiuojamas kaip (max - min) padalyta iš (1 - |2L - 1|), o atspalvį lemia tai, kuris kanalas didžiausias, perskaičiavus į 0-360 laipsnių skalę.

Ar palaikomas sutrumpintas užrašymas, pvz. #36c?

Taip. CSS sutrumpintame formate kiekvienas ženklas padvigubinamas, todėl #36c išsiplečia į #3366cc ir konvertuojamas į hsl(220, 60%, 50%). 4 ženklų formatas veikia taip pat, tik paskutinis ženklas žymi alfa kanalą.

Kaip įrankis apdoroja skaidrumą (HSLA)?

8 ženklų hex kode alfa reikšmė užkoduota paskutinėje ženklų poroje. Tas baitas (0-255) padalijamas iš 255, kad gautume 0-1 alfa reikšmę, kurios reikia hsla() - suapvalinta iki trijų skaičių po kablelio, todėl #3366cc80 tampa hsla(220, 60%, 50%, 0.502).

Ar galima konvertuoti HSL atgal į HEX?

Taip. Po rezultatu naudok HSL į HEX eilutę: įvesk atspalvį (0-360) bei sodrumą ir šviesumą (0-100 %), ir iškart gausi hex kodą. Už ribų esančios reikšmės automatiškai apkarpomos.

Kuo HSL naudingesnis už hex?

HSL yra lengvai skaitomas žmogui: spalvą gali pašviesinti didindamas L, pritildyti mažindamas S arba pakeisti jos šeimą keisdamas H - ir viso to nereikia spėlioti hex ženklais. Todėl jis puikiai tinka nuosekliom spalvų paletėm, užvedimo būsenoms ir dizaino žetonams kurti.