X'inhi din il-paġna u għaliex teżisti?
Din il-paġna ġiet iddisinjata speċifikament biex tikkonverti kulur mil-mudell HSL (Hue, Saturation, Lightness) għal kodici HEX (hekk imsejjaħ kodici eżadeċimali). L-idea hi sempliċi: inti ddaħħal valur ta' hue fi gradi (0–360), persentaġġ ta' saturazzjoni (0–100%), u persentaġġ ta' lightness (0–100%), u l-paġna turi immedjatament il-kodici HEX ekwivalenti, bħal #4f46e5. Il-HEX hu l-format standard ta' sitt numri (jew tlieta fil-forma mqassra) li jintuża fil-CSS u fil-biċċa l-kbira tal-għodod tad-disinn.
Dak li jagħmel din il-paġna differenti minn għodod oħra ta' konverżjoni hu l-iffukar sħiħ fuq il-mogħdija minn HSL għal HEX. Il-mudell HSL inbena biex ikun aktar faċli għall-bniedem: tista' tbiddel il-lightness waħdu mingħajr ma tmiss il-hue – dan huwa utli meta trid toħloq paletti jew temi b'kuntrast aċċessibbli. Min-naħa l-oħra, il-HEX hu forma ta' RGB f'notazzjoni eżadeċimali; m'għandux kanal alfa (sakemm ma tintużax il-forma ta' tmien numri, bħal #RRGGBBAA). Il-konverżjoni bejn HSL u HEX hija diretta u mingħajr telf ta' informazzjoni fi ħdan il-gamut sRGB (l-ispazju tal-kulur standard għall-iskrins). Dan ifisser li, b'differenza minn konverżjonijiet li jinvolvu LAB jew CMYK (li jistgħu jaġġustaw kuluri barra mill-firxa), hawn m'hemm l-ebda qatgħa jew telf – dak li tara hu dak li tikseb.
Il-paġna taħdem kompletament fil-browser tiegħek; l-ebda dejta ma tintbagħat fuq server. Kull meta tbiddel valur wieħed, il-bqija kollu jaġġorna fl-istess ħin.
Kif jaħdem il-konverżjoni minn HSL għal HEX?
Il-proċess tekniku hu normalment spjegat fi tliet passi: l-ewwel minn HSL għal RGB, imbagħad minn RGB għal HEX.
L-algoritmu standard (kif deskritt fl-ispeċifikazzjoni CSS) jibda billi jikkalkula l-komponenti RGB abbażi tal-hue, saturazzjoni u lightness. B'mod ġenerali, il-formula tuża l-valuri C = (1 - |2L - 1|) × S, fejn L u S huma frazzjonijiet (mhux persentaġġi). Imbagħad jiġi kkalkulat X = C × (1 - |(H / 60) mod 2 - 1|), u m = L - C/2. Skont fejn jaqa' l-hue (f'wieħed minn sitt setturi), il-valuri R, G, B jiġu assenjati bħala kombinazzjonijiet ta' (C, X, 0) u mbagħad miżjuda m. Ir-riżultat hu tliet numri bejn 0 u 1, li mbagħad jiġu kkonvertiti għal numri sħaħ bejn 0 u 255.
Il-konverżjoni għal HEX imbagħad hi sempliċi: kull wieħed mit-tliet numri (R, G, B) jinkiteb f'notazzjoni eżadeċimali b'żewġ ċifri. Jekk numru hu inqas minn 16, iżżid quddiemu żero (eż. 10 isir 0A, għalkemm il-każ letterali normalment ma jimpurtax – ħafna għodod jużaw ittri żgħar). Imbagħad tgħaqqad it-tliet pari u żżid # quddiemhom.
Eżempju: jekk il-valuri RGB ikunu (79, 70, 229), allura:
- 79 f'eżadeċimali hu
4F(għax 79 = 4×16 + 15, u 15 hu F) - 70 hu
46(70 = 4×16 + 6) - 229 hu
E5(229 = 14×16 + 5, u 14 hu E) Għalhekk il-HEX sħiħ hu#4f46e5.
Meta kull wieħed mit-tliet valuri jista' jinkiteb b'ċifra eżadeċimali waħda biss (jiġifieri r-relazzjoni bejn il-pari hi bħal XX fejn iż-żewġ ċifri huma identiċi, bħal aa, bb, cc), allura tintuża l-forma mqassra: #abc minflok #aabbcc. Il-paġna tiegħi turi din il-forma jekk ikun possibbli, biex tagħti verżjoni iqsar u aktar manjera.
Ta' min jinnota li l-konverżjoni minn HSL għal HEX dejjem tibqa' fil-gamut viżibbli tal-RGB; m'hemmx bżonn ta' aġġustamenti għal kuluri barra mill-firxa, għax l-istess definizzjoni tal-HSL fil-CSS hija mfassla fuq l-ispazju sRGB. Dan hu differenti minn konverżjonijiet bħal LAB (li jista' jipproduċi valuri barra mis-sRGB) jew CMYK (li spiss ikollu jnaqqas il-kulur għal-limiti tal-istampar).
Inputs u outputs: X'għandek iddaħħal u x'ikollok?
L-inputs tal-paġna huma tlieta:
- Hue – numru bejn 0 u 360, li jirrappreżenta l-pożizzjoni fuq iċ-ċirku tal-kulur. 0 jew 360 hu aħmar, 120 aħdar, 240 blu.
- Saturation – persentaġġ bejn 0% u 100%. 0% ifisser griż, 100% ifisser kulur pur.
- Lightness – persentaġġ bejn 0% u 100%. 0% hu iswed, 100% hu abjad, 50% hu l-kulur "normali".
Il-format mistenni hu bħal 243, 75%, 59%. Innota li s-saturazzjoni u l-lightness iridu jkollhom is-simbolu %; inkella l-paġna ma tkunx tista' tipproċessahom.
L-output primarju hu l-kodici HEX b'sitt ċifri. Immedjatament miegħu, jekk il-kulur ikollu valuri RGB li jippermettu l-forma mqassra (eż. #aabbcc isir #abc), dik tintwera wkoll. Barra minn hekk, il-paġna taġġorna fl-istess ħin l-oqsma l-oħra kollha: RGB, HSV, CMYK u LAB. Dan hu utli għal min irid iqabbel il-kulur f'diversi mudelli.
Tabella ta' eżempju:
| HSL (input) | HEX (output) | RGB |
|---|---|---|
0, 100%, 50% |
#ff0000 |
(255,0,0) |
120, 50%, 75% |
#aad4aa? (ikkalkula) |
(170,212,170) |
243, 75%, 59% |
#4f46e5 |
(79,70,229) |
Il-konverżjoni hija istantanja; kull meta tibdel valur wieħed, il-bqija kollu jaġġorna mingħajr ma tikklikkja buttuna.
Regoli u każijiet speċjali
Bħal kull għodda ta' konverżjoni, hemm xi regoli li għandek iżżomm f'moħħok.
Validazzjoni tal-input: Jekk il-valuri ta' hue, saturazzjoni jew lightness ma jkunux fil-medda korretta (hue 0–360, saturazzjoni 0–100%, lightness 0–100%) jew mhumiex ifformattjati b'mod li jinqara (eż. nieqes is-simbolu %), il-paġna turi l-messaġġ ta' żball:
"Daħħal HSL bħala hue 0–360 b'żewġ persentaġġi, eż. 243, 75%, 59%."
Dan il-messaġġ huwa maħsub biex jgħinek tifhem il-format eżatt. Jekk, pereżempju, tittajpja 90, 50, 80 (mingħajr %), il-paġna ma tistax tinterpreta jekk dawk humiex persentaġġi jew numri sħaħ; għalhekk hu meħtieġ li s-simbolu % jidher.
Aġġornament istantanju: Kwalunkwe tibdil f'kull qasam – kemm jekk hu l-input HSL kif ukoll jekk hu l-output RGB, HEX, HSV eċċ. – jaġġorna l-oqsma l-oħra kollha. Dan hu importanti għax jippermettilek taħdem lura jew 'il quddiem: tista' tibda b'HEX u tara l-HSL ekwivalenti, jew tibdel l-HSV u tara kif jinbidel il-HEX. Il-paġna hi b'mod effettiv konvertitur universali fost mudelli ta' kulur, iżda l-fokus ewlieni jibqa' fuq il-mogħdija HSL→HEX.
Ebda upload: Il-kalkoli jsiru kompletament fuq il-magna tiegħek (JavaScript fil-browser). L-ebda valur ma jintbagħat fuq server. Dan ifisser li tista' tuża l-għodda b'mod sigur anke b'kuluri sensittivi (għalkemm il-kuluri rari jkunu sigrieti).
CMYK stima: Il-valur CMYK muri hu biss stima għall-iskrin. Il-proċess tal-istampar juża algoritmi differenti (inkluż il-konverżjoni għal profil ICC) u jista' jipproduċi riżultat differenti. Għalhekk ma tistax tiddependi fuq din il-figura għal produzzjoni professjonali ta' stampar.
Ebda telf ta' kulur: B'differenza minn konverżjonijiet lejn spazji bħal LAB, il-konverżjoni minn HSL għal HEX hi "one-to-one" u ma toħroġx mill-gamut. Jekk ddaħħal HSL li hu validu, il-HEX li toħroġ ikun preċiżament il-kulur viżibbli fuq l-iskrin.
Min għandu bżonn din l-għodda?
Din il-paġna hija mfassla għal:
- Disinjaturi li joħolqu paletti ta' kuluri billi jaħdmu mas-sistema HSL, u mbagħad jeħtieġu l-kodiċi HEX biex jimplimentaw dawk il-kuluri fil-kodiċi (CSS, Sketch, Figma). Per eżempju, jekk disinjatur ikun qed jibni tema b'varjazzjonijiet ta' lightness fuq hue uniku, l-għodda tippermetti konverżjoni rapida.
- Żviluppaturi front-end li jirċievu valuri HSL minn fajls tad-disinn (Figma, Sketch) u jridu jittraduċuhom għal propjetajiet CSS. Il-HEX għadu l-aktar format użat fil-CSS (għalkemm CSS issa jaċċetta wkoll HSL direttament, eluf ta' proġetti għadhom jużaw il-HEX).
- Kulħadd li jkun qed jaġġusta temi jew japplika proporzjonijiet ta' kuntrast għall-aċċessibbiltà (WCAG). Il-mudell HSL jagħmilha faċli biex iżżid jew tnaqqas il-lightness mingħajr ma tbiddel il-hue, u mbagħad tara l-HEX għall-użu finali.
Barra minn hekk, l-għodda hija utli għal edukazzjoni: tista' tesperimenta b'valuri u tara kif jinbidlu l-formati l-oħra, fehim aħjar tar-relazzjoni bejn mudelli ta' kulur.
Mistoqsijiet frekwenti
1. X'inhi d-differenza bejn HSL u HEX?
HSL hu mudell ta' kulur li jaqsam il-kulur fi tliet komponenti: hue (kulur bażiku), saturazzjoni (purità), u lightness (dawl). Hu mfassal għall-bniedem: tista' tbiddel id-dawl mingħajr ma tbiddel il-kulur. HEX hu notazzjoni eżadeċimali tar-RGB (aħmar, aħdar, blu). Ma jagħtix direttament idea ta' kemm kulur hu ċar jew skur mingħajr kalkolu.
**2. Il-HEX b'sitt ċifri jista' jirrappreżenta kuluri opaki biss? Iva, sakemm ma tużax il-forma b'8 ċifri (li żżid kanal alfa). Din il-paġna tikkonverti biss għal HEX b'sitt ċifri (jew tlieta), għax l-HSL m'għandux kanal alfa. Jekk għandek bżonn kulur b'trasparenza, trid iżżid il-valur alfa manwalment.
3. Għaliex il-valur CMYK juri riżultat differenti minn printers professjonali? Il-CMK muri hu biss konverżjoni approssimattiva mingħajr profil ICC. L-istampar juża algoritmi ta' separazzjoni tal-kulur li jqisu l-karatteristiċi tal-linka u l-karta. Għalhekk m'għandekx tuża dan il-valur għal xogħol ta' stampa finali.
4. X'jiġri jekk iddaħħal valur ta' hue 'l barra minn 0–360? Il-paġna turi l-messaġġ ta' żball imsemmi hawn fuq. Tista' tipprova tuża angoli akbar minn 360, iżda mhumiex validi fil-mudell standard CSS.
5. Il-paġna taħdem offline? Iva, ladarba l-paġna tkun ittajpjata, il-kodiċi JavaScript jibqa' jaħdem fil-browser. Jekk għandek il-paġna miftuħa, tista' tkompli tużaha offline. Jekk tagħlaqha u tiftaħha mill-ġdid, jista' jkollok bżonn konnessjoni biex jerġgħu jitniżżlu r-riżorsi (skont il-konfigurazzjoni tal-browser).
6. Kif tittratta l-paġna l-każ meta l-kulur ikun skur ħafna jew ċar ħafna? B'mod standard: il-formuli jipproduċu l-RGB korrett. Pereżempju, HSL(0, 0%, 0%) jagħti #000000 (iswed). HSL(0, 0%, 100%) jagħti #ffffff (abjad). M'hemm l-ebda limitazzjoni partikolari.
Din l-għodda hija sempliċi, preċiża u ffokata – eżattament dak li għandek bżonn meta taħdem ma' kuluri bejn HSL u HEX.