May nakita kang kulay na gusto mong gamitin muli — sa larawan, screenshot ng site na gusto mo, lumang logo na matagal nang wala ang source file — at kailangan mo ang aktwal na hex code, hindi hula. Ang pagtantiya sa mata ay hindi gumagana; nagsisinungaling ang mga monitor at ang "asul na iyon" ay talagang anim na bahagyang magkakaibang asul. Ang paghila ng palette diretso mula sa pixels ay nagbibigay sa iyo ng code na maidi-paste mo sa CSS, design tool, o brand doc.
Narito kung paano ito gawin, at paano makakuha ng palette na aktwal na magagamit sa halip na random na kumpol ng pixels.
Ano talaga ang ginagawa ng "pag-extract ng palette"
Sina-scan ng tool ang imahe at hinahanap ang mga kulay na pinakamahusay na kumakatawan dito — ang dominanteng tono kasama ang kapansin-pansing accent — tapos binibigyan ka ng bawat isa bilang hex code na kaya mong kopyahin. Sa halip na milyong indibidwal na kulay ng pixel, nakakakuha ka ng malinis na set (sabihin nating 5 o 8) na nagbubuod sa imahe.
Talagang kapaki-pakinabang ito para sa ilang karaniwang trabaho:
- Pagbawi ng brand colors mula sa logo o lumang asset kapag wala ka ng orihinal na spec.
- Pagbuo ng design palette mula sa larawang ang mood ay gusto mong itugma — landscape, kuha ng produkto, piraso ng sining.
- Pagtutugma sa umiiral na site o graphic na screenshot lang ang mayroon ka.
- Pagpili ng background o accent na nakikiharmonya sa imaheng ginagamit mo na.
I-drop ang imahe at basahin ang mga code:
Gamitin ang count control para makakuha ng magagamit na palette
Ang pinakamahalagang setting ay kung ilang kulay ang hihilahin mo. Ganap nitong binabago ang sagot.
- Mas kaunting kulay (3–5) ay nagbibigay sa iyo ng mahalagang palette — ang iilang tono na tumutukoy sa imahe. Ito ang kadalasang gusto mo para sa branding o design system, kung saan ang masikip na set ay feature, hindi limitasyon.
- Mas maraming kulay (8–12) ay kumukuha ng banayad na accent at gradient. Kapaki-pakinabang kapag mayaman at iba-iba ang imahe at gusto mo rin ang secondary na tono, o kapag pinag-aaralan mo kung paano eksaktong nabuo ang larawan.
Kung mukhang mali ang unang resulta — nangingibabaw ang isang shade, o ang accent na gusto mo ay na-merge palayo — iayos ang count at basahin muli. Ang larawang 80% langit ay magbibigay sa iyo ng maraming asul sa mababang count; itaas ang count para ilabas ang mas maliliit na pumpon ng kulay.
Pindutin para kopyahin — ang workflow na mahalaga
Ang pagbasa ng hex code at pag-type nito ang kung saan pumapasok ang mga error (#3A7BD5 laban sa #3A7BD6 at gumugol ka ng sampung minutong nagtataka kung bakit mali ang itsura). Sa Color Palette tool, ang bawat swatch ay kinokopya ang hex code nito sa pindot, kaya dumidiretso ka mula sa imahe patungo sa clipboard patungo sa iyong stylesheet nang hindi hinahawakan ang keyboard.
Isang praktikal na daloy:
- I-load ang imahe.
- Itakda ang count para tumugma sa trabaho — mababa para sa brand palette, mas mataas para mahuli ang accent.
- Pindutin ang bawat swatch na gusto mo; i-paste kung saan ito papunta.
- Kulang ang range? Igalaw ang count at kunin ang dagdag.
Pagbasa ng resulta gamit ang mata ng designer
Ilang bagay na sulit malaman para maayos na dumapo ang palette:
- Ang dominanteng kulay ay hindi palaging ang magamit. Ang larawan ng produkto sa puting background ay mag-uulat ng maraming puti o halos-puti. Tumpak iyon, pero ang kulay na aktwal mong pinahahalagahan ay ang produkto — itaas ang count para ilabas ito, o i-crop sa subject muna.
- May mas maraming kulay ang mga litrato kaysa sa itsura nila. Ang balat, anino, at repleksyon ay nagdaragdag ng tonong hindi mo namalayan. Ang mas mataas na count ay naglalabas ng mga ito; ang mas mababang count ay itinatago ang mga ito sa likod ng average.
- Portable ang hex. Bawat code na kinopya mo ay gumagana direkta sa CSS, Figma, Photoshop, Canva, o brand doc. Walang conversion na kailangan.
Bakit nananatili ito sa iyong browser
Ang buong extraction ay tumatakbo nang lokal — ang imahe ay binabasa at sinusuri sa iyong browser gamit ang Canvas, at hindi ito kailanman ina-upload sa server. Mahalaga iyon kapag ang "imahe" ay hindi pa nailulunsad na mockup, pribadong brand asset ng kliyente, o internal na screenshot na hindi mo dapat ipo-post sa random na web tool. Libre ito, walang kailangang sign-up, at pagkatapos ng iyong unang pagbisita, gumagana ito offline.
Kunin ang mga kulay, pindutin para kopyahin, i-paste kung saan sila dapat.