圖片顏色選擇器是一款免費、僅在瀏覽器中運作的圖片取色工具替代方案,能讀取圖片中任何像素的精確 HEX 與 RGB 值,無需安裝軟體或上傳檔案。由於圖片會繪製到您自己瀏覽器分頁內的畫布上,讀取動作完全在您的裝置上透過標準網路技術在本機執行,因此您點擊的像素就是被測量的像素 —— 即使在手機上圖片已被縮放以符合螢幕大小也一樣。您可以同時並列查看這兩種色彩格式、一個能讓您一眼確認的即時色塊、一個一鍵複製 HEX 碼的按鈕,以及一段最近的選色記錄,讓您在決定正確色彩之前能比較多個樣本。這個工具支援您瀏覽器已能辨識的常見格式,包括 PNG、JPEG、WebP 與 GIF,無論您是從標誌、螢幕截圖、相片或掃描的藝術作品中取色,工作流程都相同。對於大多數日常的取色工作來說,這涵蓋了設計師或開發人員在線上工具中真正需要的一切 —— 而且全程不會將圖片的任何一個位元組傳送到遠端伺服器。
最後這一點正是人們一開始搜尋替代方案的原因,也是讓瀏覽器本機工具與市面上所有其他選項有所區隔的關鍵所在。

為什麼人們會搜尋圖片顏色選擇器的替代方案
市面上大多數的顏色選擇器可歸入三類之一:桌面軟體、瀏覽器擴充功能,或需要上傳的網站。每一種都有其令人卻步的痛點,促使人們尋找其他方案。
- 像 Photoshop 這類的桌面應用程式功能強大,但需要付費、啟動時間長,還會將您綁定在特定的作業系統上。
- 瀏覽器擴充功能可以從任何分頁擷取顏色,但通常需要廣泛的權限,而且不一定能與您從磁碟載入的檔案格式順暢配合。
- 需要上傳的網站是最常見的選項,也是最令人困擾的:您必須將圖片交給第三方,等待上傳完成,還常常得看完一則廣告,並祈禱檔案大小上限不要比您的圖片還低。
圖片顏色選擇器透過完全在您的裝置上執行,迴避了上述三種問題。沒有安裝、沒有擴充功能、沒有上傳,也無需等待遠端伺服器處理任何事情。您開啟頁面、選擇檔案,就能立刻開始點擊像素。
如何使用這個瀏覽器工具選色
整個工作流程圍繞著四個簡短的步驟,每一個步驟都是您可以在畫面上自行驗證的,而不是只能依賴一個黑盒子來完成。
- 點擊 瀏覽檔案,從您的裝置中選擇一張圖片 —— 它會立即載入,而且永遠不會離開您的瀏覽器。
- 將游標移到圖片上即時預覽顏色,然後點擊任何像素以鎖定您想要的那個顏色。
- 讀取顯示在即時色塊旁的精確 HEX 與 RGB 值。
- 點擊 複製 將 HEX 碼放入剪貼簿,或點擊其他像素進行比較 —— 您最近的選色會儲存在歷史紀錄區中。
那個歷史紀錄區是大多數替代方案都缺少的部分。當您在配對品牌色調、建立情緒板,或嘗試重現參考設計時,您很少只需要一種顏色 —— 您需要從同一張圖片中取出三個、五個或十個顏色。最近選色區讓您一次就能擷取所有顏色,稍後再決定哪一個才是正確的起點。
這個工具與其他選項相比的定位
本機瀏覽器工具、需要上傳的工具,以及完整的桌面軟體之間的差異並不明顯。下方表格整理了各項權衡,協助您為眼前的工作挑選合適的方法。
| 方法 | 需要安裝 | 需要上傳 | 檔案大小限制 | 需要帳號 | 手機上的像素精確度 |
|---|---|---|---|---|---|
| 圖片顏色選擇器(瀏覽器,本機) | 否 | 否 | 您這端沒有限制 | 否 | 是 —— 點擊位置會對應回原始像素 |
| 需要上傳的線上選擇器 | 否 | 是 —— 上傳到遠端伺服器 | 通常有上限 | 有時 | 鮮少處理得當 |
| 瀏覽器擴充功能滴管 | 一次性安裝 | 否 | 視分頁內容而定 | 有時 | 因瀏覽器而異 |
| 桌面設計應用程式 | 是 —— 付費 | 否 | 幾乎沒有限制 | 是(授權) | 無法在手機上使用 |
對於大多數日常的取色任務 —— 從標誌中挑選品牌色、從螢幕截圖中擷取強調色,或是將布料色樣與產品照片進行比對 —— 本機瀏覽器方案能以零額外負擔達到相同的結果。
為設計師、開發人員與攝影師量身打造
不同的工作流程會以略為不同的方式使用這個工具,圖片顏色選擇器的設計也反映了這一點。
設計師會使用它從客戶標誌中擷取主要色與強調色,並直接將 HEX 貼到樣式表、Figma 檔案或 Adobe 文件中。從同一張來源圖片取樣三到四個色調,就能在不用猜測數值的情況下獲得一個平衡的起始色盤。
網頁開發人員則擷取背景、按鈕、邊框和 CSS 漸層的數值,讓重建後的頁面能與原始設計稿像素級一致。由於 HEX 碼一鍵即可複製,從「我看到了這個顏色」到「變數已設定」只需要一次點擊加上一次貼上。
攝影師與修圖師透過取樣畫面中已知的參考點來檢查膚色、天空漸層與中性灰。這個讀取值會成為後續白平衡、調色或選擇性色彩調整的目標值。
同一個工具能同時涵蓋這三種用途,是因為其底層動作 —— 讀取一個像素並回報兩種色彩格式 —— 是每個工作流程最終都會需要的那個動作。
預設即私密:本機畫布處理
當一個工具的全部工作就是檢視您的圖片時,隱私不是可有可無的附加功能。圖片顏色選擇器使用瀏覽器內建的 canvas API 開啟您的檔案,並在該畫布內讀取像素資料 —— 圖片從未離開開啟它的分頁。
這帶來了實際的後果:
- 機密的客戶設計稿、未公開的產品照片,以及敏感的參考圖片都會留在您的裝置上。
- 沒有上傳等待、沒有排隊,也不會因為遠端服務的介入而受到檔案大小上限的限制。
- 關閉分頁後,圖片的所有痕跡都會消失 —— 伺服器端沒有任何資料需要刪除。
這也是它與需要上傳的替代方案截然不同、而不僅僅是其更快版本的原因。信任模型被反轉了:不再是「把您的圖片傳給我們,並相信我們會忘記」,而是「圖片從一開始就沒有去任何地方」。
檔案支援與像素精確度
這個工具支援您瀏覽器已能辨識的常見網頁格式,包括 PNG、JPEG、WebP 與 GIF,因此螢幕截圖、相片、掃描的藝術作品與下載的參考資料都能直接開啟,無需轉檔。如果您需要先轉換格式,本機的 WebP 轉換器或其他格式工具可以讓您直接取得可拖入的 PNG 或 JPEG 檔案。
精確度是最重要的部分。圖片會以完整保真度繪製到畫布上,因此您點擊的像素就是被讀取的像素 —— 即使在手機上圖片已被縮放以符合螢幕大小也一樣。這個工具會仔細地將您的點擊位置對應回底層的圖片,讓讀取值在任何縮放層級或顯示器尺寸下都保持準確。這就是讓一個值得信賴的 hex 碼,與一個偏差幾個亮度值的 hex 碼之間產生差異的關鍵細節。
在少數情況下,如果您需要從圖片中擷取每一個主要顏色,而不是一次只點擊一個像素,可以使用圖片顏色萃取器自動產生色盤。圖片顏色選擇器適合精確的單像素讀取;若您想要快速掌握整張畫面的概覽,則適合使用萃取器。
如果您正在權衡各項選項,圖片旋轉替代方案:在瀏覽器中進行本機無失真旋轉對此有詳細說明。
如果您正在權衡各項選項,透過單一私密檢視器讀取多張圖片的 EXIF對此有詳細說明。