圖片取色器使用方法
- 把想查顏色的圖片拖曳進來，或點一下選擇檔案。螢幕截圖也可以直接按 Ctrl+V 貼上。
- 在圖片上移動滑鼠，游標下方的顏色會即時顯示。在想要的位置點一下，就會鎖定顏色並加入紀錄。
- 點 HEX、RGB、HSL 按鈕，即可複製該格式的色碼。
- 在下方的代表色區塊查看整張圖片的主要顏色與各自所佔的比例。
如何找出照片中的色碼
數位圖片由許多小點（像素）組成，每個像素都以 0～255 的數字記錄紅（R）、綠（G）、藍（B）三種光的強度。這個工具會直接讀取你點選位置的像素 RGB 值，並以下列格式顯示：
| 格式 | 範例 | 常見用途 |
|---|---|---|
| HEX | #2563EB | 網頁（CSS）、在 Figma 或 Photoshop 輸入顏色 |
| RGB | rgb(37, 99, 235) | CSS、程式設計、影片剪輯 |
| HSL | hsl(221, 83%, 53%) | 調整色相、飽和度、亮度時 |
即使是同一個物體，照片中的像素也會因為光線和壓縮而有些微色差。如果需要像商標那樣精準的顏色，請挑選面積最大、顏色最平均的區塊。若要轉換成其他格式（例如 CMYK），可以使用色碼轉換工具。
圖片代表色（調色盤）的擷取原理
代表色的計算方式是從整張圖片平均取樣數千個像素，再用 k-平均（k-means）分群把相近的顏色歸成一組。工具會算出每一組的平均顏色，並依照該組在圖片中所佔的比例由大到小排列。透明的部分不列入計算。
想替網站、簡報或社群貼文決定配色時，代表色是很好的起點。比例最高的顏色適合當背景色，第二、第三個顏色可以當強調色，做出來的設計就會跟照片很搭。數量設得越多，就能分出越細緻的顏色。
用螢幕截圖查出網站或 App 的顏色
- 在想查顏色的畫面上，Windows 按
Win + Shift + S，Mac 按Cmd + Shift + 4，擷取需要的範圍。 - 回到這個頁面按
Ctrl + V（Mac 按Cmd + V），截圖就會直接開啟。 - 點一下想查的按鈕或文字，然後複製色碼。
截圖的顏色可能會因為螢幕色彩設定、深色模式或瀏覽器縮放，跟原始設計值有些微差異。如果需要品牌色這類精確數值，請以原始設計檔或官方品牌規範為準。
取色小技巧
- 避開邊緣：文字或圖形的邊緣常有反鋸齒造成的混色，點在色塊中央會比較準確。
- 優先使用 PNG：JPG 壓縮會讓顏色產生雜訊，有 PNG 原圖時盡量用 PNG。
- 善用紀錄：可以連續點選多個顏色，紀錄會保留在下方，方便比較或一次複製。
- 一次複製整組調色盤：按「複製調色盤所有 HEX 色碼」，就能把所有代表色以逗號分隔貼到設計軟體或筆記裡。
常見問題
圖片會上傳到伺服器嗎？
不會。圖片只在瀏覽器內的畫布（canvas）中讀取，不會上傳到外部，所以私人照片或還在製作中的設計稿也能放心使用。
手機也能取色嗎？
可以。用手指點一下圖片，就會選取該處的顏色。如果要選的區域很小，可以先把畫面放大後截圖再上傳，會選得更準確。
取到的顏色跟設計軟體裡看到的數值不一樣？
照片壓縮（JPG）或色彩描述檔不同，可能讓數值相差 1～2 左右。點選大面積色塊的中央，或改用 PNG 原圖，就能減少誤差。
選過的顏色紀錄會保存嗎？
關閉頁面後紀錄就會消失。需要的色碼請先複製，另外保存。
可以取得 CMYK 色碼嗎？
這個工具提供 HEX、RGB、HSL 三種格式。需要 CMYK 時，可以先複製 HEX 色碼，再用色碼轉換工具轉換。