影像的平均色彩是對每個可見像素的紅、綠、藍通道進行單一以 alpha 為權重的算術平均，並以一個六位數的十六進位值顯示。是否使用它，取決於你的專案需要一個代表性色票還是多種不同的色彩 — 平均會將整張圖片壓縮成一個數字，因此適合用於粗略的背景配對、低解析度佔位符以及縮圖摘要，但在此過程中會失去每個強調色、漸層與主體邊界。它並非主色分群模型：兩個權重相同的紅色與藍色像素會產生紫色結果，即使來源中並不存在任何紫色像素。當目標是為容器提供單一代表色調、在素材間進行快速視覺比較，或記錄一張影像整體色彩特徵的可重現紀錄時，請使用平均法。當你需要真正的色板、針對主體的萃取、品牌合規證明、無障礙對比驗證，或油漆／印刷配色時，請跳過平均法，因為這些工作需要為其設計的工具。影像平均色彩尋找器會在瀏覽器本地計算此單一數值，套用以 alpha 為權重的規則，並將非常大的影像降取樣至固定的分析預算，以確保結果在合理輸入下可重現。
平均影像色彩實際上會產生什麼
結果是一個以 alpha 為權重的算術平均值。對於每個 alpha 不為零的取樣像素，其紅、綠、藍通道會各自乘上該像素的 alpha 值。三個加權總和會除以所有取樣 alpha 的總和，並在輸出時僅一次進位為 0 到 255 的整數。完全透明的像素會被排除，因為其儲存的 RGB 通道可能包含任意的編碼器資料；部分透明的像素則會依其不透明度比例進行貢獻。回報的十六進位值永遠包含一個井號，後接六個小寫的十六進位數字，並會在旁邊顯示對應的十進位 RGB。
這是刻意記錄在案的算術平均值，而非感知性、gamma 感知或基於直方圖的計算。作為一個具體範例，取兩個權重相同、完全不透明的像素：紅色 rgb(255, 0, 0) 與藍色 rgb(0, 0, 255)。alpha 總和為 255 + 255 = 510。加權紅色等於 (255 × 255 + 0 × 255) 除以 510，也就是 65,025 / 510 = 127.5，進位後為 128。加權綠色保持為 0，因為兩個像素的貢獻皆為零。加權藍色沿著與紅色相同的路徑計算，同樣進位為 128。輸出為 rgb(128, 0, 128)，或 #800080，一個來源中並不存在的紫色。了解這個行為，是判斷平均法是否契合你工作的關鍵之一。
平均法是正確選擇的時機
當一個數字就足夠時，平均法就是合適的工具。單一代表色彩確實能派上用場的具體情境包括：
- 在完整素材載入前，為縮圖設定粗略的背景或容器色彩。
- 為 LQIP 風格的技術產生低解析度的佔位色調。
- 透過色票比較兩張影像 — 並排比對兩者的平均值，能一眼看出色調的大幅變化。
- 在設計素材庫、情緒板或型錄列中，每個素材以單一色票為目標進行填入。
- 為日後參考，記錄影像整體色彩特徵的快速且可重現的摘要。
| 任務 | 平均法 | 多色彩色板 | 單像素吸管 |
|---|---|---|---|
| 為佔位符或容器提供單一代表色票 | 適用 | 殺雞用牛刀 | 會錯過混合區域 |
| 五個最常出現或最不同的色彩 | 不適用 | 適用 | 不適用 |
| 已知像素的精確色彩 | 不適用 | 不適用 | 適用 |
| WCAG 文字與背景對比 | 不適用 | 不適用 | 不適用 |
| 整體色調的可重現摘要 | 適用 | 部分適用 | 不適用 |
如果你的任務落在表格右側的欄位，平均法將無法滿足你的需求 — 在開啟工具前請先閱讀下一節。
當你需要不同工具時
平均一張影像的色彩，你只會得到一個數字。一旦你需要更豐富的資訊，決策就截然不同。
需要多種不同色彩（包括能在背景中存活的強調色）時，應採用分群或直方圖處理，而非單一平均。為此，配色產生器可從基礎色彩或影像中萃取一組協調的色票，這更貼近多數設計師所說「這張圖裡的色彩」。如果你需要的是某個已知像素的精確通道讀數，正確的工具是吸管而非平均 — 平均會把該像素與其鄰近像素混為一體，回報一個你並未要求的混合數值。
無障礙是另一個問題。平均法無法告訴你內文文字在影像上是否清晰可讀，因為對比是兩個特定色彩在像素層級上的關係。請改用 色彩對比檢查工具並對照 WCAG AA 或 AAA 門檻，選擇真實的文字色彩而非色票平均值。平均色彩工具的結果並非對比值，無論色票看起來多麼合理。
另外兩個用例也完全落在平均法的範圍之外。品牌合規驗證（小型標誌色彩必須符合記載色票）需要取樣像素與記載的容差，而非整張影像的一個數字。感知相似度（你想知道兩個色票在人眼中是否讀為「相同」）需要明確的色彩差異指標，例如 CIEDE2000 — 請使用 色彩差異計算機。油漆配色、印刷配色，以及任何跨媒體的色彩工作流程也都在瀏覽器 RGB 平均的範圍之外，因為色彩管理、色域與基材都會改變結果。
最後，針對主體的萃取是平均法無法做到的事。一張黃色檸檬置於米色背景的圖片，平均後會偏向米色而非黃色，因為較大的中性區域主導了算術結果。如果你需要的是主體本身的色彩，請先將主體切割出來再僅對該區域進行平均，或使用專為主色偵測設計的工具。
如何用三個步驟取得平均色彩
- 選擇一張大小不超過 20 MB 的支援影像。瀏覽器接受 PNG、JPEG、WebP、GIF、BMP 與 AVIF；不支援的格式、空檔案或超過大小上限的檔案會產生明確的錯誤，而非陳舊的結果。
- 等待本地解碼並檢視十六進位值、RGB、覆蓋率與取樣尺寸。介面會同時顯示原始尺寸與實際用於分析畫布的尺寸，因此你可以看出影像是否已被降取樣。覆蓋率是取樣的 alpha 總和除以該樣本中可能的最大 alpha。
- 點擊十六進位值以複製它，然後在預定的設計情境中驗證該色票。剪貼簿會收到一個井號，後接六個小寫的十六進位數字。如果瀏覽器拒絕剪貼簿存取，該數值仍會保持可見且可選取，工具不會回報偽造的成功。
完整流程會在當前的分頁中執行 — 解碼、畫布取樣、以 alpha 為權重的平均以及剪貼簿輸出皆在本地完成 — 因此來源檔案與取樣像素不會被上傳到伺服器或任何影像分析服務。影像平均色彩尋找器會預先揭露所有相關限制，使結果可被稽核而非神祕難解。
解讀覆蓋率與尺寸註記
介面會在十六進位值旁顯示兩個數字：覆蓋率與取樣尺寸。覆蓋率是取樣 alpha 總和與該樣本可能最大 alpha 的比值。覆蓋率為 1.0 代表每個取樣像素皆完全不透明；較低的數字代表樣本中有可觀比例是部分或完全透明的，這總是會把平均值拉向那些不透明像素的結果。遠低於 1.0 的覆蓋率讀數代表來源含有大片透明區域，該結果描述的是圖片的可見部分而非整個畫布。
取樣尺寸來自固定的分析預算。解碼後像素數在 1,048,576 以下的影像以完整解析度讀取；較大的影像則按比例縮放，使分析畫布維持在該像素預算之內。瀏覽器在降取樣時的畫布插值，可能會與完整解析度的離線計算產生細微差異，這正是工具同時顯示原始與取樣尺寸，而非隱藏近似值的原因。
另外還有兩項安全機制。解碼後，影像任一邊不得超過 20,000 像素，且來源不得超過 4000 萬像素。所選檔案本身不得為空，必須使用支援的 MIME 類型，且不得大於 20 MB。這些限制降低了小型壓縮檔膨脹為過量畫布記憶體的風險，未通過任何限制的影像會產生明確的錯誤，且不會留下陳舊結果。
重現與驗證結果
不同程式會回傳不同的平均值，因為它們做出不同的選擇。有些使用完整解析度的像素；有些採用 gamma 感知或感知性數學；有些平均的是不同的動畫幀。影像平均色彩尋找器刻意記錄其規則 — 以 alpha 為權重的算術平均、僅在輸出時進位一次、在降取樣的畫布上 — 使結果可被重現並加以說明。
為了可重現的設計工作，請記錄四項內容：輸入檔案、瀏覽器與版本、顯示的原始與取樣尺寸，以及回傳的十六進位值。有了這四項資訊，數月後仍可重新產生平均值，並與原始紀錄進行比對。底層的畫布像素介面記載於 MDN CanvasRenderingContext2D.getImageData 參考資料 與 WHATWG HTML canvas 像素操作規範，其中描述了工具所讀取的標準 8 位元 RGBA 緩衝區。
請勿將單一平均值視為品牌合規、無障礙對比、印刷配色、油漆配色或感知相似度的證明。這些檢查需要各自的工具與各自的成功定義；平均法是起點，而非裁決。請將該色票視為描述整張圖片的一個誠實數字，並在確實只需一個數字的工作中使用它。
如果你正在權衡選項，是否該產生 CSS 三角形？一張決策檢查清單對此有詳細說明。
如果你正在權衡選項，記錄使用影像平均色彩的步驟對此有詳細說明。