圖片取色器
工具說明
上傳設計稿、截圖或照片,點擊任意像素即可複製對應的 HEX、RGB 或 HSL 色值。放大顯示可協助您精確選擇介面中的細小元素,也可用於從圖片中提取品牌顏色。
使用方式
- 點擊圖片選擇像素顏色
- 使用放大顯示精確定位
- 顯示 HEX、RGB 和 HSL 色值
- 將色值複製到剪貼簿
- 儲存本次使用期間最近選擇的顏色
- 上傳圖片: 選擇包含目標顏色的圖片。
- 點擊像素: 移動滑鼠並點擊需要選擇的像素,放大顯示會顯示局部區域。
- 複製色值: 複製 HEX 色值,或複製可直接用於 CSS 的 rgb() 或 hsl() 格式。
範例
- 從舊版 PNG 設計稿中提取按鈕顏色
- 分析其他產品截圖中的配色
- 估算橫幅漸層中的顏色
- 在錯誤報告中記錄準確的色值
限制
- 工具只讀取圖片中的像素顏色;JPEG 有損壓縮可能導致輕微色差
- 工具不會自動產生整張圖片的完整調色盤
- 上傳的圖片會直接在您的瀏覽器中處理,不會傳送至伺服器。
常見問題
- 為什麼 JPEG 圖片的顏色可能略有不同?
- JPEG 有損壓縮可能改變像素值。需要準確讀取介面顏色時,建議使用 PNG 截圖。
- 是否會讀取透明度?
- 工具主要顯示不透明的 RGB 色值。讀取透明 PNG 時,複製的 rgba() 格式可以包含透明度。
- 可以在觸控裝置上取色嗎?
- 可以。在支援的裝置上,點擊圖片即可選擇對應位置的顏色。