預期會提供一個代表性的六位數 HEX 色碼及其十進位 RGB 相等值，計算方式是對取樣的可見像素取以 alpha 加權的算術平均，而非找出影像中最常見的顏色。
影像平均顏色尋找器可將影像簡化為單一摘要顏色。該值可呈現整體色調或視覺平衡，但可能不符合任何單一物件或區域。當你需要快速的代表色，而非完整色盤或針對特定主體的擷取結果時，它最為實用。
平均顏色代表什麼
此計算會將單一影像中的可見像素簡化為一種 RGB 顏色。像素面積與不透明度會決定每個取樣像素的貢獻程度，但視覺突出程度不會。明亮且看似重要的重點色，不會僅因人們認為它很突出而獲得特殊待遇。
這項區別可解釋數個起初看似令人驚訝的結果。兩個權重相同的紅色與藍色像素可能產生紫色平均值，即使來源中沒有任何紫色像素。同樣地，小型的明亮重點色可能被大面積的中性背景稀釋。傳回的顏色可提供有用的整體印象，卻可能無法呈現主要主體或最引人注目的細節。
因此，結果是算術摘要，而非以頻率為基礎的主要顏色、群聚色盤或具主體感知能力的擷取結果。它回答的是「這張影像整體的 alpha 加權 RGB 平衡為何？」，而不是「我應該使用哪個重要顏色？」
計算方式如何處理每個像素
對於每個 alpha 值不為零的取樣像素，紅色、綠色與藍色色道都會乘以該像素的 alpha 值。接著，各色道的加權總和會除以 alpha 總值，最終色道值則四捨五入至 0 至 255 之間最接近的整數。輸出時只會進行一次四捨五入。
| 像素狀態 | 對平均值的貢獻 |
|---|---|
| 完全透明 | 不產生任何貢獻，因為其儲存的 RGB 色道不可見，且可能包含任意的編碼器資料。 |
| 部分透明 | 透過 alpha 加權，依其不透明度的比例產生貢獻。 |
| 不透明 | 產生其完整 RGB 色道值的貢獻。 |
所回報的 alpha 覆蓋率代表取樣 alpha 總值除以樣本中可能的最大 alpha 值。它有助於顯示受分析區域中有多少是可見的，而非完全透明。
瀏覽器透過其影像處理介面讀取標準的 8 位元 RGBA canvas 資料。你可以查閱 MDN 的 Canvas getImageData 文件，以及 HTML canvas 像素操作規格，以了解其底層瀏覽器介面。
以三個步驟找出平均顏色
- 選擇支援的影像。 選擇非空白的 PNG、JPEG、WebP、GIF、BMP 或 AVIF 檔案，其瀏覽器影像 MIME 類型須受到支援，且檔案大小不得超過 20 MB。解碼與分析均留在目前的瀏覽器分頁中進行；檔案與取樣像素不會上傳至 Lizely 或任何影像分析服務。
- 等待本機解碼並檢查結果。 查看六位數 HEX 值、十進位 RGB 值、alpha 覆蓋率、來源尺寸與樣本尺寸。這些輸出會顯示計算出的顏色，以及受分析像素的重要細節。
- 複製 HEX 並檢查其情境。 按一下可見的 HEX 值即可複製，然後在預定設計情境中使用預覽色樣與複製的值。如果瀏覽器政策拒絕剪貼簿權限，該值仍會保持可見且可選取，而不會回報虛假的複製成功訊息。
驗證色樣很重要，因為數學上正確的值在淺色背景、深色介面、周圍影像或特定顯示器上，仍可能呈現不同外觀。預覽直接使用計算出的 HEX 值，其用途在於檢查是否合理，而非取代對最終配置位置的檢視。
為何不同工具與瀏覽器的結果可能不同
大型影像會在計算平均值前先進行取樣。解碼後像素數為 1,048,576 或更少的影像，會依其解碼尺寸讀取。較大的影像則會按比例縮放，使分析 canvas 維持在不超過該像素預算的範圍內。由於瀏覽器插值可能略微改變取樣色道值，結果可能不同於對每個原始像素進行離線計算所得的結果。
| 情況 | 預期結果 |
|---|---|
| 解碼後像素數為 1,048,576 或更少的影像 | 影像會依其解碼尺寸讀取。 |
| 解碼後像素數超過 1,048,576 的影像 | 分析前會按比例向下取樣，而瀏覽器插值可能略微改變結果。 |
| 動畫影像 | 只會評估瀏覽器完成初始解碼時顯示的影格；不包含影格持續時間。 |
| 不同瀏覽器或色彩工具 | 色彩管理、向下取樣、方向處理、廣色域轉換與動畫處理，都可能產生不同的值。 |
介面會同時回報來源尺寸與樣本尺寸，讓近似值一目了然。其他程式可能會分析每個完整解析度的像素、使用不同的向下取樣方式、套用 gamma 感知或感知數學、選擇其他動畫影格，或採取不同的色彩管理方式。即使來源檔案未變更，這些方法差異仍可能改變 HEX 值。
平均值的適用情境
單一平均顏色適合用於概略的背景配對、預留位置樣式、縮圖摘要、設計資產清單與快速視覺比較。當整張影像都應影響某項設計決策時，它能提供一個快速的起始值。
- 建立反映影像整體色調的暫時背景或載入預留位置。
- 為縮圖、目錄項目或設計資產清單記錄指定代表色樣。
- 在進行更細緻的設計工作前，快速比較兩項資產的一般色彩平衡。
當你需要最常見的顏色、彼此分離的色樣或具主體感知能力的擷取結果時，請改用色彩色盤產生器。以頻率為基礎的色盤與算術平均值所回答的問題不同。
如需配置位置的指引，套用影像平均顏色的實用指南可協助你判斷概略的摘要顏色適合用在哪裡。
限制、錯誤與本機處理
數項輸入安全措施會決定影像能否分析：
- 所選檔案必須非空白，且大小不得超過 20 MB。
- 檔案必須使用支援的瀏覽器影像 MIME 類型，並可解碼為支援的影像。
- 解碼後，任一邊的像素數都不得超過 20,000 像素。
- 解碼後的來源不得超過 40 million pixels。
不支援的資料、解碼失敗、無法使用 canvas、尺寸無效，以及沒有可見像素的影像，都會產生明確錯誤，且不會留下過時結果。這些檢查可避免瀏覽器過度使用 canvas 記憶體，並防止先前的值被誤認為目前影像的答案。
處理作業會留在瀏覽器分頁本機進行，來源檔案既不會遭修改，也不會被匯出。此工具不會檢查或保留 EXIF 資料、ICC 設定檔、相機中繼資料或隱藏文字區塊。它可以顯示檔名，但檔名內容並不屬於計算的一部分。
驗證並記錄最終色樣
複製的值一律包含恰好一個井字號，後接六個小寫十六進位數字。使用預覽判斷該值是否看似合理，然後在預定周邊環境中檢查顏色。最終外觀仍取決於顯示器、瀏覽器、周邊主題與人眼的視覺適應。
若要進行可重現的設計工作，請記錄輸入檔案、瀏覽器、顯示的來源尺寸與樣本尺寸，以及回傳的顏色。即使日後另一次執行或另一個應用程式產生不同的值，這些細節仍有助於進行調查。
不要將單一平均值視為品牌規範、文字無障礙、印刷配色、油漆配對或感知相似性的證據。文字與背景對比請使用色彩對比檢查器；當你需要明確定義的色差指標時，請使用色彩差異計算器。
相關閱讀：影像平均顏色：新手需要知道的事項。