Si mund të marr kodin HEX të një ngjyre në një imazh?

Ngarkoni imazhin, pastaj lëvizni treguesin mbi të ose klikoni mbi një piksel — një zmadhues ju ndihmon të goditni pikërisht pikselin e duhur. Kodi HEX (si #4f46e5) shfaqet menjëherë dhe mund ta kopjoni me një klikim.

Çfarë është një kod ngjyre HEX?

Një kod HEX e shkruan ngjyrën si # të ndjekur nga gjashtë shifra heksadecimale — nga dy për të kuqen, të gjelbrën dhe blunë, si për shembull #4f46e5. Ky është formati që kërkojnë CSS, HTML dhe shumica e veglave të dizajnit.

A mund të marr gjithashtu RGB dhe HSL, jo vetëm HEX?

Po — çdo piksel që përzgjidhni tregon vlerat e tij RGB dhe HSL krahas HEX, dhe secila prej tyre mund të kopjohet me një klikim.

Kodi HEX nga Imazhi — Përzgjedhës Ngjyrash

Çfarë e bën këtë faqe të veçantë

Ndryshe nga faqet e tjera motra që përqendrohen në notacionin funksional RGB ose HSL, kjo faqe nxjerr ngjyrën e një pikseli si kod heksadecimal – gjashtëshifror (p.sh. #1E90FF) ose shënimi i shkurtër treshifror – i cili është standardi kryesor në CSS dhe mjetet e dizajnit. Heksi nuk përmban kanal alfa në formën e tij gjashtëshifrore. Çdo tejdukshmëri raportohet veçmas si përqindje: “Alfa ‹n›% – ky piksel është pjesërisht transparent.” Për shkak se heksi është një format kompakt dhe i lindur për ueb, kjo faqe është zgjedhja e duhur kur ju nevojitet një vlerë ngjyre që mund të vendoset drejtpërdrejt në color, background-color ose çdo veti tjetër CSS pa kllapa shtesë ose sintaksë të veçantë.

Si funksionon nxjerrja e ngjyrës heks nga një imazh

Pas ngarkimit të një imazhi (PNG, JPG, WebP, GIF, AVIF ose HEIC), faqja shfaq menjëherë vlerat e ngjyrës dhe koordinatat e pikselit qendror. Duke lëvizur miun mbi imazh, mostrimi ndjek çdo piksel. Një pamje e zmadhuar ndihmon për të synuar pikselin e saktë, veçanërisht në zona të anti-aliuara ose të kompresuara. Klikimi në imazh ruan ngjyrën aktuale në historikun e ngjyrave (deri në 12 artikuj). Ju gjithashtu mund të përdorni tastet shigjetë për të lëvizur një shënjestër mbi imazh; shtypja e Shift + shigjetë e lëviz atë me 10 pikselë. Enter ose Space ruan ngjyrën e mostruar.

Rezultatet kryesore shfaqen në një panel pranë imazhit:

HEX: Kodi heksadecimal gjashtëshifror i pikselit të mostruar.
RGB: Vlerat e Kuqes, Jeshiles, Blu.
HSL: Ngjyra (Hue), Ngopja (Saturation), Ndriçimi (Lightness).
Nëse pikseli është gjysmë transparent: “Alfa ‹n›% – ky piksel është pjesërisht transparent.”

Kur klikoni mbi imazh: “Ruajti ‹hex› në përzgjedhjet tuaja.” Një histori e ngjyrave të ruajtura shfaqet poshtë; klikimi mbi një mostër e ngarkon përsëri atë ngjyrë. Çdo vlerë ngjyre (HEX, RGB, HSL) mund të kopjohet duke klikuar mbi të.

Hyrjet dhe daljet në detaje

Hyrjet – Përdoruesi zgjedh një skedar imazhi nga pajisja e tij në një nga formatet e mëposhtme:

PNG, JPG, WebP, GIF, AVIF, HEIC.
Llojet e MIME të pranuara: image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif.

Daljet (të gjitha në kohë reale):

“Image ready – move over it to sample, click to save a color.” (përkthimi në shqip nuk është i nevojshëm për mesazhin e saktë, por faqja shfaqet në anglisht; megjithatë ne e shkruajmë artikullin në shqip, kështu që do të përshkruajmë).
Përmasat e imazhit (gjerësia × lartësia).
Koordinatat e pikselit (x, y).
Vlerat HEX, RGB, HSL.
Njoftim për tejdukshmëri nëse alfa < 100%.
Mesazh ruajtjeje.
Histori deri në 12 ngjyra; ngjyrat me vlera të njëjta RGB por alfa të ndryshme ruhen si hyrje të veçanta.
Kopjim në clipboard duke klikuar mbi çdo vlerë ngjyre; nëse shfletuesi bllokon aksesin, shfaqet: “Could not copy — your browser blocked clipboard access.”

Rregullat dhe rastet kufitare

Mostrimi i pikselit qendror – Në momentin që imazhi ngarkohet, faqja shfaq vlerat dhe koordinatat e pikselit në qendër. Nuk ka nevojë të lëvizni miun menjëherë.
Anti-aliasing dhe kompresimi – Nëse imazhi është JPEG ose një screenshot, kompresimi dhe anti-aliasing mund të kenë ndryshuar vlerat e pikselëve. Ngjyrat në zona që duken të njëtrajshme mund të ndryshojnë pak nga njëri piksel në tjetrin. Mostrimi i saktë bëhet piksel për piksel.
Tejdukshmëria – Një piksel gjysmë transparent lexohet siç është, pa marrë parasysh se çfarë mund të jetë pas tij. Heksi nuk e kodon alfa; faqja e raporton veçmas në përqindje.
Kufiri i madhësisë – Imazhet me anën më të gjatë mbi 4096 pikselë zvogëlohen në shkallë.
Formatet e pambështetura – Nëse hidhet një skedar i papërshtatshëm, shfaqet: “That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.”
Imazh i dëmtuar – “That image could not be opened. It may be corrupted or in an unsupported format.”
Butoni “Filloni nga fillimi” – Pastron imazhin, historikun e ngjyrave dhe rivendos mjetin në gjendjen fillestare.
Tastiera – Shigjetat lëvizin shënjestrën; Shift + shigjetë lëviz 10 pikselë; Enter/Space ruan ngjyrën.

Për kë është kjo faqe

Dizajnerët që duhet të nxjerrin ngjyra të sakta pikselësh nga imazhe referuese për UI.
Zhvilluesit që kanë nevojë për vlera të sakta heks për CSS (p.sh. #1E90FF) për të përputhur një mockup ose element marke.
Krijuesit e përmbajtjes që marrin mostra ngjyrash nga imazhe për brandim, miniatura ose grafika të mediave sociale.
Kushdo që duhet të kopjojë një kod ngjyre heks nga një imazh – për shembull, për të përputhur një ngjyrë ekzistuese në një logo, foto ose screenshot.

Si integrohen ngjyrat e nxjerra në rrjedhën e punës

Heksi është format i preferuar për ueb sepse është kompakt dhe nuk kërkon sintaksë shtesë. Pasi të keni nxjerrë një kod si #3CB371, mund ta përdorni direkt në CSS: color: #3CB371; ose në mjete si Figma, Photoshop, Illustrator. Vini re se heksi gjashtëshifror nuk përmban kanal alfa; për tejdukshmëri do t'ju duhet të përdorni funksionin rgba() ose hsla(), ose të vini re përqindjen e alfa-s që raporton mjeti. Ky mjet e bën të qartë këtë ndarje: ngjyra heks plus përqindje alfa si informacion shtesë.

FAQ – Pyetje të shpeshta

1. Pse ngjyra që marr nga imazhi ndryshon nga ajo që shoh në ekran? Ekrani juaj mund të ketë profil ngjyrash të ndryshme (sRGB, Adobe RGB, etj.) dhe kompresimi i imazhit (veçanërisht JPEG) ndryshon vlerat e pikselëve. Mjeti lexon vlerën dixhitale të memorizuar në skedar, jo ngjyrën e shfaqur pas kalibrimit të ekranit.

2. A mund të nxjerr ngjyra nga imazhe me transparencë (PNG me kanal alfa)? Po. Për pikselët gjysmë transparentë, mjeti shfaq ngjyrën e pikselit (RGB) plus përqindjen e alfa-s. Heksi nuk e përfshin këtë alfa; duhet të përdorni vlerën RGB dhe përqindjen e alfa-s për të krijuar një ngjyrë rgba().

3. Sa ngjyra mund të ruaj në historik? Deri në 12 ngjyra. Nëse ruani më shumë, më e vjetra hiqet. Ngjyrat me të njëjtat vlera RGB por alfa të ndryshme ruhen si hyrje të veçanta.

4. Si mund të kopjoj një vlerë ngjyre? Klikoni mbi vlerën HEX, RGB ose HSL në panel. Nëse shfletuesi lejon, vlera kopjohet në clipboard. Nëse jo, shfaqet një mesazh gabimi.

5. Pse disa pikselë në një zonë që duket e njëtrajtshme japin ngjyra të ndryshme? Për shkak të anti-aliasing (zbutjes së skajeve) dhe kompresimit me humbje (JPEG). Edhe në një sipërfaqe të sheshtë, pikselët ngjitur mund të kenë vlera paksa të ndryshme. Përdorni zmadhimin për të zgjedhur pikselin e saktë.

6. A mund të përdor tastierën për të mostruar ngjyra? Po. Pasi imazhi është i fokusuar, mund të përdorni shigjetat për të lëvizur shënjestrën. Shtypni Shift + shigjetë për lëvizje 10 pikselëshe. Enter ose Space ruan ngjyrën aktuale.

Pyetje të shpeshta