線上圖片取色器

開啟圖片,用帶十字線的放大鏡選中準確像素,再複製對應的 HEX、RGB 或 HSL 色值,並儲存圖片中的常用顏色。

或將一張圖片拖放到這裡

JPG、PNG 或 WebP · 最大 50 MB

圖片只在瀏覽器中分析

從圖片中準確提取顏色

精確到單個像素

通過放大十字線選中指定像素,不必根據整片畫面估算顏色。

HEX、RGB、HSL 與圖片色票

複製網頁和設計中常用的顏色格式,儲存多個取色結果,並檢視從圖片中提取的主要顏色。

本地分析顏色

像素取色和色票提取都在你的裝置上完成,圖片無需上傳到 ImageNow 伺服器。

使用方法

  1. 選擇或拖放一張支援的圖片。
  2. 在圖片上移動,通過放大十字線選中準確像素。
  3. 複製 HEX、RGB 或 HSL 色值,並儲存需要保留的顏色。
  4. 將取色結果與提取出的圖片色票比較,或換一張圖片。

如何從圖片中取色

選擇圖片,將指標移到需要取色的位置,再通過放大檢視分辨相鄰像素。選中像素後,當前顏色會立即更新,再按設計工具、樣式表、文件或簡報需要的格式複製色值。

HEX、RGB 和 HSL 表示同一種顏色

HEX 是 CSS 和設計交付中常用的十六進位制寫法。RGB 分別列出紅、綠、藍通道數值。HSL 使用色相、飽和度和亮度,按規律調整顏色時更直觀。格式轉換不會改變實際選中的顏色。

為什麼相鄰像素的顏色值不同

照片中有紋理、光線、陰影、壓縮痕跡和抗鋸齒邊緣,因此肉眼看似同一片的區域也可能包含不同像素值。可以選取附近的幾個點,並儲存合適的色值。圖片色票能幫助瞭解畫面整體用色,但不能代替精確的像素取色。

使用取樣顏色時要檢查對比度

在照片裡好看的顏色,用作文字時不一定讀得清。用於網站或文件時,請按實際字號測試前景與背景的組合,並遵守專案所需的無障礙標準。

常見問題

怎麼從圖片中取色?

選擇圖片,將指標移到目標區域,用放大十字線找到一個像素並選中。隨後即可複製其 HEX、RGB 或 HSL 色值。

可以從照片中獲取 HEX 顏色程式碼嗎?

可以。不透明像素顯示為六位 HEX 色值;帶透明度的像素顯示為包含透明度(Alpha)通道的八位 HEX 色值。RGB 和 HSL 格式也會保留 Alpha 透明度。點選所需格式旁的複製按鈕即可。

HEX、RGB 和 HSL 有什麼區別?

它們是同一種顏色的不同表示方式。HEX 和 RGB 都記錄紅、綠、藍通道,HSL 則使用色相、飽和度和亮度。

可以儲存多個取樣顏色嗎?

可以。檢視圖片時儲存需要的顏色,之後無需反覆尋找同一個像素,也能隨時比較或複製。儲存的顏色還可以下載為 CSS 或 TXT 檔案。

工具會提取圖片色票嗎?

會。工具會顯示從圖片中提取的 8 種代表色。可以選中色票顏色檢視色值;需要某個精確位置的顏色時,請使用像素取色。

為什麼取出的顏色與預期有一點差別?

光線、漸變、圖片壓縮、顯示器色彩管理和抗鋸齒邊緣都會讓附近像素出現差異。請使用放大鏡,並比較相鄰的幾個取樣點。

這個工具能檢查兩種顏色的無障礙對比度嗎?

不能。此頁面用於提取和轉換圖片顏色。請用專門的無障礙對比度檢查工具測試實際的前景色和背景色。

我的圖片會上傳嗎?

不會。圖片解碼、像素取色和色票分析都在瀏覽器中完成,無需上傳到 ImageNow 伺服器。