本機處理,圖片不上傳 免費,無次數限制 放大鏡精準取色 + 一鍵複製

線上取色器,從圖片精確提取 HEX/RGB/HSL 顏色值

上傳一張圖片,移動滑鼠或手指在圖片上定位,放大鏡即時顯示游標周圍放大後的像素輔助精準取景,點擊即可拾取該位置的顏色,立即顯示 HEX、RGB、HSL 三種格式並一鍵複製,還會自動記錄拾取歷史方便對比查看——全程在瀏覽器本機完成,不上傳伺服器。

3顏色格式(HEX/RGB/HSL)
20MB單張圖片上限
0需要安裝的軟體

不上傳伺服器

取色和像素讀取全程在瀏覽器本機完成,圖片不會經過任何伺服器

放大鏡精準定位

懸停時即時放大顯示游標周圍像素,紅框標出即將拾取的具體像素

三種格式一鍵複製

HEX、RGB、HSL 同時顯示,點擊複製按鈕直接貼到設計工具或程式碼裡

免費不限次

不用註冊、不用付費,也沒有隱藏的使用次數限制

典型情境

三個最常見的取色需求,一個工具都能解決

不管是提取品牌色、參考照片配色,還是核對開發實作,點擊圖片就能拿到精確顏色值。

從設計稿/網頁截圖提取品牌色

看到喜歡的網站配色或品牌視覺,截圖上傳後直接點擊關鍵色塊,拿到精確的 HEX 值用於自己的設計或程式碼。

從照片提取自然色調用於配色

從一張風景或人像照片裡提取天空、皮膚、植物等自然色調,作為設計方案或插畫配色的參考基準。

核對設計圖與開發實作的顏色是否一致

開發還原設計稿時,分別在設計圖截圖和實際頁面截圖上取色對比 HEX 值,快速確認顏色是否還原準確,不用肉眼猜測。

顏色格式

HEX、RGB、HSL 三種格式速查表

同一個顏色的三種不同描述方式,根據要貼上使用的情境選擇對應格式。

格式寫法範例常見使用情境
HEX#FF3B30網頁 CSS、大多數設計工具(如 Figma、Photoshop)的顏色輸入框
RGBrgb(255, 59, 48)需要單獨查看或調整紅、綠、藍三個通道數值的情境
HSLhsl(4, 100%, 59%)按色相、飽和度、明度描述,方便在同一色相上調深淺或飽和度

三種格式描述的是完全相同的顏色,只是數值表示方式不同;頁面上每種格式都可以一鍵複製,直接貼到你使用的設計工具或程式碼編輯器裡即可。

使用方法

四步完成圖片取色

不需要安裝任何軟體,全程在網頁裡完成,放大鏡輔助精準定位。

  1. 1

    上傳圖片

    點擊選擇或直接把圖片拖進網頁,支援 JPG、PNG、WebP、GIF,單張不超過 20MB,每次只處理一張。

  2. 2

    移動滑鼠或手指定位

    在圖片上移動游標,放大鏡即時顯示周圍放大後的像素,紅框標出即將拾取的具體位置。

  3. 3

    點擊拾取顏色

    在目標位置點擊或放開手指即可拾取顏色,立即顯示 HEX、RGB、HSL 三種格式數值。

  4. 4

    複製顏色值

    點擊對應格式旁的複製按鈕,把顏色值複製到剪貼簿貼上使用。

技術說明

關於本機取色,這兩點值得了解

01

讀取的是圖片真實解析度下的原始像素

圖片會先在瀏覽器裡解碼並繪製到一個和原圖解析度完全一致的畫布上,頁面上看到的只是這個畫布縮小顯示的效果;點擊拾取顏色時,會按顯示位置換算回畫布的真實像素座標讀取顏色,所以不管圖片在頁面上顯示得多小,取色精度始終對應圖片的原始解析度,不會因為縮放顯示而失真。

02

為什麼取色器不支援批次處理,也不產生下載檔案

取色器的功能是「點擊讀取一個像素的顏色值」,是純互動式的查看工具,本身不會產生任何需要下載的圖片檔案,自然也不存在「多張圖片各自處理出多個結果」的批次語義;如果需要從多張圖片分別取色,直接依次上傳逐張查看即可,每次切換圖片會清空目前的拾取歷史。

常見問題

關於線上取色器,大家常問的問題

取色器支援批次處理嗎?

取色器是點擊讀取像素顏色值的互動式查看功能,本身不產生任何匯出檔案,也就沒有「批次」的概念——不管上傳的圖片有多大,你都是逐個點擊具體位置來讀取顏色,所以這個工具只支援單張圖片上傳,不提供批次模式。

取色是在我的電腦或手機上完成的,還是要上傳到伺服器?

完全在你目前裝置的瀏覽器裡完成,借助瀏覽器原生的 Canvas 像素讀取能力直接從圖片資料裡讀出對應位置的顏色數值,全程不會把原圖上傳到任何伺服器。

為什麼放大鏡裡看到的顏色,和最終拾取到的顏色可能有細微差別?

放大鏡裡顯示的是游標目前停留位置周圍一小塊區域放大後的效果,實際拾取的是紅色方框標出的那一個具體像素的顏色;如果圖片本身有漸層或噪點,緊鄰的像素顏色會有細微差異,只要以紅色方框標出的像素為準點擊拾取,顏色就是精確對應的,不會有偏差。

拾取到的顏色歷史記錄會儲存嗎,重新整理頁面後還在嗎?

拾取歷史只儲存在目前頁面的瀏覽器記憶體裡,方便你在同一次操作中對比多個拾取過的顏色,重新整理頁面或關閉頁面後歷史記錄會清空,不會永久儲存或上傳,如果需要長期保留某個顏色值,建議先複製貼到你自己的筆記或設計工具裡。

HEX、RGB、HSL 三種顏色格式應該用哪個?

HEX(如 #FF3B30)是網頁開發和大多數設計工具裡最常用的格式,簡潔且容易貼上使用;RGB(如 rgb(255, 59, 48))在需要單獨調整紅綠藍三個通道數值時更直觀;HSL(如 hsl(4, 100%, 59%))按色相、飽和度、明度描述顏色,在需要在同一色相基礎上調深淺或飽和度時更方便。三種格式描述的是同一個顏色,按你實際要貼到的工具或程式碼選擇對應格式即可。

取色的精度如何,能讀到圖片的真實原始顏色嗎?

可以。取色器讀取的是圖片解碼後的原始像素資料,不受頁面顯示大小影響——即使圖片在頁面上被縮小展示,拾取時依然是按圖片本身的真實解析度精確讀取對應位置的像素顏色,不會因為縮放顯示而產生顏色偏差。

現在就上傳,幾秒鐘提取精確顏色值

不用註冊,不用等待,點擊即可複製使用。