🎨圖片
圖片
🔒 本機處理圖片與檔案
點擊圖片上的任一位置，讀取該處的確切顏色。
圖片取色器會把照片或圖形載入瀏覽器，讓你點擊上面任一點，立即讀取該像素的確切顏色，同時以 Hex 色碼與 RGB 值呈現——適合從設計稿、照片或截圖中取得配色。
✅ 全部工具免費使用，不用登入。
📄
點擊選擇圖片，或將圖片拖曳到這裡
一次一張圖片
點擊圖片上任一位置以取樣該處顏色。
使用指引
- 上傳圖片。
- 點擊圖片上任一點，讀取該處確切像素顏色的 Hex 與 RGB 值。
- 點擊其他位置即可重新取樣。
常見使用情境
- 從照片或設計稿中取得某個顏色，用於其他地方。
- 從商標或截圖中取出品牌色。
- 取樣某個背景色，套用到另一個設計中。
- 確認圖片中特定區域的確切顏色數值。
✓內容與驗證流程複查: 2026-08-25
圖片取色器 的驗證方法與判讀界線
如何確認取樣出來的顏色準確無誤。
取樣
圖片是以縮小的預覽尺寸顯示，因此取樣到的顏色來自該預覽解析度下最接近的像素——若要在非常大的圖片上做到逐像素精確，結果可能與原始像素有極細微差異。
每次
畫面一次只會顯示最近一次點擊的顏色——點擊其他位置即可重新取樣，並沒有先前取樣顏色的紀錄。
Hex 與 RGB 值描述的是同一個顏色
顯示的 Hex 色碼與 RGB 值是同一個取樣顏色的兩種表示方式——依你目標工具或程式碼所需的格式選用即可。
使用結果前的檢查清單
- 已精確點擊你想要取色的區域，必要時可放大瀏覽器畫面以提升準確度。
- 了解取樣使用的是預覽解析度，在極度放大時可能與原始檔案有極細微差異。
- 在取樣下一個點之前，已複製好需要的 Hex 或 RGB 值。
- 若需要逐像素精確的配色，已在圖片編輯器中對照原始檔案再次確認。
適合誰使用
- 想從照片或設計稿中取得配色的設計師。
- 想從商標或截圖中取出品牌色的人。
- 想取樣背景色套用到其他設計的人。
- 想從截圖中取得特定 UI 元素確切顏色值的開發者。
實際案例
從
設計師從一張照片中取樣某個顏色，作為正在設計作品的強調色。
取出
有人取樣商標圖片，取得品牌色的確切 Hex 色碼，用於風格指南。
從截圖確認 UI 顏色
開發者從應用程式截圖中取樣某個顏色，取得確切的 Hex 值用於程式碼中。
使用限制
- 圖片是以縮小的預覽尺寸顯示，因此取樣到的顏色來自該預覽解析度下最接近的像素，而非原始全解析度檔案。
常見問題
為什麼
圖片是以縮小的預覽尺寸顯示，因此取樣讀取的是該預覽解析度下最接近的像素，而非原始全解析度檔案——差異通常可以忽略，但在極度講求精確度時可能有影響。
可以
不行——畫面只會顯示最近一次點擊的顏色，取樣新的點會取代它。
這會
不會——圖片載入與取樣都完全透過瀏覽器的 canvas 進行。
如果
如果需要在大圖上做到逐像素精確，建議直接在原始檔案上使用專業圖片編輯器的取色工具。
🔒 在瀏覽器內處理，不會上傳。結果僅供參考，詳見 免責聲明。 最後更新: 2026-08-25
訂閱更新
新工具上線與實用技巧，第一時間寄到你的信箱。不塞廣告，隨時可退訂。