像素級的救命稻草：Color Picker 如何幫我在一個下午搞定朋友的 UI 取色

Color Picker 是什麼

Color Picker 是一款專門在手機上做色彩提取的工具軟體。顧名思義，它的核心能力就是「取色」——打開一張圖，手指點哪裡，它就把那一點的顏色以 HEX、RGB、HSL 等多種格式吐出來；還能開相機對準物體或螢幕即時取色，把讀到的顏色存進自訂色卡庫，下次隨時調用。

這款應用在 Google Play 上架已近十年，下載量超過一萬次，評分約 4.2 分，體積不到 7 MB。對普通人來說它也許只是個沒必要裝的工具，但對設計師、前端開發、甚至喜歡折騰配色的業餘玩家來說，Color Picker 是把「顏色從畫面上扒下來」這件事變得無比簡單的利器。

安裝

拿到 Color Picker下載 的安裝包主要有兩條路徑。最省心事的做法是從 Google Play 商店直接安裝——能正常訪問 Play 商店的手機，搜尋「Color Picker」後認準包名 gmikhail.colorpicker（開發者 Mikhail Gribanov）下載即可，之後隨商店自動更新，不用管版本號。

但不少國產或定製系統出廠就沒帶 Play 商店，Google 賬號也登不上去。這種情況下只能走網盤安裝包的路：從本站獲取安裝包分享頁，先轉存到自己的網盤，再下載 APK 到手機存儲。安裝時系統會提示「未知來源」，到設定裡放行一次就行——網盤裡目前是 10.0.1 版本，體積約 6.35 MB，比商店最新版（11.1.1）早半個月左右，界面與功能細節可能略有差異，但核心取色流程不受影響。

裝完首次啟動時，應用會申請相機與存儲權限。相機權限是即時取色必需的，拒絕後相機取色不可用，但圖片取色完全不受影響，之後想補開也能在手機權限設定裡單獨打開。存儲權限用於讀取圖片和保存截圖，按需申請、不會強制索取。

那個周末的下午

事情是這樣的——上週五晚上，我那做獨立 App 的朋友丟來一張微信截圖。不是什麼重要的對話，是他新產品的一頁 UI 設計稿，從 Figma 截下來的。他說設計師跑了，留下這張圖和一句「按這個配色來」，但截圖裡色值標得七零八落，按鈕的綠色、背景的灰、頂部導航的藍，全都沒寫 HEX 值。他讓我週末幫他把色值補齊，不然他後端介面寫完了前端卡在配色上動不了。

我第一反應是用電腦的取色器——但那晚我正好在外面，筆電沒帶，只有手機。正準備跟他說等週一再說，突然想起上次裝在備用機上的 Color Picker。

截圖取色：原來這麼簡單

我讓朋友把那張設計稿截圖直接丟到微信，然後在手機上打開 Color Picker。進到主界面，底部有三個大按鈕：相機取色、圖片取色、歷史記錄。點「圖片取色」，跳到手機相簿，選剛收到的那張截圖。

載入後，畫面上顯示完整的設計稿。我雙指放大到能看見像素格子的程度——Color Picker 的放大精度可以到像素級，這點很關鍵，因為 Figma 截圖經過微信壓縮後會有輕微的色值偏移，像素級對準才能讀到最接近設計師原始值的 HEX。

按鈕的綠色是最容易的部分——放大後按鈕中間是完全平坦的純色區，取色框對準中心，HEX 值 #34C759 立刻跳出來。頂部導航的藍色稍微麻煩一點，截圖裡那塊有淺淺的漸層，我取了漸層中間偏上的平坦區域，讀到 #2196F3——後來回頭查 Material Design 的色號，這正是標準的藍色 500。

背景的灰色就棘手了。截圖經過微信壓縮，灰色區域摻了不少雜訊，取色框在不同位置讀出來的值相差好幾個位元。我想起 Color Picker文檔 裡提到的技巧——放大到像素級後找連續 10×10 像素以上完全一致的區塊，那才是設計師真正想要的顏色。耐心找了一會兒，終於在設計稿左上角的 logo 旁找到一塊乾淨的灰色，讀值 #F5F5F5。

我把每個讀到的顏色都點一下「加入色卡」，手機震動一下就存進了預設色卡組。後來回到家打開電腦，打開 Color Picker 的本地網頁伺服器功能——這是它最極客的一個功能，能把手機讀到的色值以 JSON 格式即時推送到同一個 Wi-Fi 裡的電腦。我在電腦瀏覽器打開應用給的那個區域網路地址，頓時看到所有收藏的顏色以結構化 JSON 列出來，直接複製貼進朋友的專案設定檔，前後不到五分鐘。

事後想一想

這個場景讓我對 Color Picker 的評價從「一款還不錯的取色工具」變成了「在手機上就能把顏色的事情辦乾淨的小能手」。大多數人對取色工具的印象還停留在電腦端的 Photoshop 取色器或者瀏覽器擴充功能，但手機上的取色需求其實很常見——朋友圈看到一張海報想知道配色、App 界面想扒下一個按鈕顏色、甚至想把沙發的顏色對準某個色卡號碼，這些場合掏出手機比開筆電方便得多。

Color Picker 做得好的地方在於它的取色精度和輔助信息足夠細。除了 HEX，它同時顯示 RGB、HSL、HSV、CMYK 四種格式，甚至能自動匹配標準色名——比如我取到的那個綠色，它告訴我這是 Apple 的系統綠 systemGreen，那個藍色是 Material Blue 500。這些額外信息對寫代碼的人來說直接省了一次上網查詢。

當然它也不是沒有缺點。廣告比較頻繁、內購去廣告要價 4.99 美元確實不便宜；相機取色在光線複雜的環境下讀值會跳動，只能當參考；JSON 流功能只在區域網路內有效，公共 Wi-Fi 裡不敢開。但回到我那個周末的場景——手機上、沒有筆電、只有一張微信截圖——這些缺點全都不存在，它完美地完成了任務。

後來我把那張截圖還給朋友的時候，附了一行備註：「以後設計師跑了記得截圖存 PNG，微信壓縮會把色值弄亂。」朋友回了一串哈哈，然後問我 Color Picker 叫什麼名字，他也要裝一個。

本文为个人基于网络公开资料整理编写，非官方内容，仅供学习交流参考；软件版权归原作者所有，请支持正版；使用过程中遇到问题请查阅官方渠道，本文不承担任何责任。