一張圖片的平均色彩，是從解碼後的影像中取樣像素後，所算出的單一以 Alpha 為權重的 RGB 算術平均，並以六位數 HEX 值與十進位 RGB 三元組表示。這個數字在你的瀏覽器中運算，針對你選擇的檔案回傳，且絕不代表最常出現的色彩、主體或任何知覺加權。它只是對「通過取樣與透明規則」之通道的純粹平均，而這個定義也正是大多數錯誤的起點。讀者常預期結果會像主色擷取工具、吸色器或知覺混色那樣運作，並把任何偏差都視為工具的瑕疵。實際上，結果遵循一份有文件記載的數學合約：完全透明的像素不貢獻任何值，部分透明的像素依其 Alpha 比例貢獻，較大的來源影像會在平均前被縮取樣到固定的畫布預算，每個通道僅會從 0 到 255 四捨五入一次到最接近的整數。一旦這個合約清楚，輸出就不再令人意外。Image Average Color Finder 直接公開了這份合約，因此你在同一檔案、同一瀏覽器、同一尺寸下複製到的數字是可重現的。
「平均色彩」實際上計算的是什麼
平均色彩是單一數值，而非調色盤。Image Average Color Finder 使用以 Alpha 為權重的算術平均：對於每個 Alpha 不為零的取樣像素，其紅、綠、藍通道都會乘上該像素的 Alpha 值，加權後的通道總和再除以 Alpha 總和，結果四捨五入到 0 到 255 之間最接近的整數。完全透明的像素不貢獻任何值，因為其儲存的 RGB 通道不可見，且可能含有任意的編碼器資料。部分透明的像素則依其不透明度按比例貢獻。
用一個簡單的例子來看規則如何運作。假設有一列 2 像素，像素 A 是不透明紅色 rgba(255, 0, 0, 255)，像素 B 是半透明藍色 rgba(0, 0, 255, 128)。Alpha 總和為 255 + 128 = 383。加權紅色總和為 255 × 255 + 0 × 128 = 65,025。加權綠色總和為 0。加權藍色總和為 0 × 255 + 255 × 128 = 32,640。將各加權總和除以 Alpha 總和並四捨五入，得到紅色 = 65,025 ÷ 383 ≈ 169.8 → 170，綠色 = 0，藍色 = 32,640 ÷ 383 ≈ 85.2 → 85。結果為 rgb(170, 0, 85)，也就是 #AA0055，一個來源檔案中並不存在的偏紫色單一值。這就是算術平均的文件化行為，也是為什麼兩個等權重、不同顏色的像素會產生第三種顏色，而非其中之一的輸入色。
MDN 的 getImageData 條目說明了用來讀取這些資料的 RGBA 像素介面，而 WHATWG HTML canvas 像素操作規範則定義了此實作所對應的 canvas 色彩空間。加權規則與限制是刻意在該介面上方所做、有文件記載的產品選擇。
平均色彩數字在哪裡會出錯
錯誤通常來自於假設平均色彩的行為像另一種工具。最常見的模式記載如下。
- 把平均當成主色。主色是影像中最常出現的色彩；平均則是單一的算術平均值。兩個等權重的紅色與藍色像素會產生一個紫色平均，即使來源中並不存在紫色像素。如果你需要最常出現的色彩，請使用調色盤工具。
- 預期小面積點綴色會保留。小面積的明亮點綴可能被大面積的中性背景稀釋，因為每個像素對平均的貢獻是均等的。一張 95% 為白色、5% 為亮橘色的照片，平均後會是偏暖的近白色，而非橘色。
- 忘記透明度。完全透明的像素不貢獻任何值，因為規則會忽略它們，所以透明的畫布區域不會稀釋結果。部分透明的像素依其 Alpha 按比例貢獻，因此半透明的邊緣或淡化的疊加層，會把平均拉離肉眼所讀到的顏色。
- 忽略縮取樣。較大的解碼後影像會按比例縮放，使分析畫布維持在或低於 1,048,576 像素。在或低於該預算內的影像，會以其解碼尺寸讀取。因此 HEX 描述的是一份具代表性的畫布取樣，來源與取樣尺寸會一併顯示，讓這項近似是可見的而非隱藏的。
- 假設為知覺式運算。此平均值是在 8 位元通道空間中的算術平均。Gamma 感知式、知覺式或色彩管理式的運算可能會回傳不同的值；以全解析度取樣或使用動畫影像不同畫格的其他程式，也可能回傳不同的值。
- 把數值用於錯誤的目的。單一平均值並不能作為品牌一致性、無障礙對比、印刷相符、油漆相符或知覺相似性的證明。不同的檢查需要不同的工具。
三個步驟取得可靠的平均值
為避免上述大多數錯誤，請依照以下流程使用 Image Average Color Finder。
- 選擇一個不超過 20 MB 的支援影像。所選檔案不得為空，必須使用瀏覽器支援的影像 MIME 類型（PNG、JPEG、WebP、GIF、BMP 或 AVIF），且大小不超過 20 MB。解碼後，長寬任一邊不得超過 20,000 像素，總像素不得超過 4,000 萬。這些限制能降低小壓縮檔在解碼後膨脹為過大畫布記憶體的風險。
- 等待本機解碼並檢視 HEX、RGB、覆蓋率與取樣尺寸。檔案會在當前分頁中解碼，畫布上限為 1,048,576 像素，介面會同時顯示來源與取樣尺寸，讓你能看到實際被平均的內容。處理全程都在瀏覽器中進行，因此檔案與取樣像素不會被上傳到任何影像分析服務。
- 點擊 HEX 值以複製它，然後在預期的設計情境中驗證色塊。預覽色塊直接使用計算出的 HEX，可用於快速的合理性檢查；外觀仍會受顯示器、瀏覽器、主題環境與人眼適應影響，因此請把數值貼入實際的設計中，而非僅信任色塊本身。若你的瀏覽器封鎖剪貼簿存取，數值仍會保持可見且可選取，且介面不會虛偽地宣稱複製成功。
記錄輸入檔案、瀏覽器、所顯示的來源與取樣尺寸，以及回傳值，以利於可重現的設計工作。複製的數值永遠嚴格是一個井字號後接六個小寫十六進位數字。
當平均色彩是錯誤的工具時
本工具回傳的單一平均值，最適合用於粗略的背景相符、佔位樣式、縮圖摘要、設計盤點與快速的視覺比較。它無法取代針對不同問題所設計的工具。下表整理了讀者容易誤用平均的情境，以及更貼合實際目標的工具。
| 你的目標 | 為何平均值可能誤導 | 此目標的更佳工具 |
|---|---|---|
| 挑選品牌點綴色 | 小面積的明亮點綴會被周圍像素稀釋 | Color Palette Generator |
| 驗證文字對比 | 單一平均值無法同時代表前景與背景 | Color Contrast Checker |
| 量測知覺差異 | 算術平均忽略知覺加權 | Color Difference Calculator |
| 擷取多色調色盤 | 單一數值無法代表多種相異色彩 | Color Palette Generator |
| 比對油漆或印刷輸出 | 螢幕上的算術結果不等於實體顏料的相符 | 具備色彩管理、以儀器為基礎的工作流程 |
Color Palette Generator 能區分不同的色彩，Color Contrast Checker 會對所選的一對顏色套用既定的對比比例，Color Difference Calculator 則會在兩個不透明 HEX 值之間回傳一個依標準定義的度量。當目標是替整張影像取得一個代表性顏色時，平均是對的工具；當目標是其他任何事時，請改用專屬工具。
可重現性與驗證
一旦你記錄了輸入條件，大多數錯誤就會變得不可見。螢幕上的數字取決於五件事：檔案位元組、瀏覽器、來源尺寸、取樣尺寸，以及解碼時所取得的動畫畫格。兩個程式可能對同一檔案回傳不同的值，因為它們在這五項輸入中有任一項不同：全解析度取樣與縮取樣、Gamma 感知式與算術式運算、第一畫格與最後一畫格，或不同的色彩管理。
請擷取檔名、瀏覽器與版本、所顯示的來源與取樣尺寸，以及回傳的 HEX。若你需要在設計審查中為數字辯護，或在數月後重現它，這四項事實就足以偵測任何漂移。Image Average Color Finder 在介面中顯示來源與取樣尺寸，讓這份紀錄只需一個點擊即可取得，而非藏於設定面板中。工具不會保留或檢查 EXIF、ICC 設定檔、相機中繼資料、僅供顯示的檔名以外的資訊，或隱藏的文字區塊，也不會修改或匯出來源檔案，因此你所看到的，正是實際被平均的內容。
最後一道防線：永遠不要把單一平均值當作品牌一致性、無障礙對比、印刷相符、油漆相符或知覺相似性的證明。文字對比請使用 Color Contrast Checker，色彩差異度量請使用 Color Difference Calculator，並把平均值保留給它被設計用來產生的粗略、影像層級摘要。
延伸閱讀：從圖片取得網頁安全色：擷取任何取樣 HEX。
延伸閱讀：如何檢查圖片的平均色彩結果。