影像中使用的顏色是透過對個別像素進行取樣並讀取其 HEX 與 RGB 值來識別的，這些數值代表影像中每個像素精確的紅、、藍以及十六進位組成。每張數位照片都是一個由像素組成的網格，而每個像素都帶有三個數值通道，組合後便形成可見的色調。彩色影像被定義為三張對應紅、、藍三原色的單色影像所組成，它們共同創造出你在螢幕上所看見的完整光譜。若想找出任何圖片中出現的顏色，你可以將影像載入像素取樣器中，點擊想要檢視的區域，然後讀取產生的色碼。Image Color Picker 能在你的瀏覽器中處理整個流程，無需上傳，每次點擊都會回傳即時的 HEX 值與對應的 RGB 三元組。
為什麼你需要識別圖片中的色
設計師、開發人員以及一般創作者經常需要知道影像中的精確顏色。配對品牌色票、在向量軟體中重製 logo、建立與照片搭配的網站，或是從房間照片中擷取油漆顏色，這一切工作都從同一個問題開始：這個像素的精確色調是什麼？
用肉眼判斷顏色並不可靠。兩種藍色在幕上看起來幾乎相同，但其 RGB 通道可能相差數十個單位。當目標是精準時，對實際像素進行取樣絕對勝過猜測。設計師從照片中擷取主色作為首頁主視覺、插畫家將角色色票與背景媒合、工藝愛好者將布料樣本轉換為油漆代碼，這些工作都仰賴精確的取樣工具，一次就能得到正確答案。
顏色取樣也有助於無障礙設計。讀取背景與前景的 RGB 通道可以讓你計算對比值，並確認文字是否依然清晰易讀。無論理由為何，一個快速且注重隱私的取色器都是實用的起點。
Image Color Picker 如何解決這個問題
Image Color Picker 是一個單頁工具，可在瀏覽器分頁中載入你的影像。不會上傳任何內容到伺服器，因此家庭照片、客戶 mockup 以及機密的品牌素材都能保持完全隱私。一旦圖片進入畫布，將游標移至其上即可即時預覽游標所在位置的顏色。點擊後即鎖定該取樣，並顯示精確的 HEX 代碼以及對應的 RGB 三元組，同時附上一個反映所選色調的色塊。
最近的取樣會保留在歷史記錄列中，方便你在不遺失工作進度的情況下比較多個選取結果。每個色碼都有複製按鈕，HEX 直接進入剪貼簿，可立即貼到 CSS、Figma、Photoshop、品牌色票或油漆配色需求單中。此工具支援 JPG、PNG、WebP、GIF、BMP 及大多數瀏器支援的格式，因此無論是螢幕截圖、掃描檔、匯出圖檔或原始照片，皆能透過相同流程進行取樣。
如何找出影像中使用的顏色
- 在瀏覽器中開啟 Image Color Picker 並點擊「覽檔案」。從你的裝置中選擇圖片。影像會立即在畫布上呈現，且永遠不會離開你的電腦。
- 將游標緩慢移過圖片。即時預覽會顯示游標下方的顏色，讓你能精準定位到想要的像素。
- 點擊你想要鎖定的像素。色塊會更新為該顏色，HEX 與 RGB 值會顯示於其旁。
- 點擊「複製」將 HEX 代碼放入剪貼簿，然後貼到你的設計檔案、樣式表或筆記中。
- 點擊另一個像素以取樣第二種顏色。每一次新的選取都會儲存於歷史記錄列中，方便你在同一工作階段內進行比較與回顧先前的選擇。
理解你所看到的 HEX 與 RGB 值
此工具所顯示的每個顏色皆以兩種標準色彩模型描述。RGB 以 0 到 255 的數字列出紅、綠、藍三個通道，這正是螢幕實際發光的方式。HEX 則是以 16 進位表示相同資訊，並以井字號 (#) 開頭，這是 CSS、HTML 以及大多數設計軟體所採用的格式。
舉例來說，HEX 值 #3A7BD5 對應的 RGB 三元組為 (58, 123, 213)。第一組 3A 以 16 進位表示，等於十進位的 58。第二組 7B 等於 123。第三組 D5 等於 213。透過這個單一的轉換，你可以讀懂任一種表示方式並得到相同的顏色，這在工具、印表機或油漆供應商要求某種格式，而你的檔案卻是另一種格式時特別實用。
在選色時請記住，螢幕是以加法方式呈現 RGB。RGB 為 (0, 0, 0) 的像素是純黑，而 (255, 255, 255) 則是純白。三個通道的數值相同會產生中性灰，提升其中一個通道則會使結果偏向該色調。設計師仰賴這種關係，透過可預測地調整通道來加深、變淺或為取樣顏色添加色調。
取得更乾淨顏色讀數的訣竅
照片與向量圖形的色彩壓縮方式不同。JPG 預設每通道儲存 8 位元色彩，對網頁而言已相當充足，但也意味著你所取樣的精確像素可能在任一方向上與原始來源相差一個單位。PNG 檔案保留無失真色彩，因此當需要像素級精準取樣時，它們是最忠實的參考依據。
盡可能在取樣前先放大影像。縮圖會隱藏細微的邊界，點擊兩個區域之間的漸層可能會回傳一個混合後的平均值，而該值並不符合任何一個目標顏色。請使用影像的高解析度匯出檔，或在使用壓縮來源時，搭配 Image Resizer 產生放大版本，讓每個像素佔據更多螢幕空間。
與其依賴單次點擊，不如對一個區域進行多點取樣。若你想要天空的主要藍色，請從天空的不同部位取樣五次，並在心裡平均其 HEX 值，或使用歷史記錄列確認色一致。若要追蹤品牌色，請同時對 logo 最亮與最暗的可見部分進行取樣，以了解你所需掌握的色彩範圍。
將取色與其他影像任務搭配使用
取色很少是工作流程的終點。多數使用者會將取色與以下三種後續任務搭配使用。首先，設計師在從圖片中擷取色票後，常需要將影像縮減為適合網頁的尺寸，這時可以參考關於如何為網頁壓縮影像的指南。其次，任何需要將照片對應至印刷尺寸或社群媒體模板的使用者，會希望在取樣前先透過 Image Resizer 調整尺寸，讓畫布能反映最終的擺放位置。第三，當參考影像包含透明度或多層元素時，使用 WebP Converter 轉換格式可讓重複取樣更加迅速，因為 WebP 檔案載入快速且在瀏器中呈現穩定。
比較 Image Color Picker 與手動方法
設計師有時會試圖用肉眼從螢幕上讀取顏色，或透過 Photoshop、Illustrator、Figma 內建的系統滴管工具來取色。這些工具雖然能用，但各自都有其代價。系統滴管一次只能擷取一種顏色、需要來源應用程式處於開啟狀態，且難以輕鬆比較多筆樣本。當你需要快速、注重隱私且不受格式限制的解答，又不想開啟龐大的編輯軟體時，瀏覽器式取樣會比上述兩種方法都更勝一籌。
| 方法 | 執行環境 | 隱私性 | 支援任何格式 | 多重取樣歷史 |
|---|---|---|---|---|
| Image Color Picker | 瀏覽器分頁中 | 影像絕不離開裝置 | JPG、PNG、WebP、GIF、BMP | 支援，內建歷史記錄列 |
| Photoshop 滴管 | 桌面應用程式 | 本機檔案 | 大多數點陣圖格式 | 僅透過色票面板 |
| 系統選色器 | 作業系統層級工具 | 本機螢幕截圖 | 螢幕上所顯示的任何內容 | 無 |
對大多數日常的顏色識別工作而言，瀏覽器內建工具是從影像到可用色碼最快速的途徑。它也能完美融入已包含 Image Cropper 用於裁切參考區域，以及 Image Compressor 用於在上傳前縮減最終資產的工作流程中。
常見的取色情境
從 logo PNG 中擷取品牌色並貼到 CSS 變數中，是最常見的使用情境之一。從情緒板圖片中取樣多個色塊，為新的登陸頁建立配色是另一種情境。攝影師若想讓印刷品或畫布與螢幕上某個特定色調一致，會使用取色器擷取原始 RGB，然後將該色碼交給印刷廠。工藝愛好者將布料或油漆樣本轉換為數位值則是反向操作，從數位參考影像取樣，找出最接近實體媒材的對應色。
打造無障礙介面的開發人員仰賴像素取樣來確認文字與背景之間的對比。將扁平插畫重製為向量的設計師，必須擷取每一個命名色而不僅僅是一個，因此歷史記錄列便成為一份快速的參考清單。在所有情況下，工作流程都是相同的：載入、懸停、點擊、複製。
隱私與效能注意事項
由於 Image Color Picker 透過標準 File API 與 canvas 元素在瀏覽器中渲染影像，檔案永遠不會經過網路傳輸。這對於客戶工作、未發布的產品以及個人照片而言非常重要。關閉分頁時，影像便會從記憶體中釋放。沒有帳號、無需註冊，也不會在你的原始檔案上加入浮水印。
對於非常大的影像，取樣依然保持流暢，因為瀏覽器會將解碼後的影像直接交給 canvas，而無需透過伺服器進行重採樣。若你的檔案過大而無法順暢載入，請先透過 Image Compressor 進行處理，以在減少瀏覽器需解碼位元組的同時維持視覺品質。壓縮後的副本取樣結果完全一致，因為在視覺相同的區域中，壓縮不會使每個通道的像素值偏移超過一個單位。
若想深入了解，請參閱 如何在 Canva 中裁切影像：完整指南。
若想深入了解，請參閱 如何水平或垂直翻轉影像。
若想深入了解，請參閱 如何找出影像中的每一種顏色（精確的 HEX 與 RGB）。