影像平均顏色尋找工具會將上傳的 PNG、JPEG、WebP、GIF、BMP 或 AVIF 影像中每個可見的像素簡化為一個代表性的 RGB 顏色,並以六位數的 HEX 值回報,這是在您的瀏覽器中以本地端方式計算的每個通道的阿爾法加權算術平均數。打開工具,選擇一個支援的檔案(最大 20 MB),頁面就會解碼影像、採樣其像素、將每個紅、綠、藍通道乘以該像素的阿爾法值、除以總阿爾法值,然後四捨五入到 0 到 255 之間最近的整數一次。接著介面會將該顏色顯示為色塊,並附上 HEX、十進位 RGB、阿爾法覆蓋率,以及來源與採樣尺寸,方便您複製該數值並與您的設計進行比對。由於所有運算都在目前的分頁中完成,來源檔案不會上傳到任何伺服器,也不會被送到影像分析服務。
這個工具實際計算的是什麼
這個單一數值是帶有透明度明確規則的算術平均數。對於每個具有非零阿爾法的採樣像素,其紅、綠、藍通道會乘以該像素的阿爾法值。然後將加權後的通道總和除以所有採樣像素的總阿爾法值,並四捨五入到 0 到 255 之間最近的整數。
完全透明的像素不會貢獻任何數值。其儲存的 RGB 通道對檢視者而言是不可見的,且可能包含任意的編碼器資料,因此工具會完全忽略它們。部分透明的像素則會按其不透明度的比例貢獻:在一片不透明像素中,一個阿爾法值為 128 的像素,其貢獻大約是同色但阿爾法值為 255 像素的一半。
回報的阿爾法覆蓋率是採樣的阿爾法總和除以該採樣中最大可能阿爾法值。100% 的覆蓋率表示每個採樣的像素都是完全不透明的。50% 的覆蓋率表示採樣的平均不透明度為 50%,這通常意味著影像包含大量透明區域或一個大面積的淡化區塊。
這不是主色擷取或調色盤擷取。如果影像中有兩個權重相同的不透明像素,一個紅色和一個藍色,即使來源中並不存在任何紫色像素,其平均值也會是紫色。一個小而明亮的點綴色可能會被一個大面積的中性背景稀釋。這個結果描述的是整張影像,而不是其中最常出現或最顯眼的顏色。
如何在線上尋找影像的平均顏色
- 在支援 canvas 像素存取的瀏覽器中開啟影像平均顏色尋找工具。
- 點擊檔案輸入欄位,選擇一個非空白且不超過 20 MB 的 PNG、JPEG、WebP、GIF、BMP 或 AVIF 影像。
- 等待頁面在本地端解碼該檔案。接著介面會顯示計算出的 HEX 值、十進位 RGB、阿爾法覆蓋率,以及來源與採樣尺寸。
- 點擊可見的 HEX 值即可將其複製到剪貼簿。複製的文字永遠會恰好包含一個井字號,後面接著六個小寫的十六進位數字。
- 將 HEX 貼到您的樣式表、設計檔案或 token 清單中,然後在預定情境中檢視該色塊,確認無誤後再定稿。
一個快速查看實際運算的方式:想像一個包含兩個像素的採樣,一個是完全不透明的紅色像素,RGBA 為 (255, 0, 0, 255),另一個是完全不透明的藍色像素,RGBA 為 (0, 0, 255, 255)。加權後的紅色總和為 255 × 255 = 65,025。加權後的綠色總和為 0。加權後的藍色總和為 0 × 255 + 255 × 255 = 65,025。阿爾法總和為 255 + 255 = 510。每個加權總和除以 510 後得到 127.5、0 和 127.5,四捨五入後為 128、0 和 128。結果為 rgb(128, 0, 128),即 HEX #800080。來源中並不存在紫色像素,但平均值卻是紫色。這樣的行為是預期的:此工具回報的是算術平均數,而非分群結果。
為何此結果與其他顏色工具不同
不同的工具回答不同的問題。下表總結了平均顏色方法與其他幾個常見替代方案之間的定位。
| 方法 | 您會得到什麼 | 最適合用於 |
|---|---|---|
| 阿爾法加權算術平均(本工具) | 整張影像的一個 RGB 與 HEX 值 | 粗略的背景配對、佔位符樣式、縮圖摘要、設計盤點 |
| 基於頻率的主色 | 單一最常出現的顏色 | 識別品牌標誌或產品顏色 |
| 調色盤或分群擷取 | 一組代表性的色塊清單 | 建立情緒板或配對美術風格 |
| 在指定座標使用滴管取樣 | 選定點的一個像素 | 比對照片中的精確位置 |
單一平均值是個實用的摘要,但無法取代調色盤工作。當您需要一組協調的色塊而非單一平均值時,調色盤產生器會挑選一個基準色,並回傳互補色、類似色與三等分色組合,讓您能直接套用於設計系統中。
單一平均顏色的常見用途
設計師與開發者在需要一個快速的替代值,而非完整分析時,會選擇使用平均顏色。以下是只需要一個 HEX 就足夠的幾種情境:
- 挑選一個能與主視覺影像搭配的佔位符背景色調,在最終素材仍在編修時先行使用。
- 從標誌或螢幕截圖填入 CSS 變數(例如 --theme-tint),讓一個尚未完成的頁面在無需手動取樣的情況下仍讀起來符合品牌形象。
- 從一張圖庫照片產生扁平化的縮圖或清單視覺重點色,而不需花費成本進行調色盤分析。
- 在設計盤點中為影像標記,讓一整批橫幅或封面資料夾能依整體色調排序。
- 透過平均值快速視覺比對兩個素材,當您只關心偏暖或偏冷、偏亮或偏暗時,這比比較調色盤更為迅速。
若目標是品牌合規性驗證、文字對比的無障礙檢查、油漆或印刷對色,或兩個特定色塊之間的感知相似度比較,這個單一平均值就並非正確的數字。請使用對比檢查工具來檢驗文字易讀性,使用定義良好的色差指標來進行顏色對顏色的比較,並使用經校正的色彩管理流程來處理實體輸出。
限制與準確度考量
有幾項明確的界線決定了工具是否能完成工作,以及結果與完整解析度平均值之間的接近程度。
所選的檔案必須非空白、使用瀏覽器支援的影像 MIME 類型,且大小不超過 20 MB。解碼後,任一邊的像素不得超過 20,000 個,且總像素不得超過 4,000 萬。這些上限是為了避免一個小型壓縮檔案在解碼後膨脹為過大的 canvas 記憶體。不支援的資料、解碼失敗、無法存取的 canvas、無效的尺寸,以及沒有可見像素的影像,都會產生明確的錯誤訊息,而不是回傳過時的結果。
解碼後的大型影像會在分析前先進行縮減採樣。像素數在 1,048,576 以下的影像會以其解碼後的尺寸讀取。較大的影像會按比例縮放,使分析的 canvas 維持在該像素預算之內。介面會同時回報來源與採樣尺寸,讓使用者能直接看到所做的近似處理。瀏覽器的內插運算可能會讓最終數值與離線的全解析度計算略有偏差,因此若要進行可重現的設計工作,請記錄輸入檔案、瀏覽器、所顯示的來源與採樣尺寸,以及回傳的數值。
Canvas 像素存取是以標準的 8 位元 RGBA 資料形式請求。此工具不會保留或檢查 EXIF、ICC 設定檔、相機中繼資料、超過顯示用途的檔名,或隱藏的文字區塊,也不會修改或匯出來源檔案。瀏覽器的色彩管理、寬色域轉換、方向處理與動畫行為會因格式與瀏覽器而異。動畫格式會以瀏覽器完成初次影像解碼時所曝光的那一幀來進行評估;此工具不會對每一幀取平均,也不會考量幀的持續時間。此處所用的底層 RGBA 像素介面記錄於 MDN 的 CanvasRenderingContext2D.getImageData 參考資料以及 WHATWG 的 canvas 像素處理規範中。
若想更深入了解,請參閱在瀏覽器中取得影像的平均顏色。
若想更深入了解,請參閱如何在不使用 Photoshop 的情況下取得影像的平均顏色。