從設計稿/網頁截圖提取品牌色
看到喜歡的網站配色或品牌視覺,截圖上傳後直接點擊關鍵色塊,拿到精確的 HEX 值用於自己的設計或代碼。
點擊或拖動圖片上任意位置拾取顏色
點擊圖片拾取顏色後,會記錄在這裡方便再次查看和對比
上手路徑
不需要安裝任何軟體,全程在網頁裡完成,放大鏡輔助精準定位。
點擊選擇或直接把圖片拖進網頁,支持 JPG、PNG、WebP、GIF,單張不超過 20MB,每次只處理一張。
在圖片上移動游標,放大鏡實時顯示周圍放大後的像素,紅框標出即將拾取的具體位置。
在目標位置點擊或鬆開手指即可拾取顏色,立即顯示 HEX、RGB、HSL 三種格式數值。
點擊對應格式旁的複製按鈕,把顏色值複製到剪貼板粘貼使用。
疑難排查
取色器是點擊讀取像素顏色值的交互式查看功能,本身不產生任何匯出檔案,也就沒有「批量」的概念——不管上傳的圖片有多大,你都是逐個點擊具體位置來讀取顏色,所以這個工具只支持單張圖片上傳,不提供批量模式。
完全在你當前設備的瀏覽器裡完成,藉助瀏覽器原生的 Canvas 像素讀取能力直接從圖片數據裡讀出對應位置的顏色數值,全程不會把原圖上傳到任何服務器。
放大鏡裡顯示的是游標當前懸停位置周圍一小塊區域放大後的效果,實際拾取的是紅色方框標出的那一個具體像素的顏色;如果圖片本身有漸變或噪點,緊鄰的像素顏色會有細微差異,只要以紅色方框標出的像素為準點擊拾取,顏色就是精確對應的,不會有偏差。
拾取歷史只保存在當前頁面的瀏覽器內存裡,方便你在同一次操作中對比多個拾取過的顏色,刷新頁面或關閉頁面後歷史記錄會清空,不會永久保存或上傳,如果需要長期保留某個顏色值,建議先複製粘貼到你自己的筆記或設計工具裡。
HEX(如 #FF3B30)是網頁開發和大多數設計工具裡最常用的格式,簡潔且容易粘貼使用;RGB(如 rgb(255, 59, 48))在需要單獨調整紅綠藍三個通道數值時更直觀;HSL(如 hsl(4, 100%, 59%))按色相、飽和度、明度描述顏色,在需要在同一色相基礎上調深淺或飽和度時更方便。三種格式描述的是同一個顏色,按你實際要粘貼到的工具或代碼選擇對應格式即可。
可以。取色器讀取的是圖片解碼後的原始像素數據,不受頁面顯示大小影響——即使圖片在頁面上被縮小展示,拾取時依然是按圖片本身的真實分辨率精確讀取對應位置的像素顏色,不會因為縮放顯示而產生顏色偏差。
取色和像素讀取全程在瀏覽器本地完成,圖片不會經過任何服務器
懸停時實時放大顯示游標周圍像素,紅框標出即將拾取的具體像素
HEX、RGB、HSL 同時顯示,點擊複製按鈕直接粘貼到設計工具或代碼裡
不用註冊、不用付費,也沒有隱藏的使用次數限制
適用情境
不是功能清單,而是「什麼時候值得拖一張圖上來」。對不上號就換工具,別硬用。
顏色格式
同一個顏色的三種不同描述方式,根據要粘貼使用的場景選擇對應格式。
| 格式 | 寫法示例 | 常見使用場景 |
|---|---|---|
| HEX | #FF3B30 | 網頁 CSS、大多數設計工具(如 Figma、Photoshop)的顏色輸入框 |
| RGB | rgb(255, 59, 48) | 需要單獨查看或調整紅、綠、藍三個通道數值的場景 |
| HSL | hsl(4, 100%, 59%) | 按色相、飽和度、明度描述,方便在同一色相上調深淺或飽和度 |
三種格式描述的是完全相同的顏色,只是數值表示方式不同;頁面上每種格式都可以一鍵複製,直接粘貼到你使用的設計工具或代碼編輯器裡即可。
技術說明
圖片會先在瀏覽器裡解碼並繪製到一個和原圖分辨率完全一致的畫布上,頁面上看到的只是這個畫布縮小顯示的效果;點擊拾取顏色時,會按顯示位置換算回畫布的真實像素座標讀取顏色,所以不管圖片在頁面上顯示得多小,取色精度始終對應圖片的原始分辨率,不會因為縮放顯示而失真。
取色器的功能是「點擊讀取一個像素的顏色值」,是純交互式的查看工具,本身不會生成任何需要下載的圖片檔案,自然也不存在「多張圖片各自處理出多個結果」的批量語義;如果需要從多張圖片分別取色,直接依次上傳逐張查看即可,每次切換圖片會清空當前的拾取歷史。