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