Paano Kunin ang Hex Color Code Mula sa Isang Imahe (2026)

May imahe ka at kailangan mo ng isang numero mula dito: ang hex code ng partikular na kulay. Marahil ito ay logong matagal nang wala ang brand spec, screenshot ng site na ang asul ay gusto mong itugma, o larawang may shade na gusto mong gamitin muli. Ang pag-type ng inaakala mong kulay ay hindi gumagana — hindi mababasa ng iyong mata ang #3A7BD5 sa screen, at ang kulay na mukhang tama ay kadalasang ilang digit ang mali. Narito kung paano basahin ang aktwal na halaga diretso mula sa pixels.

Bakit hindi kailanman gumagana ang paghula

Ang isang "asul" sa screen ay talagang laganap ng halos-magkakaparehong asul, at ang liwanag at calibration ng iyong monitor ay lalong inilalayo ang mga ito. Pumili sa mata at dumadapo kang malapit pero mali — sapat na malapit na ang hindi pagtutugma ay nakakainis pero hindi halata, kaya gumugol ka ng sampung minutong nagtataka kung bakit hindi tugma ang button sa header. Ang solusyon ay huminto sa paghula at basahin ang numerong aktwal na iniimbak ng pixel.

Kunin ang code sa tatlong hakbang

Ang maaasahang paraan ay i-sample ang pixel direkta gamit ang color picker.

1. I-load ang imahe. I-drop ang logo, screenshot, o larawang kinukunan mo.
2. Mag-hover sa eksaktong pixel. Isang magnifier loupe ang sumusunod sa iyong cursor at pinalalaki ang lugar sa ilalim, kaya sa matalim na gilid ay makikita mo kung aling pixel ang patag na brand color at alin ang anti-aliased na halo ng dalawa.
3. Pindutin para i-save, tapos kopyahin. Ang bawat pindot ay pinananatili ang kulay bilang swatch na nagpapakita ng HEX, RGB at HSL nito, bawat isa may sariling copy button. Pindutin ang HEX at nasa iyong clipboard na ito.

Dumapo sa tamang pixel

Mas mahalaga ang loupe kaysa sa tunog. Kung saan ang isang kulay ay nakakatagpo ng iba — isang letra laban sa background, ang gilid ng icon — ang mga pixel sa pagitan ay anti-aliased: isang pinakinis na halo ng dalawang kulay, hindi ang alinman. Mag-sample doon at makakakuha ka ng maputik na halagang walang tumutugma. Layunin ang patag na lugar na ilang pixel sa loob ng hugis, kung saan solido ang kulay, at pinapahintulutan ka ng naka-zoom na tingin na kumpirmahing nasa ibabaw mo ito bago pindutin.

Sa malinis na logo o patag na UI, madali ito — pare-pareho ang kulay sa malawak na lugar. Sa larawan, kailangan ng mas maraming ingat, dahil ang grain at compression ay nangangahulugang talagang magkaiba ang katabing pixel. Pumili mula sa kalmado, pantay na naiilawang rehiyon at kumuha ng ilang sample para tsekan kung nagkakasundo sila.

HEX, RGB o HSL — kunin ang bagay

Ang bawat swatch ay nagbibigay sa iyo ng lahat ng tatlo nang sabay, kaya kinokopya mo kung alin ang gusto ng iyong destinasyon:

• HEX (#3A7BD5) — ang web default. CSS, Figma, Canva, brand doc. Kopyahin ito maliban kung may dahilan kang huwag.
• RGB (rgb(58, 123, 213)) — halaga ng channel, kapaki-pakinabang kapag may tool na humihingi nito o kailangan mo ng transparency sa pamamagitan ng rgba.
• HSL (hsl(215, 65%, 53%)) — hue, saturation, lightness. Pinakamainam kapag gusto mong iayos ang kulay: paliwanagin para sa hover state, patahimikin para sa variant, o bumuo ng scale mula dito.

Dahil ang bawat swatch ay may dala ng lahat ng tatlo, hindi ka kailanman nagsa-sample muli para lang magpalit ng format.

Pagkuha ng ilang kulay nang sabay

Bihirang isang kulay ang logo. Pindutin ang primary, ang accent, at ang text color sa isang dagok — nagsasalansan ang bawat isa sa listahan para maihambing mo sila at kopyahin nang sunud-sunod, sa halip na i-load ang imahe nang tatlong beses.

Kung gusto mo ng buod ng kulay ng buong imahe sa halip na partikular na pixel — ang pangkalahatang palette na binuo ng larawan — iba iyong trabaho, at ang hiwalay na palette tool ng img.diy ay awtomatikong nag-e-extract ng dominanteng kulay para sa iyo. Gamitin ang picker na ito kapag alam mo ang eksaktong lugar na gusto mo; gamitin ang palette tool kapag gusto mong ilarawan ang imahe para sa iyo.

Nananatili ito sa iyong device

Ang imahe ay binabasa nang lokal sa iyong browser mula sa canvas — walang ina-upload, walang sign-up, at pagkatapos ng unang pag-load, gumagana ito offline. Kaya ang hindi pa nailulunsad na mockup o pribadong asset ng kliyente ay hindi kailanman umaalis sa iyong makina dahil lang kailangan mo ng isang hex code mula dito.

I-load ang imahe, mag-hover sa pixel, pindutin, at kopyahin ang code.