在從影像取得平均色彩之前,請先比較預定用途、可見的構圖、alpha 涵蓋率、來源與取樣尺寸,以及以 alpha 加權的算術平均數是否適合最終的設計情境。
影像平均顏色尋找器會將單一影像中的可見像素縮減為一個具代表性的 RGB 顏色,並以六位數的 HEX 值及十進位 RGB 顯示。當你需要快速掌握整體色調時,它很有用;但當你需要經過排序的調色盤,或與特定主題綁定的顏色時,就不適用。
由於平均運算會壓縮視覺差異,僅檢查 HEX 數字看起來是否合理並不夠。你還需要知道該數字代表什麼、取樣影像能多忠實地呈現來源,以及產生的色樣是否適合預定使用的位置。

決定你需要哪一類色彩結果
首先,先確認你是在描述整張影像,還是從影像的不同部分選取顏色。算術平均會依每個符合條件的取樣像素之顏色與不透明度來處理。它不會找出最常見的顏色、隔離物件,也不會辨識視覺上重要的主體。
| 目標 | 應比較的項目 | 最適合的結果 |
|---|---|---|
| 整體色調或背景配對 | 將單一彙整平均值與影像廣泛的背景及中性區域相比 | 單一具代表性的顏色 |
| 最常見的顏色或分離的色樣 | 將單一彙整平均值與一組具代表性的色彩區域相比 | 多色調色盤 |
| 特定主體的擷取 | 將整張影像的結果與特定物件或區域相比 | 具主體感知能力的擷取,而非單一平均值 |
| 文字可讀性 | 將前景與背景的配對,而非單一影像數值 | 對比度檢查結果 |
| 兩個已知顏色的接近程度 | 兩個已定義的 HEX 輸入值及特定色彩差異度量 | 色彩差異結果 |
影像構圖可能使平均值在特定用途下產生誤導。例如,權重相同的紅色與藍色像素會產生紫色平均值,即使來源中沒有任何紫色像素。小型的明亮強調色也可能被大片中性背景稀釋。請將結果與你真正預期有人會注意到的視覺元素相比。
單一平均值最適合用於概略的背景配對、佔位樣式、縮圖摘要、設計資產清冊及快速視覺比較。如果該顏色將代表標誌、產品、人物或焦點物件,請分別檢查該區域,不要直接假定整張影像的平均值能代表它。
瞭解平均公式與透明度
對於每個 alpha 值不為零的取樣像素此工具會將每個紅色、綠色及藍色通道乘以該像素的 alpha 值,然後將每個加權通道總和除以 alpha 總和,並一次四捨五入至 0 至 255 之間的最近整數。每個通道的公式為:加權通道 = 通道值乘以 alpha 的總和,除以 alpha 的總和。
完全透明的像素不會提供任何貢獻,因為其儲存的 RGB 值不可見,而且可能包含任意的編碼資料。部分透明的像素則依其不透明度按比例提供貢獻。Alpha 涵蓋率會另行顯示為取樣 alpha 總和除以整個取樣中最大可能的 alpha,因此請將該數值與透明度在影像中的角色相比。不存在通用的涵蓋率門檻;可接受的值取決於該顏色預定代表的內容。
此實作會要求標準的 8 位元 RGBA 畫布像素。MDN CanvasRenderingContext2D.getImageData 參考資料及WHATWG 畫布像素操作規格說明了此基礎介面。所得結果是瀏覽器畫布色彩資料中的算術平均,而非以頻率為基礎的主導色彩群集,也不是感知色彩距離分數。
比較輸入條件與取樣方式
在信任輸出結果之前,請先檢視決定此工具能否分析檔案,以及結果能在多大程度上代表原始檔案的限制。
| 檢查項目 | 已定義的限制或行為 | 重要性 |
|---|---|---|
| 選取的檔案 | 不得為空、大小不得超過 20 MB,且須提供支援的瀏覽器影像 MIME 類型 | 無法分析不支援或尺寸過大的檔案 |
| 支援的格式 | PNG、JPEG、WebP、GIF、BMP 及 AVIF | 瀏覽器必須能夠解碼所選格式 |
| 解碼後的邊長 | 任一邊均不得超過 20,000 像素 | 此安全措施可限制過度的畫布記憶體使用量 |
| 解碼後的來源面積 | 來源不得超過 40,000,000 像素 | 小型壓縮檔案仍可能展開成非常大的解碼影像 |
| 分析取樣 | 最多 1,048,576 個畫布像素;較大的影像會按比例縮放 | 結果描述的是取樣影像,而非每個來源像素 |
| 動態影像 | 只會評估瀏覽器完成初始解碼時顯示的影格 | 不包含影格持續時間及其他影格 |
尺寸在 1,048,576 像素預算內的影像,會依其解碼後的尺寸讀取。較大的影像則會在分析前按比例縮放。之後,瀏覽器插值可能造成結果與針對每個完整解析度像素執行的離線計算略有差異。在將高解析度結果作為完整檔案的精確量測值之前,請先比較顯示的來源尺寸與取樣尺寸。
不支援的資料、解碼失敗、無法使用畫布、無效尺寸,以及沒有可見像素的影像,都會產生明確錯誤,且不會留下過時的結果。處理作業會留在目前的瀏覽器分頁中:選取的檔案與取樣像素不會上傳至 Lizely 或影像分析服務,來源檔案也不會被修改或匯出。
取得並驗證平均顏色
- 選取影像。 選擇支援的 PNG、JPEG、WebP、GIF、BMP 或 AVIF 檔案,檔案不得為空,且大小不得超過 20 MB。瀏覽器開啟檔案後,該檔案也必須通過解碼尺寸與像素數安全措施。
- 等待本機解碼。 檢視顯示的六位數 HEX、十進位 RGB、alpha 涵蓋率、來源尺寸及取樣尺寸。這些欄位會說明計算了什麼,以及是否發生向下取樣。
- 將結果與影像比較。 檢查可見構圖是否由平均值所代表的顏色主導、透明度是否改變了權重,以及取樣尺寸是否符合你的精度需求。
- 複製 HEX 值。 點選顯示的 HEX 值即可複製。複製的值一律包含一個井號,後接恰好六個小寫十六進位數字。如果瀏覽器政策拒絕剪貼簿權限,該值仍會保持可見且可選取。
- 套用並驗證。 將該值貼入預定的設計或應用程式,並在周圍色彩旁檢視色樣。確認它符合原始用途,不要自動假定數學平均值就是最佳設計選擇。
在預定應用程式中檢查色樣
預覽色樣會直接使用計算出的 HEX,但其顯示出來的顏色仍取決於螢幕、瀏覽器、主題周圍環境及人眼適應。在工具中看起來合適的值,在鄰近色彩旁或另一個螢幕上可能會有不同表現。
- 若用途是概略的背景色調、佔位元素、縮圖摘要、設計資產清冊或快速視覺比較,只要影像的整體構圖符合該用途,單一具代表性的顏色可能就已足夠。
- 若要取得最常見的顏色、分離的色樣或具主體感知能力的擷取結果,請改用調色盤產生器,不要將單一彙整平均值視為調色盤的替代品。
- 若要檢查文字可讀性,請使用色彩對比度檢查器檢查實際的前景與背景配對。單憑影像平均值無法判斷 WCAG 對比度。
- 若要取得已定義的色彩差異度量,請使用色彩差異計算器。
不要將單一平均值視為品牌規範、無障礙對比度、印刷配對、塗料配對或感知相似性的證據。瀏覽器色彩管理、方向處理、廣色域轉換及動畫行為可能因格式與瀏覽器而異。對於印刷或塗料決策,僅憑螢幕 RGB 平均值,不能證明來源顏色會與實體生產製程相符。
記錄結果,以利做出可重複的決策
為了確保設計工作可重現,請記錄輸入檔案、瀏覽器、顯示的來源尺寸與取樣尺寸,以及傳回的值。這些細節能讓其他審查者分辨計算結果變更、檔案變更、瀏覽器變更、取樣結果變更或設計情境變更。
其他程式可能會傳回不同的值,因為它使用完整解析度像素、不同的向下取樣方式、感知 gamma 或感知數學運算、其他動畫影格,或不同的色彩管理。這些差異不會自動表示其中任一結果不正確;它們顯示必須說明計算方法與比較目標。
此工具不會檢查 EXIF 資料、ICC 設定檔、相機中繼資料、顯示用途以外的檔名,或隱藏的文字區塊。當預定用途、構圖、透明度、取樣細節、輸出格式及應用情境都支持該結果時,alpha 加權平均值可作為實用的摘要顏色,但不能取代調色盤分析或特定顏色驗證。