影像顏色選取器是一種瀏覽器工具，可以讀取照片、標誌或螢幕截圖中任何單一像素的精確顏色，並顯示出對應的 HEX 與 RGB 色碼，讓您可以直接複製到設計檔案或樣式表中。您從自己的裝置開啟圖片、移動游標到圖片上方，然後點選您需要的顏色位置。工具會立即顯示六位數的 HEX 色碼（看起來像 #3b82f6 的那種）以及 RGB 三元組（對應的紅、綠、藍數值），這樣您就不必猜測或目測色調。初學者只要想從標誌複製品牌色、從夕陽照片中擷取暖色調，或在不安裝 Photoshop 或註冊付費服務的情況下讓按鈕與模擬圖相符，就會使用這個工具。由於圖片是在本機瀏覽器畫布中開啟的，絕不會離開您的裝置，因此工作流程保持快速、私密且免費，而且您點選的像素就是被讀取顏色的那一個，即使影像已縮放以符合您的螢幕也一樣。
如何從影像中選取顏色
整個工作流程只需四個步驟，您不需要安裝任何東西或建立帳號。在任何現代瀏覽器中開啟 影像顏色選取器，然後依照下列步驟操作：
- 點選 瀏覽檔案 並從您的裝置中選擇一張影像。圖片會立即在您的瀏覽器中載入，絕不會離開您的電腦。
- 在圖片上移動游標，即可即時預覽游標所在位置的顏色。
- 點選任何像素即可鎖定顏色。影像旁的面板會顯示精確的 HEX 色碼、對應的 RGB 三元組，以及可供視覺比較的純色色塊。
- 點選 複製 即可將 HEX 色碼放入剪貼簿，或點選另一個像素將其加入最近使用顏色區，以便並列比較。
如果第一次嘗試沒有看到預期的色調，請慢慢地將游標移過該區域，並觀察即時色塊的更新。讀數會即時重新整理，所以慢慢地移動可以幫助您在確認前對準精確的像素。
HEX 和 RGB 是什麼意思（白話文說明）
您在螢幕上看到的每一個顏色，都是紅、綠、藍光以不同強度混合而成。RGB 值說明了該混合中每種顏色的比例，通常看起來像 rgb(59, 130, 246)。數字範圍從 0（代表沒有該顏色）到 255（代表全強度）。
HEX 色碼則是以更簡短的 16 進位格式書寫的相同資訊，更自然地適用於 CSS 和大多數設計應用程式。rgb(59, 130, 246) 會變成 #3b82f6。井字號後的前兩位數代表紅色，中間兩位代表綠色，最後兩位代表藍色。
使用顏色選取器時您不需要背誦這些。重點在於工具會為您讀取像素，並以兩種格式提供色碼，因此您可以根據專案需求貼上任何一種。網頁程式碼和大多數設計應用程式都接受 HEX；而處理原始色彩通道的軟體有時偏好 RGB。
初學者實際會在哪裡使用選取的顏色
用肉眼選色並不可靠，因此一鍵讀取很快就會成為日常創作任務中的習慣。下表列出了初學者在最初幾個專案中會遇到的最常見工作。
| 工作 | 顏色選取器的幫助 |
|---|---|
| 符合品牌色調 | 直接從公司標誌中取樣主要顏色，並將 HEX 色碼貼到您的樣式表或設計檔案中。 |
| 重現參考影像 | 從靈感圖片中擷取強調色，而不是用手動色環猜測。 |
| 為網站重新設計設定樣式 | 取得背景、按鈕、邊框和漸層的精確數值，讓重建後的頁面與原始模擬圖完全一致。 |
| 協調產品照片 | 從平鋪的產品照片中擷取布料、包裝或背景顏色，並以此建立協調的主題。 |
| 檢查照片色調 | 在修圖時確認膚色、天空漸層和中性灰色，讓照片保持真實感。 |
同樣的工作流程涵蓋了初學者在第一天所需的大部分內容，並能隨著您的專案越來越複雜而加以擴展。
為什麼您的影像會保留在您的裝置上
許多線上工具會在執行工作前悄悄將您的圖片上傳到遠端伺服器。這雖然可行，但會增加上傳等待時間、檔案大小限制，以及當圖片是機密模擬圖、未發布的產品照片或個人文件時真正的隱私疑慮。
影像顏色選取器完全跳過上傳步驟。您的影像由您自己的瀏覽器使用內建畫布開啟和解碼，像素讀取在本機電腦上進行。不會傳送到伺服器、不會儲存在雲端，也不需要登入。當您關閉分頁時，影像的所有痕跡都會消失。
本機處理方式也讓工具執行速度更快。沒有上傳佇列、沒有轉圈載入，也沒有遠端服務施加的檔案大小限制，因此您可以指向高解析度的螢幕截圖或大型照片，並立即取得讀數。對於每天要選取數十次顏色的設計師來說，這個小細節加總起來可讓例行工作明顯加快。
您可以在此工具中開啟的影像格式
您的瀏覽器能夠原生解碼的任何圖片都可直接載入，無需額外設定。以下列出初學者最常遇到的四種格式。
| 格式 | 常見用途 |
|---|---|
| PNG | 螢幕截圖、標誌，以及具有透明背景的影像。 |
| JPEG / JPG | 相機照片、網路影像，以及適合電子郵件的圖片。 |
| WebP | 檔案大小較小的現代網頁圖形。 |
| GIF | 動畫圖形的靜態畫格或簡單的線條藝術。 |
選擇您來源原本使用的格式即可；載入前不需要轉檔。如果之後需要轉檔（例如將標誌匯出為具有透明背景的 PNG），本機影像轉檔工具就能在不更改您剛選取之顏色的情況下完成。
第一次點選就取得更乾淨顏色的訣竅
一些小習慣可以讓讀數更準確，並避免您選錯色調：
- 慢慢地移過圖片，在游標移動時觀察即時預覽色塊。HEX 與 RGB 讀數會即時更新，因此您可以在點選前確認自己位於正確的區域。
- 避免物體的最邊緣。兩種顏色之間的一個像素邊界會傳回一個不代表任何一方的混合值。
- 從平坦的區域取色。按鈕、大型背景區塊和純色產品的顏色，比有紋理或雜訊的區域更乾淨。
- 使用最近使用顏色區，在決定要複製哪一個之前，並列比較兩到三個取樣結果。
- 編輯後重新取色。如果您在另一個工具中調整了影像，請重新載入並再次取色；讀數永遠反映您載入的檔案，而不是原始檔案。
一旦養成點選並將 HEX 貼到工作中的習慣，整個「符合這個顏色」的工作就會從五分鐘的手動尋找，縮短為您可以整天重複的快速動作。
如需更深入的說明，請參閱 純色影像產生器解析：運作原理。
如需更深入的說明，請參閱 SVG 轉 PNG 初學者指南：白話文逐步教學。