跳至主要內容
Lizely

圖片平均色彩查詢器

在瀏覽器中查詢圖片的 alpha 加權平均色彩，並複製精確的 HEX 值。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.選擇支援的圖片，大小不得超過 20 MB。
  2. 2.等待本機解碼完成，並檢視 HEX、RGB、覆蓋範圍及樣本尺寸。
  3. 3.點選 HEX 值以複製，然後在預期的設計情境中驗證色塊。

關於圖片平均色彩查詢器

圖片平均色彩查詢器會將單張圖片的可見像素減少至一個代表性的 RGB 色彩。選擇支援的圖片後，工具會解碼該圖片、取樣其像素、計算 alpha 加權的算術平均值，並以六位數 HEX 與十進位 RGB 形式顯示結果。點選可見的 HEX 值以複製。整個處理過程皆發生於當前瀏覽器標籤頁，因此不會上傳任何內容至 Lizely 或圖片分析服務。

此計算有明確的定義。對於每個取樣像素若其 alpha 值非零，紅、綠、藍三通道分別乘以該像素的 alpha 值。各通道總和除以總 alpha，再四捨五入至最接近的整數（從 0 到 255）。完全透明的像素不貢獻任何值，因為其儲存的 RGB 通道不可見，且可能包含任意編碼器資料。部分透明的像素則依其不透明度比例貢獻。所報告的 alpha 覆蓋範圍為取樣總 alpha 除以樣本中可能的最大 alpha。

這是一種瀏覽器畫布色彩資料中的算術平均，而非主導色彩聚類模型。兩個等權重的紅色與藍色像素會產生紫色平均值，即使源圖片中並無紫色像素存在。一個微小的亮色強調可能被大面積中性背景稀釋。若你需要最常見的色彩、分離的色塊或主題感知的提取，建議改用相關的色彩調色盤生成器。此單一結果最適合用於粗略的背景匹配、暫時樣式設計、縮圖摘要、設計庫清單以及快速視覺比對。

大型解碼圖片在分析前會先進行降解析。像素數量等於或低於 1,048,576 時，會以解碼後的尺寸讀取。較大圖片則會按比例縮放，以確保分析畫布的像素數量不超過該上限。因此結果描述的是高解析度的樣本，而非每一個原始像素的位元組平均值。瀏覽器插值可能導致值與離線全解析計算略有差異。介面同時顯示原始與樣本尺寸，讓此近似結果清晰可見，而非隱藏。

輸入保護機制適用於壓縮與解碼後的大小。所選檔案必須非空、使用支援的瀏覽器圖片 MIME 型別，且大小不得超過 20 MB。解碼後，任一邊界不得超過 20,000 像素，且原始圖片不得超過 40 百萬像素。這些限制可降低小檔案壓縮後擴充套件至過大畫布記憶體的風險。不支援的資料、解碼失敗、畫布訪問不可用、維度無效或圖片無可見像素將導致明顯錯誤且無殘留結果。

動畫格式會根據瀏覽器完成初始圖片解碼時所顯示的影格進行評估；這個工具不會平均每個影格或計算影格持續時間。瀏覽器的色彩管理、方向處理、廣色域轉換以及動畫行為可能會因格式和瀏覽器而異。畫布像素存取會以標準 8 位 RGBA 資料請求。這個工具不會保留或檢查 EXIF、ICC 色彩配置檔案、相機後設資料、顯示以外的檔名或隱藏的文字區塊。它也不會修改或匯出原始檔案。

預覽色塊直接使用計算出的 HEX 值。此功能可用於確認數值是否合理，但視覺效果仍取決於顯示裝置、瀏覽器、主題環境及人類適應。複製的值總是包含一個雜湊值，後接六個小寫十六進位數字。瀏覽器政策可能拒絕 clipboard 權限；若發生此情況，值仍會顯示且可選取，介面不會虛假宣告成功。

為確保設計結果的重現性，請記錄輸入檔案、瀏覽器、顯示的原始與樣本尺寸以及返回值。請勿將單一平均值視為品牌合規性、可接觸性對比、列印匹配、塗料匹配或知覺相似性的證據。使用色彩對比檢查器來檢查文字對比，並使用色彩差異計算器來獲得明確的色彩差異度量。MDN 的 畫布 getImageData 檔案與 HTML 畫布像素操作規範描述了這個實現所使用的 RGBA 像素介面；權重規則與限制是故意明確說明的產品選擇。

方法與來源

本機解碼、限制解碼後的尺寸、按比例取樣至最多 1,048,576 個畫布像素、忽略 alpha 值為零的像素、以 alpha 系數加權 RGB 個通道、輸出時四捨五入，並公開原始與取樣後的尺寸。

常見問題

圖片會離開我的裝置嗎？
不會。圖片的解碼、畫布取樣、平均與複製操作皆發生於當前瀏覽器標籤頁的本機環境。
透明像素會被包含嗎？
完全透明的像素將被忽略，部分透明的像素則會根據其 alpha 值進行加權。
這是否是主導色彩？
不，這是一個以 alpha 系數加權的 RGB 平均值，而非基於頻率的調色盤或具備主題辨識能力的主色模型。
為何另一個程式會返回不同的值？
程式可以使用完整解析度像素、不同的降取樣方式、考慮 gamma 值或視覺感知的數學計算、不同的動畫影格，或不同的色彩管理方式。

相關工具

色彩工具 使用指南

查看全部