Konvertues nga HSL në HEX

Si funksionon konvertimi HSL në HEX

Kjo faqe merr një ngjyrë të shprehur në modelin HSL – shkallë hue (0–360), përqindje saturation (0–100%) dhe përqindje lightness (0–100%) – dhe nxjerr menjëherë kodin përkatës heksadecimal (HEX) që përdoret në CSS dhe mjetet e dizajnit. Konvertimi është i drejtpërdrejtë dhe pa humbje brenda gamutit sRGB, ndryshe nga konvertimet që përfshijnë LAB ose CMYK, të cilat mund të rregullojnë ngjyra jashtë gamutit. Algoritmi i brendshëm fillimisht shndërron HSL në vlera RGB, pastaj secili kanal RGB shndërrohet në dy shifra heksadecimal (nga 00 në FF). Për shembull, një ngjyrë me vlera HSL 243, 75%, 59% jep RGB (79, 70, 229), që në HEX shkruhet #4f46e5. Ky proces ndodh menjëherë sapo përdoruesi shtyp ose zgjedh një ngjyrë, pa asnjë vonesë.

Pse kjo faqe është e ndryshme nga të tjerat

Shumica e shndërruesve të ngjyrave ofrojnë konvertim të përgjithshëm midis formateve, por kjo faqe është e dedikuar ekskluzivisht për HSL‑në në HEX. Kjo është një zgjedhje e ndërgjegjshme, sepse HSL është modeli i dizajnuar për arsyetimin njerëzor rreth ngjyrës – ndryshimi vetëm i lightness mban hue të paprekur, gjë që e bën atë të domosdoshëm për gjenerimin e paletave dhe temave. HEX, nga ana tjetër, është një shënim RGB gjashtëshifror (ose tre‑shifror i shkurtuar) që nuk mbart alfa përveç nëse përdoret forma tetëshifrore. Konvertimi është i drejtpërdrejtë dhe pa humbje brenda gamutit sRGB, ndryshe nga konvertimet që përfshijnë LAB ose CMYK, të cilat mund të rregullojnë ngjyrat jashtë gamutit. Pra, kur përdorni këtë faqe, jeni të sigurt se ngjyra që shihni në HSL do të jetë saktësisht e njëjta në HEX – pa ndryshime, pa përafrime.

Futja e të dhënave: vlerat e sakta dhe gabimet e zakonshme

Për të marrë një rezultat, duhet të jepni tre vlera:

• Hue: një numër i plotë ose dhjetor midis 0 dhe 360 (gradë).
• Saturation: një përqindje midis 0% dhe 100%.
• Lightness: një përqindje midis 0% dhe 100%.

Shembull i saktë: 243, 75%, 59%. Nëse përdoruesi shkruan diçka jashtë këtyre vargjeve (p.sh. hue 400 ose saturation 120%) ose nuk përdor shenjën e përqindjes %, faqja tregon mesazhin e gabimit:

“Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.”

Ky mesazh është i qartë dhe udhëzon për formatin e duhur. Vini re se përqindjet duhet të jenë të shkruara me % – 75 pa % nuk pranohet. Gjithashtu, vlerat e hue mund të jenë edhe dhjetore (p.sh. 243.5), por rrumbullakimi bëhet në numrin më të afërt të plotë për RGB. Të gjitha përpunimet ndodhin në shfletuesin tuaj; asnjë vlerë nuk ngarkohet në server.

Formati HEX: gjashtëshifror, tre-shifror dhe raste të veçanta

Kodi HEX i daljes ka gjithmonë parashtesën # dhe gjashtë shifra heksadecimal (nga 0 në 9 dhe a në f). Për shembull, #4f46e5. Megjithatë, nëse secili kanal RGB mund të shprehet me një shifër të vetme (p.sh. të gjitha vlerat janë shumëfisha të 17 si rgb(255,0,0) që jep #ff0000), atëherë faqja tregon edhe formën e shkurtuar tre‑shifrore, si #abc. Pra, nëse ngjyra është rgb(170, 187, 204), HEX do të jetë #aabbcc dhe gjithashtu shfaqet si #abc. Kjo ndihmon për të shkruar kod më të shkurtër CSS kur lejohet.

Shënime:

• Shkronjat në HEX mund të jenë të vogla apo të mëdha – faqja i jep të vogla për standard.
• Asnjëherë nuk shtohet kanali alfa në formën gjashtëshifrore. Për alfa duhet përdorur forma tetëshifrore #RRGGBBAA, por kjo faqe nuk e prodhon atë.
• Konvertimi është gjithmonë brenda gamutit të dukshëm RGB; nuk ndodh asnjë rregullim jashtë gamutit.

Raste praktike: nga paleta HSL tek kodi HEX

Përdoruesit që kanë nevojë për këtë faqe janë kryesisht:

• Dizajnerët që ndërtojnë paleta ngjyrash në HSL dhe duhet të marrin kodet HEX për zbatim në kod ose mjete dizajni.
• Zhvilluesit front‑end që marrin vlera HSL nga skedarë dizajni (p.sh. Figma, Sketch) dhe duhet t'i përkthejnë në vetitë CSS color ose background-color, të cilat presin HEX.
• Kushdo që rregullon temat ose aplikon raporte kontrasti aksesueshmërie duke modifikuar lightness në HSL, pastaj konverton rezultatin në HEX për prodhim.

Për shembull, për të krijuar një temë të errët, mund të filloni me një hue fikse (p.sh. 220), të ulni lightness nga 70% në 30%, dhe të merrni HEX‑in përkatës për të shkruar CSS. Në këtë mënyrë, ruhet nuanca ndërsa ndryshohet shkëlqimi, duke siguruar kontrast të mirë sipas WCAG.

Kufizimet dhe krahasimi me modelet e tjera

Edhe pse konvertimi HSL në HEX është i thjeshtë, ka disa kufizime që duhen mbajtur parasysh:

• HEX‑i gjashtëshifror nuk ka kanal alfa. Nëse keni nevojë për transparencë, duhet të përdorni formën tetëshifrore ose rgba().
• HEX nuk ka dimensionin e lightness-it. Nuk mund të rrisni shkëlqimin e një ngjyre HEX pa e kthyer atë në HSL më parë. Kjo është arsyeja pse dizajnerët preferojnë HSL për manipulim dhe HEX për prodhim.
• CMYK‑ja e shfaqur në këtë faqe është një përllogaritje në ekran dhe mund të ndryshojë nga vlerat profesionale të shtypit. Nëse keni nevojë për CMYK të sakta, përdorni profile të dedikuara.
• Konvertimi është gjithmonë i saktë brenda sRGB. Nuk ka humbje informacioni, ndryshe nga konvertimet për në hapësira më të gjera si ProPhoto RGB ose CIE Lab.

Një gabim i zakonshëm është të mendosh se HSL dhe HEX janë modele të ndryshme ngjyrash – në fakt, HEX është thjesht një shënim tjetër për RGB. Algoritmi i konvertimit nga HSL në HEX është: fillimisht llogaritet RGB nga HSL duke përdorur formulën standarde (që përfshin rastet kur saturimi është 0), pastaj secili komponent RGB shndërrohet në heksadecimal duke e pjesëtuar me 16 dhe duke marrë mbetjen për shifrat. Për shembull, për R=79: 79 / 16 = 4 me mbetje 15 -> shifrat 4 dhe f (pasi 15 = f). Kështu 79 bëhet 4f. Kjo llogari bëhet për secilin kanal.

Pyetjet e shpeshta

1. Pse marr gabim kur shkruaj “243, 75, 59” pa përqindje?
Sepse faqja pret që saturation dhe lightness të jenë të shkruara me shenjën e përqindjes (%). Formati i saktë është 243, 75%, 59%.

2. A mund të përdor vlera dhjetore për hue?
Po, hue mund të jetë numër dhjetor (p.sh. 243.5). Faqja e konverton në RGB duke ruajtur saktësinë, pastaj rrumbullakon kanalet RGB në numra të plotë për HEX.

3. Pse shfaqet ndonjëherë një kod tre‑shifror si #abc?
Kur secili kanal RGB mund të shprehet me një shifër heksadecimal (p.sh. të gjitha vlerat janë shumëfish të 17), forma e shkurtuar është e vlefshme dhe e shfaqur për lehtësi.

4. A ngarkohen të dhënat e mia në ndonjë server?
Jo. Gjithçka përpunon në shfletuesin tuaj. Asnjë vlerë nuk dërgohet në internet.

5. A mund të konvertoj HSL në HEX për ngjyra jashtë gamutit sRGB?
HSL përkufizohet gjithmonë brenda sRGB, kështu që nuk ka ngjyra jashtë gamutit. Nëse përdorni HSL që përputhet me një ngjyrë sRGB, konvertimi është i saktë.

6. Pse vlerat CMYK janë të përafërta?
CMYK e shfaqur në faqe është një përllogaritje e shpejtë dhe nuk merr parasysh profilin e shtypit. Për përdorim profesional, përdorni mjete të dedikuara për konvertim CMYK.