HSL į HEX konverteris

HSL į HEX: spalvų modelių konvertavimas tiesiogiai ir be nuostolių

Šiame puslapyje įvedate HSL spalvą – atspalvį laipsniais (0–360), sodrumą procentais ir šviesumą procentais – ir akimirksniu matote atitinkamą šešioliktainį (HEX) spalvų kodą. HEX kodas yra šešiaženklė (arba triženklė sutrumpinta) notacija, naudojama visur CSS ir dizaino įrankiuose, pavyzdžiui, #1E90FF. Kai rašote arba pasirenkate spalvą, HEX reikšmė atsinaujina iškart. Šis puslapis yra skirtas būtent HSL‑į‑HEX konvertavimui – jokio papildomo apdorojimo, jokių supaprastinimų.

Kuo šis puslapis skiriasi nuo kitų

HSL yra spalvų modelis, sukurtas žmogaus mąstymui apie spalvas – keičiant tik šviesumą, atspalvis išlieka nepakitęs, todėl jis naudojamas paletėms ir temoms generuoti. HEX, kita vertus, yra šešiaženklė (arba triženklė sutrumpinta) RGB notacija; ji neturi alfa kanalo, nebent naudojama aštuoniaženklė forma. Konversija yra tiesioginė ir be nuostolių sRGB gamos ribose, skirtingai nei konversijos, apimančios LAB arba CMYK, kurios gali koreguoti už gamos ribų esančias spalvas. Dauguma spalvų keitiklių siūlo bendrą konvertavimą iš bet kokio formato į bet kokį, tačiau šis puslapis specializuotas būtent HSL → HEX, todėl sąsaja yra maksimaliai aiški, o klaidos – minimalios.

Kitas skirtumas – momentinis atnaujinimas be delsos. Kiekvienas jūsų įvestas skaičius arba slankiklio pastūmimas iš karto atvaizduoja HEX kodą. Nėra jokių „konvertuoti“ mygtukų. Tai ypač naudinga, kai eksperimentuojate su spalvų temomis ir norite greitai pamatyti, kaip mažas šviesumo pakeitimas paveikia HEX reikšmę.

Įvestys, išvestys ir kaip jos veikia

Įvestys – trys reikšmės:

• Atspalvis (Hue) – laipsniais nuo 0 iki 360. 0 ir 360 yra raudona, 120 – žalia, 240 – mėlyna.
• Sodrumas (Saturation) – procentais nuo 0% iki 100%. 0% reiškia pilką (be spalvos), 100% – gryną atspalvio versiją.
• Šviesumas (Lightness) – procentais nuo 0% iki 100%. 0% yra juoda, 100% – balta, 50% – „gryna“ spalva (atspalvis nedaugintas).

Pavyzdys: 243, 75%, 59% atitinka violetinę-mėlyną spalvą, kuri HEX išreiškiama kaip #4f46e5.

Išvestys – pagrindinė išvestis yra HEX spalvų kodas. Jei kiekvieną RGB kanalą galima užrašyti vienu šešioliktainiu skaitmeniu (t. y. kiekvienas kanalas yra 0x00, 0x11, 0x22, …, 0xFF ir abu skaitmenys vienodi), puslapis taip pat parodo triženklę sutrumpintą formą, pvz., #abc. Tai atitinka CSS specifikaciją, kurioje leidžiama naudoti triženklį HEX, kai kanalų reikšmės yra #RRGGBB ir kiekviena pora susideda iš dviejų vienodų šešioliktainių skaitmenų.

Visi kiti spalvų laukai (RGB, HSV, CMYK, LAB) atnaujinami tuo pačiu metu. Tai leidžia palyginti, kaip ta pati spalva atrodo skirtinguose modeliuose.

Taisyklės, ribiniai atvejai ir apribojimai

Jei HSL reikšmės yra už leistinų ribų (atspalvis 0–360, sodrumas 0–100%, šviesumas 0–100%) arba suformatuotos neteisingai, įrankis rodo klaidos pranešimą: „Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.“ Ši klaida atsiranda, pavyzdžiui, jei pamirštate procento ženklą (%) prie sodrumo ar šviesumo, jei įvedate atspalvį didesnį nei 360 arba jei naudojate dešimtainius kiekius netinkamu formatu.

Konversija iš HSL į HEX visada išlieka matomame RGB diapazone; šiai konversijai nereikia reguliuoti spalvų, esančių už gamos ribų, nes HSL ir HEX (RGB) veikia toje pačioje sRGB erdvėje. Tai skiriasi nuo, pavyzdžiui, LAB → sRGB konversijos, kai kai kurios LAB spalvos gali būti už sRGB gamos ribų ir turi būti koreguojamos.

CMYK išvestis (rodoma šalia) yra ekrane pateikiamas įvertis ir gali skirtis nuo profesionalių spausdinimo verčių. CMYK yra priklausomas nuo konkretaus spausdinimo proceso ir popieriaus; šis įrankis naudoja bendrą konversijos formulę, kuri netinka aukštos kokybės spaudai.

Kitas svarbus apribojimas: šešiaženklis HEX neturi alfa kanalo. Jei jums reikia permatomumo, turėtumėte naudoti aštuoniaženklę HEX notaciją (pvz., #4f46e580), tačiau šis puslapis jos nerodo – jis sukurtas tipiniams CSS poreikiams, kur alfa dažniausiai nurodoma atskirai (pvz., rgba() arba hsla()).

Visi skaičiavimai atliekami jūsų naršyklėje; niekas, ką įvedate, nėra siunčiama į serverį. Tai užtikrina greitą atsaką ir privatumą.

Kam šis puslapis skirtas

• Dizaineriai, kurie kuria spalvų paletes HSL formatu ir vėliau joms reikia HEX kodų diegimui kode ar dizaino įrankiuose (Figma, Sketch). Figma, pavyzdžiui, leidžia nustatyti spalvą HSL slankikliais, bet CSS dažniausiai naudoja HEX. Šis puslapis yra idealus tarpinis žingsnis.
• Priekinės dalies kūrėjai (front-end developers), kurie gauna HSL reikšmes iš dizaino failų ir turi jas paversti CSS HEX savybėmis, pvz., color: #4f46e5;. Be to, kai kurie CSS generatoriai priima bet kokį formatą, bet dažnai komandos naudoja vientisą HEX standartą.
• Visi, kurie derina temas ar taiko prieinamumo kontrasto santykius modifikuodami šviesumą HSL, o vėliau konvertuoja rezultatą į HEX reikšmę gamybai. Pavyzdžiui, norint užtikrinti WCAG AA standartą (kontrasto santykis ≥ 4,5:1), dažnai reguliuojamas šviesumas, o tada spalva fiksuojama HEX.

Kaip veikia konversija: nuo HSL iki HEX

Norint suprasti, kodėl šis konvertavimas yra tiesioginis, verta žinoti algoritmą. HSL konvertuojamas į RGB, o tada RGB kiekviena dedamoji (raudona, žalia, mėlyna) verčiama į šešioliktainę sistemą.

1. HSL → RGB: Tradicinis algoritmas pirmiausia apskaičiuoja chromą (C), o po to nustato RGB kanalus pagal atspalvio sektorių. Tarkime, H = 243°, S = 75%, L = 59%.

   • C = (1 – |2L – 1|) × S = (1 – |2·0.59 – 1|) × 0.75 = (1 – |0.18|) × 0.75 = 0.82 × 0.75 = 0.615.
   • X = C × (1 – |(H/60) mod 2 – 1|) = 0.615 × (1 – |(243/60) mod 2 – 1|) = 0.615 × (1 – |4.05 mod 2 – 1|) = 0.615 × (1 – |0.05 – 1|) = 0.615 × (1 – 0.95) = 0.615 × 0.05 = 0.03075.
   • m = L – C/2 = 0.59 – 0.615/2 = 0.59 – 0.3075 = 0.2825.
   • Kadangi H yra tarp 240° ir 300° (ketvirtas sektorius), RGB = (R', G', B') = (X, 0, C), tada pridedama m: R = 0.03075 + 0.2825 = 0.31325; G = 0 + 0.2825 = 0.2825; B = 0.615 + 0.2825 = 0.8975. Po normalizavimo nuo 0 iki 1 gauname R≈80, G≈72, B≈229 (apvalinant iki sveikųjų skaičių: 80, 72, 229). Tai atitinka RGB(80, 72, 229).

2. RGB → HEX: Kiekviena RGB dedamoji verčiama į šešioliktainį skaičių. 80 (dešimtainis) = 0x50; 72 = 0x48; 229 = 0xE5. Taigi HEX = #5048E5 – tačiau mūsų pavyzdyje buvo #4f46e5. Kodėl skirtumas? Dėl apvalinimo. Realiai apskaičiavus tiksliau (naudojant formulę su slankiuoju kableliu), gauname R≈79, G≈70, B≈229, t. y. 0x4F, 0x46, 0xE5 = #4F46E5. Šiame puslapyje naudojamas tas pats tikslus algoritmas, todėl rezultatas sutampa su Figma ir kitais įrankiais.

Kadangi abi konversijos yra determinuotos ir nereikalauja jokių papildomų koregavimų, rezultatas yra vienareikšmis.

Dažniausios klaidos ir patarimai

• Procento ženklas yra būtinas. Jei įvesite 243, 75, 59 be procentų, puslapis parodys klaidą. Tai dažna problema, ypač jei kopijuojate reikšmes iš skaičiuoklės.
• Atspalvis neturi procentų, bet yra laipsniai. Nors CSS funkcija hsl() leidžia praleisti laipsnių ženklą (tiesiog skaičius), šiame puslapyje aiškumo dėlei tikimasi skaičiaus be ženklo.
• Neigiami atspalviai nėra palaikomi – juos reikia modifikuoti pridėjus 360, kol pateksite į intervalą 0–360. CSS cikliškai apdoroja atspalvį, bet šis puslapis to nedaro.
• HEX kodas gali būti rodomas mažosiomis raidėmis (#4f46e5) arba didžiosiomis (#4F46E5). Abu variantai yra teisingi, ir CSS jie veikia vienodai.
• Triženklis HEX rodomas tik tada, kai kiekviena RGB dedamoji gali būti pavaizduota vienu šešioliktainiu skaitmeniu, t. y. kai kanalų reikšmės yra 0, 17, 34, 51, 68, 85, 102, 119, 136, 153, 170, 187, 204, 221, 238 arba 255 (skaičiai, dalinami iš 17). Pavyzdžiui, RGB(255, 0, 0) = #F00. Tačiau HSL(0, 100%, 50%) duoda #FF0000 – tai nėra triženklis, nes 255 nėra 17 kartotinis? Iš tiesų 255 = 17 × 15, bet jis yra šešioliktainis FF, o vienas skaitmuo būtų F tik tuo atveju, jei kanalas būtų #FF (dvigubas), o vienas skaitmuo leidžiamas tik kai kanalas yra #XX abu vienodi, pvz., #FF suteikia F. Bet čia yra niuansas: triženklis HEX reikalauja, kad kiekvienas kanalas būtų sudarytas iš dviejų vienodų šešioliktainių skaitmenų, pvz., #FF → F, bet #FF yra 255, kuris yra 17×15 – tinka. Taigi RGB(255,0,0) = #FF0000 ↔ #F00. Iš tiesų 255 yra vienas iš galimų variantų (17 kartotinis). Taigi sodrumo ir šviesumo deriniai, duodantys tokias RGB reikšmes, yra gana reti.

Dažnai užduodami klausimai (FAQ)

1. Ar konversija praranda spalvų informaciją?
Ne. HSL ir HEX (RGB) veikia toje pačioje sRGB erdvėje. Kiekviena HSL reikšmė atitinka tiksliai vieną RGB triplelį, ir atvirkščiai (išskyrus kai RGB nėra normalizuotas). Todėl konversija yra be nuostolių.

2. Kodėl kartais matau triženklį HEX, o kartais ne?
Triženklis HEX (#ABC) yra sutrumpinta #AABBCC forma. Jis leidžiamas, kai kiekvienas RGB kanalas turi du vienodus šešioliktainius skaitmenis. Tai įvyksta, kai kanalo reikšmė yra 0, 17, 34, 51, 68, 85, 102, 119, 136, 153, 170, 187, 204, 221, 238 arba 255. Ne kiekviena HSL spalva atitinka tokią sąlygą.

3. Ar galiu naudoti šį puslapį oflain?
Taip, visi skaičiavimai atliekami jūsų naršyklėje, jokio interneto ryšio nereikia, kai puslapis jau įkeltas.

4. Kuo skiriasi HSL nuo HSB/HSV?
HSL (atspalvis, sodrumas, šviesumas) ir HSV/HSB (atspalvis, sodrumas, vertė/ryškumas) skiriasi tuo, kaip apibrėžiama „gryna“ spalva. HSL šviesumas 50% atitinka gryną spalvą; HSV vertė 100% atitinka didžiausią intensyvumą. Šis puslapis naudoja tik HSL.

5. Kodėl CMYK reikšmė nėra tiksli?
CMYK priklauso nuo spausdinimo proceso, popieriaus, rašalo ir ICC profilių. Šiame puslapyje pateikiamas apytikslis konvertavimas pagal bendrą formulę, tinkantį ekranui, bet netinkantį profesionaliai spaudai.

6. Ar šis įrankis palaiko aštuoniaženklį HEX su alfa?
Ne. Šis puslapis skirtas šešiaženkliui (ir triženkliui) HEX be alfa. Jei jums reikia pralaidumo, naudokite rgba() arba hsla() CSS funkcijas.