Konvertues nga HEX në HSL

Çfarë bën kjo faqe?

Kjo faqe merr një kod ngjyre në format HEX—gjashtëshifror si #1E90FF ose shkurtesë treshifror si #abc—dhe në çast kthen ekuivalentin HSL (hue në gradë, saturation dhe lightness në përqindje). Përfaqësimi HSL është i ndërtuar për arsyetimin njerëzor: mund të rregulloni lehtësisht ndriçimin ose ngopjen duke ruajtur të njëjtën nuancë. Njëkohësisht faqja shfaq ngjyrën në të gjitha formatet e tjera që mbështet (HEX, RGB, HSV, CMYK, LAB), kështu që mund të kopjoni atë që ju nevojitet.

Formatet e daljes përditësohen njëkohësisht ndërsa ndryshoni hyrjen. Konvertimi bëhet tërësisht brenda shfletuesit tuaj—asgjë që shkruani nuk ngarkohet ose ruhet.

Pse HEX dhe HSL janë kaq të ndryshëm?

HEX është një shënim i papërpunuar RGB. Gjashtë shifra heksadecimal (ose tre për shkurtesë) kodojnë drejtpërdrejt vlerat e kuq, jeshil dhe blu në bazën 16. Për shembull, #4f46e5 përkthehet: 0x4f = 79 për të kuqin, 0x46 = 70 për jeshilin, 0xe5 = 229 për blunë. Ky format është kompakt dhe përdoret gjerësisht në CSS dhe mjetet e dizajnit, por nuk është intuitiv për rregullime që njeriu mund t’i kuptojë lehtë. Ndryshimi i ndriçimit në HEX kërkon rillogaritjen e të tre komponentëve RGB.

HSL është ndërtuar për arsyetimin njerëzor. Hue matet në gradë (0–360) në një rrotë ngjyrash, saturation (ngopja) është përqindje e intensitetit të ngjyrës, dhe lightness (ndriçimi) është përqindje e shkëlqimit nga e zeza (0%) në të bardhë (100%). Ndryshimi i lightness vetëm e mban hue të pandryshuar. Kjo është arsyeja pse HSL është formati i preferuar për gjenerimin e paletave të ngjyrave dhe sistemeve të temave. Për shembull, për të krijuar një variant më të errët të një ngjyre, thjesht ulni përqindjen e lightness pa prekur hue ose saturation.

Asnjë kanal alfa – HEX standard (gjashtëshifror ose treshifror) nuk mbart informacion transparence, dhe HSL gjithashtu nuk përfshin një komponent alfa. Konvertimi merret gjithmonë me ngjyra plotësisht të errëta (opaque). Nëse keni nevojë për transparencë, do të duhet të përdorni formato si RGBA ose HSLA, por kjo faqe nuk i ofron ato.

Si funksionon konvertimi matematikor nga RGB në HSL

Konvertimi bazohet në marrëdhënien midis vlerave RGB (të normalizuara në 0–1) dhe tre parametrave HSL. Algoritmi standard është si më poshtë:

1. Normalizoni HEX në vlera RGB: çdo dyshe shifrash heks (ose secila shifër e përsëritur për shkurtesën treshifror) konvertohet në një numër 0–255, pastaj pjesëtohet me 255 për të marrë vlera midis 0 dhe 1.
2. Gjeni vlerat maksimale dhe minimale midis R, G, B. Le të jenë max = max(R,G,B) dhe min = min(R,G,B).
3. Llogaritni lightness: L = (max + min) / 2.
4. Llogaritni saturation: Nëse max == min, saturation = 0%. Përndryshe, në varësi të lightness:
   • Nëse L <= 0.5, S = (max - min) / (max + min).
   • Nëse L > 0.5, S = (max - min) / (2 - max - min). Më pas shumëzoni me 100 për përqindje.
5. Llogaritni hue: Nëse max == min, hue = 0 (pandefinuar). Përndryshe:
   • Nëse max == R: H = 60 * ((G - B) / (max - min) + 0).
   • Nëse max == G: H = 60 * ((B - R) / (max - min) + 2).
   • Nëse max == B: H = 60 * ((R - G) / (max - min) + 4). Nëse rezultati është negativ, shtoni 360 për të marrë gradën 0–360.

Ky algoritëm prodhon hue në gradë, saturation dhe lightness në përqindje. Faqja zbaton këtë konvertim në kohë reale çdo herë që ndryshoni hyrjen e HEX.

Raste kufitare dhe gabime të zakonshme

Faqja pranon vetëm kode të vlefshme HEX: gjashtë shifra (p.sh. #4f46e5) ose tre shifra (#abc), me ose pa shenjën # në fillim. Nëse shkruani një vlerë të pavlefshme, shfaqet mesazhi i gabimit: "Jepni një ngjyrë heks si #4f46e5 ose #abc." Kjo përfshin çdo hyrje që përmban shkronja jo-heks (p.sh. #ggg) ose gjatësi të gabuar (p.sh. #12345).

Dalja jashtë gamutit të ngjyrave të dukshme: Nëse kaloni në një hapësirë tjetër ngjyrash (p.sh. LAB ose CMYK) dhe vendosni një vlerë jashtë gamutit RGB të pajisjes suaj, ngjyra rregullohet në ngjyrën më të afërt të shfaqshme. Kur e ktheni atë ngjyrë në HEX, mund të ketë një zhvendosje të lehtë në krahasim me vlerën origjinale. Kjo nuk është një gabim i faqes, por një kufizim i gamutit të ekranit.

Vlerat CMYK janë vetëm një vlerësim në ekran. Ato nuk duhet të përdoren për shtyp profesional pa kalibruar pajisjen tuaj. Konvertimi CMYK i ofruar këtu bazohet në një model të thjeshtë (separimi i ngjyrës) që nuk merr parasysh profilin e printerit, letrën dhe bojrat. Për punë printimi të sakta, përdorni një hapësirë ngjyrash të dedikuar si ICC profile.

Shkurtesat treshifrore: P.sh. #abc interpretohet si #aabbcc. Kjo do të thotë se #f00 bëhet #ff0000 (e kuqe e pastër). Nëse keni nevojë për një ngjyrë specifike që nuk përsërit shifrat, duhet të përdorni formën gjashtëshifrore.

Kush përfiton nga ky mjet

• Zhvilluesit front‑end që shkruajnë CSS dhe duan të konvertojnë një ngjyrë HEX nga një model dizajni në HSL për të rregulluar lehtësisht ndriçimin për gjendjet hover ose variantet e temave. Me HSL, mund të shkruani hsl(220, 80%, 50%) dhe të ndryshoni vetëm përqindjen e fundit për të marrë një version më të errët ose më të çelur.
• Dizajnerët UI/UX që mendojnë në terma të nuancës, ngopjes dhe ndriçimit dhe duan të përputhen me një ngjyrë marke të dhënë në HEX. HSL u lejon atyre të krijojnë variacione vizualisht të qëndrueshme.
• Kushdo që ndërton një paletë ngjyrash – HSL e bën të thjeshtë krijimin e skemave komplementare, analoge ose monokromatike duke ndryshuar vetëm hue ose saturation.
• Audituesit e aksesueshmërisë së uebit që duhet të verifikojnë raportet e kontrastit (WCAG). HSL e bën më të lehtë arsyetimin për kontrastin: për të rritur kontrastin midis tekstit dhe sfondit, mjafton të rritni diferencën në lightness, duke ruajtur hue.

Dallimet praktike midis HSL dhe HSV

Shumë njerëz ngatërrojnë HSL me HSV (Hue, Saturation, Value). Të dy përdorin hue në gradë, por përkufizimet e saturation dhe lightness (ose brightness) janë të ndryshme. Në HSV, saturation përcaktohet në lidhje me vlerën maksimale të komponentit RGB, dhe brightness është vlera maksimale. Në HSL, lightness është mesatarja e maksimumit dhe minimumit. Për pasojë, ngjyrat e pastra (p.sh. #ff0000) kanë lightness 50% në HSL dhe brightness 100% në HSV. Kjo faqe ofron të dyja përfaqësimet, kështu që mund të krahasoni.

Pyetje të shpeshta

1. A pranon faqja kode HEX pa shenjën #? Po, mund të shkruani 4f46e5 ose abc. Faqja do ta njohë si një kod të vlefshëm.

2. Çfarë ndodh nëse shkruaj #xyz? #xyz nuk është një kod i vlefshëm heks. Do të shfaqet mesazhi i gabimit: “Jepni një ngjyrë heks si #4f46e5 ose #abc.”

3. Pse kur konvertoj një ngjyrë CMYK në HEX dhe pastaj përsëri në CMYK, marr vlera të ndryshme? Konvertimi CMYK→RGB (dhe pastaj në HEX) përdor një model të thjeshtë që nuk është i kthyeshëm në mënyrë të përsosur. Gjithashtu, CMYK është një hapësirë që varet nga pajisja. Për këtë arsye vlerat CMYK në këtë faqe janë një vlerësim i përafërt.

4. A mund ta përdor këtë faqe për ngjyra me transparencë? Jo, sepse HEX standard (6 ose 3 shifra) nuk ka kanal alfa. HSL gjithashtu nuk e përfshin alfanë. Për transparencë do t’ju duhet një format tjetër si RGBA ose HSLA.

5. Si mund të sigurohem që ngjyra që shoh në ekran është e sakta për printim? Vlerat CMYK të shfaqura janë vetëm për referencë. Për printim profesional, duhet të përdorni një hapësirë ngjyrash të kalibruar dhe të testoni me një printer specifik.

6. A ruhen të dhënat e mia kur përdor këtë mjet? Jo. Të gjitha konvertimet bëhen brenda shfletuesit tuaj. Asgjë nuk ngarkohet në ndonjë server.