當設計中有想重複使用的顏色時，靠目測猜測既慢又不一致。圖片取色器會讀取你選擇的像素，並回傳 HEX、RGB 和 HSL 值。開啟圖片取色器，載入照片或螢幕截圖，點擊顏色後複製需要的值。
工具會在瀏覽器中讀取圖片，支援 JPG、PNG 和 WebP；當精確位置難以點選時，可以放大畫布。你可以用滑鼠點擊或使用鍵盤操作，每次只有一個取樣色票處於啟用狀態。
圖片取色器可以做什麼？
工具會擷取指定像素，並轉換成常見格式：
- HEX 適合 CSS、網頁設計和設計 token。
- RGB 適合需要紅、綠、藍通道值的流程。
- HSL 方便理解色相、飽和度和明度。
點擊另一個位置即可替換目前取樣，然後複製新值。這適合比對背景、檢查產品照片，或將螢幕截圖中的顏色轉成可重複使用的樣式值。
如何在線上從圖片選取顏色
1. 選擇清楚的來源圖片
可以的話使用原始照片或高解析度螢幕截圖。壓縮縮圖、模糊預覽或套用色彩濾鏡的圖片，可能已經改變你想重現的精確顏色。
2. 開啟線上取色器
開啟圖片取色工具，選擇 JPG、PNG 或 WebP。取樣在瀏覽器中處理，不需要為了讀取像素而上傳到伺服器。
3. 點擊目標像素
點擊想確認顏色的區域。純色背景要避開邊緣和陰影；產品或插圖則應選擇代表性的區域，不要選高光、反射或反鋸齒邊界。需要時先放大畫布。
4. 複製色碼
需要 CSS 顏色時複製 HEX；如果下一個工具或設計系統要求，則使用 RGB 或 HSL。將值貼到程式碼、設計檔、品牌筆記或樣式變數，再到實際使用的位置確認。
如何取得更可靠的顏色取樣？
照片中的可見顏色會受到光線、陰影、反射、壓縮和螢幕影響。單一像素只會提供該點的值，不能自動還原可能因攝影或調色而改變的原始品牌色。
平面圖形應選擇填色均勻的中央區域。照片則可從同一材質取多個樣本比較。避開邊緣、反鋸齒文字和有強烈反光的表面。
如果圖片太大，可以用圖片縮放器建立工作副本，但要保留原始檔。若有干擾性的邊框，先使用圖片裁剪器。
HEX、RGB 還是 HSL：應該用哪個？
網頁樣式使用 HEX
HEX 簡潔，常見於 CSS、設計 token 和文件。像 #2F80ED 這樣的值可以直接貼入樣式表。
通道和透明度使用 RGB
RGB 會分開顯示紅、綠、藍通道，適合比較通道或搭配獨立透明度延伸成 rgba()。
受控變化使用 HSL
HSL 將色相、飽和度和明度分開，方便在保持基本色相的同時建立更亮背景、柔和邊框或更深的滑鼠懸停狀態。
常見取色錯誤
取到陰影而不是底色
陰影可能讓中性色表面變灰，或讓有色表面看起來更深。請選擇光線充足且具代表性的區域，並比較附近像素。
選擇邊緣像素
邊緣可能因反鋸齒或壓縮而混入其他顏色。將取樣位置移到物件或背景中央。
使用套用螢幕濾鏡的截圖
夜間模式、HDR、色彩設定檔和瀏覽器擴充功能都可能改變顯示效果。顏色重要時，請使用原始檔或未修改的截圖。
把單一樣本當成完整色盤
取色器只會識別點擊的顏色並保留一個啟用色票，不會自動推測完整色盤。請逐一取樣主要顏色，並記錄背景、文字、邊框或強調色等角色。
忘記實際使用情境
顏色放在不同背景或不同螢幕上可能看起來不同。請在實際頁面、元件、廣告或設計檔中測試，並檢查對比和可讀性。
簡單的設計交付流程
- 保留原始照片或截圖作為參考。
- 分別取樣背景、主要主體、文字和強調色。
- 為每個 HEX 值記錄清楚的角色。
- 實作或建立變化時，按需要使用 RGB 或 HSL。
- 發佈前檢查對比、滑鼠狀態和最終顯示尺寸。
取樣完成後才使用圖片壓縮器。如果目的地支援，可以將最終副本轉為PNG 轉 WebP，但要保留來源以便未來檢查顏色。
常見問題
如何從圖片選取顏色？
開啟圖片取色器，選擇 JPG、PNG 或 WebP，點擊目標像素，然後複製 HEX、RGB 或 HSL 值。
如何從圖片找到 HEX 色碼？
將圖片載入圖片 HEX 取色工具，點擊代表性像素並複製顯示的 HEX 值。
可以從螢幕截圖取色嗎？
可以。螢幕截圖和其他支援圖片一樣可以取樣。為了接近原始色彩，請使用未壓縮截圖並避開邊緣、陰影和螢幕濾鏡。
可以選取多個顏色嗎？
可以，但一次只有一個色票處於啟用狀態。選擇下一個位置前，先複製或記錄目前的值。
取色器是否私密？
頁面載入後，像素讀取會在瀏覽器中執行。讀取顏色不需要將圖片上傳到伺服器。
繼續使用圖片工具
需要從照片或截圖取得顏色值時，使用圖片取色器。使用圖片裁剪器移除邊框，用圖片縮放器準備工作副本，再用圖片壓縮器準備最終檔案。