跳到主要內容

圖片取色器

點擊或點按照片中的任意像素,就能在瀏覽器中直接讀取它精確的 HEX、RGB 和 HSL 色彩值。放大鏡會顯示你即將選取的像素,工具還會保留一個最近使用顏色的短清單,以及從圖片中擷取的色彩調色盤。

上傳圖片以選取顏色

點擊或拖曳圖片到這裡。選色在您的瀏覽器中完成,不會上傳到伺服器。

或拖放至此

最大 50 MB。支援 JPG、PNG、WebP、AVIF、HEIC 或 HEIF。

為什麼使用這個取色器

像素級精確取色

11×11 的放大鏡會跟隨你的滑鼠或手指移動,方便你在取色前精準定位到想要的像素。

HEX、RGB、HSL 與顏色名稱

每次取色都會同時顯示 HEX、RGB、HSL 數值以及最接近的 CSS 顏色名稱,每個數值都配有獨立的複製按鈕。

從整個螢幕取色

在支援該功能的基於 Chromium 的桌面瀏覽器中,點擊從螢幕取色按鈕,就能從螢幕上的任何位置取色,而不僅限於上傳的照片。

使用方式

  1. 1

    上傳一張照片

    選擇或拖放一張你想從中擷取顏色的圖片。

  2. 2

    點擊、點按或用鍵盤取色

    點擊或點按某個像素,也可以用方向鍵移動(按住 Shift 可一次移動 10 像素),再按 Enter 選取高亮的像素。

  3. 3

    複製你需要的顏色

    查看 HEX、RGB、HSL 數值以及最接近的顏色名稱,然後使用對應數值旁邊的複製按鈕。

這是什麼顏色?讀懂取色結果

每次取色都會同時顯示四項資訊:一個類似 #3a7bd5 的 HEX 代碼、等效的 RGB 數值、HSL(色相、飽和度、明度)數值,以及最接近的 CSS 顏色名稱,例如「steel blue」。每種格式旁邊的複製按鈕會以畫面狀態提示確認複製成功,這樣你就能直接取得設計工具或 CSS 檔案需要的格式,而不必重新輸入。

鍵盤取色與放大鏡

點擊或點按適合快速取色,但如果要放大查看某個小細節,用鍵盤操作會更方便:方向鍵每次把取色器移動一個像素,按住 Shift 可一次移動 10 個像素,按 Enter 會鎖定十字游標所在的像素。移動取色器時顯示的 11×11 放大鏡,讓你即使在複雜或對比度低的照片中,也能精確定位到某一個像素。

最近使用的顏色、調色盤與 sRGB 精確度

這個工具會記住你最近選取過的最多 12 種顏色,還會從整張圖片中擷取最多 8 種主色作為調色盤,方便你同時比較多種色調。顏色數值是按瀏覽器解碼檔案時使用的 sRGB 方式讀取的,一張儲存了特殊色彩描述檔的照片,在這裡讀到的數值可能和在具備色彩管理功能的設計軟體中略有不同,這是正常現象,並不是取色器出了問題。

常見問題

這究竟是什麼顏色?

點擊或點按你好奇的那個像素,工具會立即顯示它的 HEX、RGB、HSL 數值以及最接近的顏色名稱。

可以從上傳的照片之外取色嗎,例如螢幕上的其他應用程式?

可以,如果你使用的是基於 Chromium 的桌面瀏覽器(例如 Chrome 或 Edge)並支援 EyeDropper API。這種情況下會出現從螢幕取色按鈕;Safari 和大多數行動瀏覽器不支援這個功能。

取到的顏色會和 Photoshop 等設計工具中看到的完全一致嗎?

通常會很接近,但不一定完全一致。顏色數值是按瀏覽器解碼圖片時使用的 sRGB 方式讀取的,一張帶有嵌入色彩描述檔的照片,在具備色彩管理功能的軟體中可能會有細微差異。

使用需要帳號嗎?

不需要。這個取色器免費使用,無需註冊即可使用。

我的照片會被上傳到什麼地方嗎?

不會。圖片一直留在你的瀏覽器中,不會被傳送到伺服器。

可以不用滑鼠,只用鍵盤取色嗎?

可以。使用方向鍵每次移動一個像素,按住 Shift 可一次移動 10 個像素,按 Enter 即可選取高亮的像素。

Advertisements