影像的平均色彩是其可見像素的一個以 alpha 加權的算術平均數——不一定會出現在影像中的某種顏色，也不一定是該影像的主導色。 這個差異很重要，因為數學上有效的平均值，對於調色盤、主體擷取或色彩合規檢查而言，仍可能是錯誤的選擇。
初學者應先瞭解這個數值的意義，再檢查檔案及預定用途是否符合工具的需求。影像平均顏色尋找器會在目前的瀏覽器分頁中本機計算此值。影像解碼、像素取樣、平均運算及剪貼簿輸出都在瀏覽器中進行，因此檔案及取樣像素不會上傳至 Lizely 或影像分析服務。
平均值實際代表的意義
計算過程會將每個 alpha 值不為零的取樣像素視為可見像素。對紅、綠及藍色通道中的每一個通道值，都會乘上該像素的 alpha 值。加權總和會除以 alpha 總值，再四捨五入一次至 0 至 255 之間的最近整數。換句話說，加權通道平均值等於 alpha 乘以通道值的總和，再除以 alpha 總值。
因此，透明度是定義的一部分，而不是事後才考慮的因素。完全透明的像素不會提供任何貢獻，因為其儲存的 RGB 值不可見，且可能包含任意的編碼器資料。部分透明的像素則會依其不透明度按比例貢獻。實作會讀取標準的 8 位元 RGBA canvas 資料，相關說明請參閱 MDN 的 CanvasRenderingContext2D.getImageData 文件。
這是瀏覽器 canvas 色彩資料中的算術平均數，而非以出現頻率為基礎的調色盤或感知色彩模型。兩個權重相同的紅色與藍色像素會產生紫色的平均值，即使來源中沒有紫色像素。同樣地，小型的明亮重點色可能會被大型中性背景稀釋。如果你需要分離的色票、出現最頻繁的顏色或具主體意識的擷取功能，請改用調色盤產生器。
選擇檔案前要檢查的事項
支援的格式為 PNG、JPEG、WebP、GIF、BMP 及 AVIF。所選檔案也必須不是空的、使用支援的瀏覽器影像 MIME 類型，且大小不得超過 20 MB。檔案大小只是一道安全防線：解碼後，任一影像邊緣都不得超過 20,000 像素，來源也不得超過 40 million 像素。
- 壓縮後大小：檔案即使小於 20 MB，仍可能不適合使用，因為其解碼後的尺寸過大。
- 解碼後邊緣長度：解碼後，寬度或高度都不得超過 20,000 像素。
- 來源像素總數：解碼後的來源不得包含超過 40 million 像素。
- 可見內容：沒有任何可見像素的影像無法產生有意義的平均值。
不支援的資料、解碼失敗、無法使用 canvas、無效尺寸，以及沒有可見像素的影像，都會產生明確錯誤，而不會顯示舊有結果。這些情況之所以重要，是因為看似成功的畫面若仍顯示過時資料，可能會在無意間被複製到設計中。
計算並複製影像的平均色彩
工作流程很簡短，但每個階段都會提供有助於判斷結果的資訊。請依序使用影像平均顏色尋找器：
- 選擇支援的影像，大小最多 20 MB。確認格式及檔案類型均受支援。所選影像會在目前的瀏覽器分頁中解碼，而不會上傳。
- 等待本機解碼並檢視顯示的數值。複製任何內容之前，請檢查 HEX、十進位 RGB、alpha 覆蓋率、來源尺寸及取樣尺寸。
- 點選顯示的 HEX 值即可複製。複製結果會包含一個雜湊值，後接恰好六個小寫十六進位數字。如果瀏覽器政策拒絕剪貼簿權限，該值仍會保持可見及可選取狀態，而且介面不會宣稱複製已成功。
- 在預定的設計情境中驗證色票。將該色彩放在相關版面、文字、背景或周圍 artwork 旁邊。預覽會直接使用計算出的 HEX，但其感知外觀仍取決於顯示器、瀏覽器、主題周圍環境及人體適應。
本機處理可保護所選檔案，但無法將結果轉變成通用的色彩測量值。在 HEX 值成為最終設計決策之前，仍須在實際應用程式中進行驗證。
正確解讀覆蓋率與尺寸
覆蓋率與尺寸可說明結果是如何產生的。Alpha 覆蓋率是取樣 alpha 總值除以整個樣本中 alpha 的最大可能值。它描述的是樣本整體的可見不透明度，而非色彩主導程度或品牌一致性的量測。
| 顯示欄位 | 代表的意義 | 檢查事項 |
|---|---|---|
| HEX | 計算所得 RGB 結果的六位數十六進位表示 | 點選顯示值即可複製，並確認前綴存在 |
| RGB | 以十進位表示紅、綠及藍通道值的同一計算色彩 | 當專案要求數值通道而非 HEX 時使用 |
| 覆蓋率 | 取樣 alpha 總值除以整個樣本中 alpha 的最大可能值 | 注意透明及部分透明區域會影響其解讀 |
| 來源尺寸 | 所選影像解碼後的尺寸 | 將其記錄為可重現工作流程的一部分 |
| 取樣尺寸 | 用於分析的 canvas 尺寸 | 與來源尺寸比較，以判斷是否發生向下取樣 |
像素數在 1,048,576 或以下的影像，會依其解碼後的尺寸讀取。較大的影像會按比例縮放，使分析 canvas 保持在該像素預算以內。因此，結果描述的是取樣後的影像，而非每個來源像素逐位元組相同的平均值。瀏覽器的插值也可能使結果與離線的全解析度計算略有差異，這就是同時提供來源尺寸與取樣尺寸的原因。
動態格式還有另一項限制：工具會評估瀏覽器完成初始影像解碼時所呈現的影格，而不會平均所有影格，也不會考慮影格持續時間。瀏覽器的色彩管理、方向處理、廣色域轉換及動畫行為可能因格式與瀏覽器而異，因此當需要精確重現時，這些細節都很重要。
讓方法符合設計工作
單一平均值最適合用於概略的背景配對、placeholder 樣式、縮圖摘要、設計資產盤點及快速視覺比較。當工作需要頻率、主體分離、無障礙設計或明確定義的色彩差異時，單一平均值就會變得不可靠。
| 設計目標 | 採用單一平均值的適合度 | 更適合的方法 |
|---|---|---|
| 概略 placeholder 或背景色調 | 通常有用 | 在預定版面中檢查色票 |
| 縮圖或資產庫摘要 | 可作為概略的視覺標籤 | 不要期待它能辨識主要主體 |
| 出現最頻繁或分離後的顏色 | 不適合 | 使用調色盤產生器 |
| 具主體意識的色彩擷取 | 不適合 | 使用調色盤產生器進行以調色盤為導向的擷取 |
| 文字無障礙設計決策 | 不適合 | 對文字與背景組合使用色彩對比檢查器 |
| 兩種色彩之間的明確定義比較 | 不適合 | 使用色彩差異計算工具來取得特定色彩差異指標 |
單一平均值也無法證明品牌合規、無障礙設計符合要求、印刷配對、漆料配對或感知相似性。這些工作需要各自的輸入及檢查方式。在預覽中看起來合理的平均值，仍可能產生無法接受的對比、未能通過正式的色彩差異門檻，或在印刷或顯示流程中出現明顯偏移。
可能影響發布內容的限制
無法使用中繼資料解釋不一致情形，因為工具不會保留或檢查 EXIF 資料、ICC 描述檔、相機中繼資料或隱藏文字區塊。檔名僅作為顯示標籤。工具也不會修改或匯出來源檔案，因此無法準備色彩管理的印刷描述檔，也無法修正原始影像。
複製的 HEX 是計算樣本的精確表示，並不能證明每個裝置都會以相同方式顯示該色彩。瀏覽器算繪、顯示器特性、周圍色彩及視覺適應都可能影響感知。因此，應在評估設計的相同環境中檢查色票。
若要進行可重現的設計工作，請記錄輸入檔案、瀏覽器、顯示的來源尺寸、顯示的取樣尺寸及傳回的 HEX 值。這份記錄比孤立的螢幕截圖更可靠，因為它能擷取可能導致其他程式或其他工作階段產生不同結果的因素。
實用的使用前檢查清單
- 確認單一代表性平均色彩確實能回答你的設計問題。
- 檢查格式、非空檔案要求、MIME 相容性及 20 MB 檔案大小限制。
- 確認解碼後的任一邊緣都不超過 20,000 像素，且來源像素總數維持在 40 million 以內。
- 瞭解完全透明的像素會被忽略，而部分透明的像素則會依不透明度加權。
- 比較來源尺寸與取樣尺寸，以判斷結果是否來自向下取樣的 canvas。
- 對於動態影像，瞭解結果代表的是最初呈現的影格，而非整段動畫。
- 在預定的設計情境中檢查計算出的色票，不要只依賴孤立的預覽。
- 當一致性很重要時，請儲存檔案識別資訊、瀏覽器、尺寸及 HEX 值。
完成這些檢查後，平均色彩可以成為視覺摘要及概略樣式的實用捷徑。但應將它視為明確且經過取樣的結果，而不是調色盤、主導色主張，或特定工作色彩驗證的替代品。
如需深入瞭解，請參閱使用從影像取得的平均色彩之前，我應該比較什麼？。