Image Color Picker

Kailangan ang eksaktong kulay mula sa logo, screenshot, larawan, o design reference? I-load ang larawan, igalaw ang iyong cursor dito para mag-preview ng kulay sa ilalim ng magnifier loupe, at i-click para i-save ito. Ang bawat na-save na kulay ay nagpapakita ng HEX, RGB at HSL nito na may one-click na copy button.

Binabasa nito ang mga pixel nang diretso mula sa larawan sa iyong browser, kaya agad ang pagpili at ang file ay hindi kailanman ina-upload — kapaki-pakinabang para sa mga brand color na ayaw mong ipadala sa random na site.

Paano gamitin

Magdagdag ng larawanI-drop ang larawan o screenshot na gusto mong kunan ng kulay.
I-hover at i-clickIni-magnify ng loupe ang eksaktong pixel; i-click para i-save ang kulay.
Kopyahin ang valueKunin ang HEX, RGB o HSL para sa bawat kulay na na-save mo.

Minsan kailangan mo ng iisang kulay mula sa isang image at walang ibang tumatama — ang eksaktong asul sa isang logo, ang kulay-abo sa likod ng button sa isang screenshot, isang shade sa litratong gusto mong gamitin muli. Hindi kayang basahin ng iyong mata ang hex code mula sa screen, at ang kulay na mukhang tama ay kadalasang ilang digit ang mali. Pinapahintulutan ka ng picker na ito na mag-load ng image, gumalaw sa ibabaw nito gamit ang magnifier loupe na nagpapalaki sa mga pixel sa ilalim ng iyong cursor, at mag-click para i-save ang eksaktong gusto mo bilang swatch — HEX, RGB, at HSL na sabay na ipinapakita, bawat isa may copy button.

Binabasa nito ang mga pixel nang lokal sa iyong browser mula sa isang canvas: walang ina-upload, walang account, at pagkatapos ng unang load gumagana ito offline. Mahalaga iyon kapag ang image ay hindi pa nailalabas na mockup, brand asset ng kliyente, o internal na screenshot. Isa itong point sampler — bawat click ay bumabasa ng isang pixel, na tama para sa malinis na logo o flat na UI, at nangangailangan ng kaunting ingat sa maingay na litrato. Kung mas gusto mong kunin nang awtomatiko ang mga dominanteng kulay ng buong image, iyan ang gamit ng hiwalay na palette tool; ito ay para sa pagtuturo sa isang partikular na pixel at pagkuha ng value nito.

Para saan ito ginagamit ng mga tao

Bawiin ang eksaktong kulay ng brand mula sa lumang logo kapag wala na ang spec

Itugma ang button o heading sa kulay sa screenshot ng site na gusto mo

Kunin ang primary, accent, at text na kulay mula sa logo sa isang pass

Kumuha ng shade mula sa litrato para gamitin bilang background o accent

Basahin ang tunay na on-screen na kulay ng isang semi-transparent na elemento mula sa screenshot

Kopyahin ang kulay bilang HSL para mapaliwanag o mapatamlay ito para sa hover o variant state

Kapag kailangan mo ang eksaktong kulay, hindi kulay na malapit lang

Muli mong binubuo ang isang brand at ang tanging reperensya ay lumang logo. Itinutugma mo ang button sa screenshot ng site na gusto mo. May napansin kang kulay sa litrato at gusto mong gamitin sa sarili mong disenyo. Sa bawat kaso pareho ang problema: hindi mababasa ng mata mo ang hex code mula sa screen. Ang "iyang teal" ay talagang isang dosenang bahagyang magkaibang teal, at inililipat pa sila ng monitor. Kailangan mo ang numerong tunay na dala ng pixel.

Iyon ang ginagawa ng tool na ito. Mag-load ng larawan, gumalaw sa ibabaw nito, at may magnifier loupe na sumusunod sa cursor mo na nagpapakita ng mga pixel sa ilalim, pinalaki para makarating ka sa tumpak na gusto mo. I-click, at ang kulay na iyon ay nase-save bilang swatch. Ang bawat swatch ay naglilista ng HEX, RGB, at HSL na halaga nito na may copy button sa tabi ng bawat isa, kaya dumidiretso ka mula sa pixel sa larawan hanggang code sa clipboard mo.

Hindi kailanman umaalis sa makina mo ang larawan. Binabasa nang lokal ang mga pixel sa browser mula sa canvas — walang ina-upload, walang account, at kapag na-load na ang pahina ay patuloy itong gumagana nang patay ang network. Iyon ang punto kapag ang "larawan" ay hindi pa nailalabas na mockup, brand asset ng kliyente, o internal na screenshot na hindi mo dapat ibigay sa basta web tool.

Paano ito gumagana sa praktika

Ang loupe ay para sa katumpakan. Ang logo at UI ay may matigas na gilid kung saan nagbabago ang kulay sa isang pixel — ang anti-aliasing ay nangangahulugang ang katabing pixel ay maputik na halo. Pinapayagan ka ng pinalaking view na makita mismo kung anong pixel ka nakatuntong bago ka mag-commit, para piliin mo ang flat na brand color at hindi ang gilid.
Bawat click ay nagpapanatili ng swatch. Ang pag-sample ay hindi isa-lang-tapos-na. Mag-click sa paligid ng larawan at ang bawat kulay ay nagsasalansan sa listahan, kaya makakahila ka ng primary ng logo, ang accent nito, at ang kulay ng teksto sa isang pass at ihambing sila nang magkatabi.
Tatlong format, isang pili. Ipinapakita ng bawat swatch ang HEX, RGB, at HSL nang sabay. Hindi ka mag-re-sample para palitan ang format — ang parehong kulay ay nakaupo na roon sa tatlo, bawat isa may sariling copy button.

HEX, RGB, HSL — alin ang kokopyahin

Sila ay tatlong paraan ng pagsulat ng parehong kulay, at ang tama ay depende sa kung saan ito papunta.

HEX (#3A7BD5) ang default para sa web — CSS, karamihan ng design tool, brand doc. Compact at unibersal na maipe-paste. Kopyahin ito maliban kung may dahilan kang hindi.
RGB (rgb(58, 123, 213)) ay binabaybay ang red, green, at blue channel. Kapaki-pakinabang kapag ang tool ay gustong channel value, kapag kailangan mo ng alpha (rgba), o kapag iniisip mo kung paano hinalo ang kulay.
HSL (hsl(215, 65%, 53%)) ay inilalarawan ang hue, saturation, at lightness. Ito ang aabutin kapag gusto mong i-adjust ang kulay sa halip na gamitin lang muli — itulak ang lightness para sa hover state, hilahin pababa ang saturation para sa muted na variant, panatilihin ang hue at bumuo ng scale.

Isang tapat na limitasyon, at isang kapatid na tool

Ito ay point sampler: ang bawat click ay nagbabasa ng isang pixel. Sa malinis na logo o flat na UI iyon mismo ang gusto mo. Sa maingay na litrato — grain, gradient, JPEG artefact — ang dalawang magkatabing pixel ay maaaring magkaiba, kaya pumili mula sa flat na lugar at gamitin ang loupe para maiwasan ang pagtuntong sa outlier. Walang average-of-a-region na brush dito.

At kung ayaw mong pumili nang kamay, may hiwalay na palette tool ang img.diy na nag-i-scan ng buong larawan at nagbibigay sa iyo ng nangingibabaw na kulay nito nang awtomatiko. Ang dalawa ay sumasagot ng magkaibang tanong. Ang palette tool ay nagsasabi sa iyo kung anong mga kulay ang bumubuo sa larawang ito; ang color picker ay nagpapayang ituro mo ang isang tiyak na pixel — ang eksaktong puntong ito sa logo, ang isang button na iyon — at kunin ang halaga nito. Abutin ang palette tool para ibuod ang larawan, at ang isang ito kapag alam mo na ang puntong gusto mo.

Mag-load ng larawan, mag-hover para hanapin ang pixel, mag-click para itago ito, kopyahin ang format na kailangan mo.

Bakit IMG.DIY

Magnifier loupe

Nag-zoom-in para ma-click mo ang eksaktong pixel.

HEX / RGB / HSL

Bawat na-save na kulay sa tatlong format.

One-click na kopya

Kopyahin ang kahit anong value diretso sa clipboard.

Pribado

Ang mga pixel ay binabasa nang lokal — walang upload.

FAQ

Pwede ba akong pumili ng ilang kulay?

Oo. Ang bawat click ay nagdadagdag ng swatch sa listahan, kaya makakakuha ka ng buong set mula sa isang larawan at kopyahin ang mga ito paisa-isa.

Para saan ang loupe?

Ini-magnify nito ang lugar sa ilalim ng iyong cursor para makaladlad ka sa tumpak na pixel, na mahalaga para sa manipis na linya o magulong larawan.

Nagbibigay din ba ito ng HSL?

Oo — ang bawat swatch ay nagpapakita ng HEX, RGB at HSL, bawat isa ay may sariling copy button.

Ina-upload ba ang larawan?

Hindi. Ang mga kulay ay binabasa mula sa larawan sa iyong device; walang ipinapadala sa server.

Puwede ba akong pumili ng ilang kulay mula sa parehong image?

Oo. Bawat click ay nagse-save ng isa pang swatch, kaya makakagawa ka sa buong image at makakabuo ng listahan — ang primary ng logo, ang accent nito, ang text color — tapos ikumpara at kopyahin sila nang sunod-sunod nang hindi nire-reload ang image.

Para saan ang magnifier loupe?

Pinapalaki nito ang mga pixel sa ilalim ng iyong cursor para makarating ka sa eksaktong gusto mo. Sa isang matigas na gilid, ang katabing pixel ay kadalasang anti-aliased na halo ng dalawang kulay, at ipinapakita ng naka-zoom na view na nasa solidong kulay ka at hindi sa malabong hangganan bago ka mag-click.

Kailan ko gagamitin ang HSL value sa halip na HEX?

Hinahati ng HSL ang kulay sa hue, saturation, at lightness, na ginagawa itong format na aabutin mo kapag gusto mong i-adjust sa halip na kopyahin — paliwanagin ang kulay para sa hover state, ibaba ang saturation para sa muted na variant, o hawakan ang hue at bumuo ng scale. Para sa plain na muling gamit sa CSS, mas simple ang HEX.

Ina-upload ba kahit saan ang aking image?

Hindi. Binabasa ang image sa isang canvas sa loob ng iyong browser at hindi kailanman ipinapadala sa server. Walang sign-up, at kapag na-load na ang pahina makakapili ka ng kulay nang naka-off ang network, kaya nananatili sa iyong device ang isang pribadong screenshot o mockup.

Kaugnay na tool

Mga gabay at tip

Paano Kumuha ng Kulay Mula sa Screenshot (2026)Paano Kunin ang Hex Color Code Mula sa Isang Imahe (2026)Paano Ituwid ang Nakahilig na Litrato — Nang Walang Puting Gilid Ang Retro Date Stamp: Estetika ng Film Camera, Ginawa nang Tama

From input to result