線上圖片取色器
開啟圖片,用帶十字線的放大鏡選中準確像素,再複製對應的 HEX、RGB 或 HSL 色值,並儲存圖片中的常用顏色。
或將一張圖片拖放到這裡
JPG、PNG 或 WebP · 最大 50 MB
圖片只在瀏覽器中分析
在圖片上點選、點按或拖動。放大鏡會顯示附近像素;方向鍵每次移動 1 像素,按住 Shift 可移動 10 像素。
當前顏色
像素位置
從圖片中提取的 8 種代表色
儲存當前顏色或色票中的顏色後,會顯示在這裡。
從圖片中準確提取顏色
精確到單個像素
通過放大十字線選中指定像素,不必根據整片畫面估算顏色。
HEX、RGB、HSL 與圖片色票
複製網頁和設計中常用的顏色格式,儲存多個取色結果,並檢視從圖片中提取的主要顏色。
本地分析顏色
像素取色和色票提取都在你的裝置上完成,圖片無需上傳到 ImageNow 伺服器。
使用方法
- 選擇或拖放一張支援的圖片。
- 在圖片上移動,通過放大十字線選中準確像素。
- 複製 HEX、RGB 或 HSL 色值,並儲存需要保留的顏色。
- 將取色結果與提取出的圖片色票比較,或換一張圖片。
如何從圖片中取色
選擇圖片,將指標移到需要取色的位置,再通過放大檢視分辨相鄰像素。選中像素後,當前顏色會立即更新,再按設計工具、樣式表、文件或簡報需要的格式複製色值。
HEX、RGB 和 HSL 表示同一種顏色
HEX 是 CSS 和設計交付中常用的十六進位制寫法。RGB 分別列出紅、綠、藍通道數值。HSL 使用色相、飽和度和亮度,按規律調整顏色時更直觀。格式轉換不會改變實際選中的顏色。
為什麼相鄰像素的顏色值不同
照片中有紋理、光線、陰影、壓縮痕跡和抗鋸齒邊緣,因此肉眼看似同一片的區域也可能包含不同像素值。可以選取附近的幾個點,並儲存合適的色值。圖片色票能幫助瞭解畫面整體用色,但不能代替精確的像素取色。
使用取樣顏色時要檢查對比度
在照片裡好看的顏色,用作文字時不一定讀得清。用於網站或文件時,請按實際字號測試前景與背景的組合,並遵守專案所需的無障礙標準。
常見問題
怎麼從圖片中取色?
選擇圖片,將指標移到目標區域,用放大十字線找到一個像素並選中。隨後即可複製其 HEX、RGB 或 HSL 色值。
可以從照片中獲取 HEX 顏色程式碼嗎?
可以。不透明像素顯示為六位 HEX 色值;帶透明度的像素顯示為包含透明度(Alpha)通道的八位 HEX 色值。RGB 和 HSL 格式也會保留 Alpha 透明度。點選所需格式旁的複製按鈕即可。
HEX、RGB 和 HSL 有什麼區別?
它們是同一種顏色的不同表示方式。HEX 和 RGB 都記錄紅、綠、藍通道,HSL 則使用色相、飽和度和亮度。
可以儲存多個取樣顏色嗎?
可以。檢視圖片時儲存需要的顏色,之後無需反覆尋找同一個像素,也能隨時比較或複製。儲存的顏色還可以下載為 CSS 或 TXT 檔案。
工具會提取圖片色票嗎?
會。工具會顯示從圖片中提取的 8 種代表色。可以選中色票顏色檢視色值;需要某個精確位置的顏色時,請使用像素取色。
為什麼取出的顏色與預期有一點差別?
光線、漸變、圖片壓縮、顯示器色彩管理和抗鋸齒邊緣都會讓附近像素出現差異。請使用放大鏡,並比較相鄰的幾個取樣點。
這個工具能檢查兩種顏色的無障礙對比度嗎?
不能。此頁面用於提取和轉換圖片顏色。請用專門的無障礙對比度檢查工具測試實際的前景色和背景色。
我的圖片會上傳嗎?
不會。圖片解碼、像素取色和色票分析都在瀏覽器中完成,無需上傳到 ImageNow 伺服器。