點一個像素——讀出數值

點擊即可拿到 HEX、RGB、HSL。不用開設計套件。

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

上手路徑

最短路徑 · 圖片取色

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

  1. 1

    上傳圖片

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

  2. 2

    移動鼠標或手指定位

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

  3. 3

    點擊拾取顏色

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

  4. 4

    複製顏色值

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

疑難排查

取色器支持批量處理嗎?

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

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

完全在你當前設備的瀏覽器裡完成,藉助瀏覽器原生的 Canvas 像素讀取能力直接從圖片數據裡讀出對應位置的顏色數值,全程不會把原圖上傳到任何服務器。

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

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

拾取到的顏色歷史記錄會保存嗎,刷新頁面後還在嗎?

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

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

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

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

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

  • 原圖不進我們的服務器

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

  • 放大鏡精準定位

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

  • 三種格式一鍵複製

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

  • 不開號也能反覆匯出

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

適用情境

這些情況打開本頁通常更省事

不是功能清單,而是「什麼時候值得拖一張圖上來」。對不上號就換工具,別硬用。

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

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

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

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

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

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

顏色格式

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

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

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

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

技術說明

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

  1. 01

    讀取的是圖片真實分辨率下的原始像素

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

  2. 02

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

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

文件還在你這邊,直接拖一張試試

不用開號。滿意再批量,不滿意就換參數重來。