一張圖片的平均色，是把每個可見像素的紅、綠、藍色版依其透明度加權後，產生出來的一個具代表性 RGB 值，在 Photoshop 中，這個結果是透過「濾鏡 → 模糊 → 平均」產生的。同樣這種單一數值的摘要，也可以在你的瀏覽器裡完成，不必開啟任何影像編輯軟體。Image Average Color Finder 會在本機讀取 PNG、JPEG、WebP、GIF、BMP 或 AVIF 檔案，取樣其像素，把每個 RGB 色版乘以該像素的 alpha 值，再把總和除以合計的 alpha，並四捨五入到最接近的 0 到 255 之間的整數。結果會以六位數的小寫 HEX 與十進位 RGB 三元組顯示，兩者都可以複製。由於整個運算都留在目前的分頁中，檔案與被取樣的像素都不會上傳到伺服器。當你想要一個佔位背景、縮圖色塊，或是快速比對一個 CSS 變數，卻不想開啟完整編輯器時，這就很有用。

how to find the average color of an image photoshop
how to find the average color of an image photoshop

Photoshop 的平均濾鏡回傳的是什麼

Photoshop 內建一個叫做「平均」的濾鏡指令，位於「濾鏡 → 模糊 → 平均」之下。套用它時，Photoshop 會把作用中圖層（或選取範圍內）的每個像素都取代成單一實色。這個顏色是來源中可見像素的紅、綠、藍色版的平均值。結果是以一塊實色填滿呈現出來，所以你看得到平均色，但結果面板中不會印出任何 hex 數值。若要在 CSS、Figma、風格指南或設計權杖中使用這個值，你必須從色票面板挑選這個顏色，或開啟「檢色器」再從那裡複製 hex 值。

「平均」濾鏡在 Photoshop 內部既快速又準確，但它也綁定在完整的編輯器工作流程中。你需要有桌面應用程式、把來源檔案以圖層形式開啟或做出選取範圍，並且在濾鏡套用後還要多按幾下才能取得可用的色碼。對於只想要一個數字這件事來說，這樣的開銷相對這個問題本身而言算是不小。

為什麼瀏覽器工具在這件事上更快

針對「這張圖片可以用哪一個顏色來概括」這個具體問題，一個基於瀏覽器的工具能用更少的準備步驟給出相同的答案。Image Average Color Finder 可讀取最多 20 MB 的 PNG、JPEG、WebP、GIF、BMP 或 AVIF 檔案，並產生單一的 HEX 與 RGB 值。解碼、取樣與平均計算都在目前的分頁中完成，因此圖片不會被上傳到任何地方。像這類工作，開啟 Photoshop、開啟檔案、套用濾鏡、選取滴管工具、複製 hex、再關閉檔案，所耗費的心力遠超過這個問題本身值得的程度。

瀏覽器這條路線在幾個實務層面也占優勢。不需要訂閱、不需要安裝，也不必等桌面應用程式啟動。輸出的就是你可以直接貼進樣式表、Figma 填色，或設計權杖檔案裡的實際 hex 字串。而且因為運算是在本機進行，來源檔案會留在你的裝置上，這在圖片是草稿、客戶提案稿，或任何尚未核准可上傳的內容時就格外重要。

特性Photoshop 平均濾鏡Image Average Color Finder
運作位置Photoshop 桌面應用程式瀏覽器分頁
支援輸入任何已開啟的圖層或選取範圍最大 20 MB 的 PNG、JPEG、WebP、GIF、BMP 或 AVIF
輸出格式視覺化實色填滿，不印出 hex六位數 HEX 與十進位 RGB，可複製
處理位置Photoshop 本機瀏覽器分頁本機
大小限制受文件尺寸與 RAM 限制20 MB 檔案、每邊 20,000 px、總計 40M 像素
動畫檔案作用中圖層的第一個影格瀏覽器解碼完成時所呈現的影格
色彩管理Photoshop 色彩設定瀏覽器色彩管理
最適合在既有 PSD 工作流程中作業快速獨立查詢並取得可複製的代碼

三個步驟取得平均色

  1. 選擇一張支援的圖片，最大 20 MB。PNG、JPEG、WebP、GIF、BMP 與 AVIF 都可以。所選檔案必須非空、使用瀏覽器支援的圖片 MIME 類型，且不得超過 20 MB。
  2. 等待本機解碼完成，並檢視 HEX、RGB、覆蓋率與取樣尺寸。解碼是在目前的瀏覽器分頁中進行。完成後，介面會顯示結果，並回報原始來源尺寸與用於計算的取樣尺寸。
  3. 點擊 HEX 值即可複製，然後在其預定的設計情境中確認色塊。複製出來的值是一個井字號後接剛好六位小寫十六進位數字。如果瀏覽器拒絕剪貼簿權限，該值仍會維持可見且可選取，讓你仍能手動複製。

工具回報的內容以及每個欄位代表什麼

結果面板顯示四項資訊，各自都有特定含義。

  • HEX 是六位數的小寫 hex 代碼，例如 #3a7f9c。這是你設計系統其餘部分可以直接使用的值。
  • RGB 是同一個答案的十進位表示，每個色版介於 0 到 255 之間。
  • 覆蓋率 是取樣到的總 alpha 除以可能的最大 alpha。它告訴你樣本中實際可見的比例，所以覆蓋率偏低就代表這張圖片大部分是透明的，而平均值主要由可見區域主導。
  • 來源與取樣尺寸 告訴你這張圖片原始解碼後的尺寸，以及實際拿去做平均計算的畫布尺寸。像素數在 1,048,576 以下的圖片，會以完整解碼尺寸讀取。較大的圖片會依比例縮放，讓分析用的畫布維持在這個像素預算以內，這也是為什麼結果是一個高解析度的樣本，而不是逐位元組平均每一個來源像素。

這套平均計算規則本身，是一種以 alpha 加權的算術平均。對每個 alpha 不為零的取樣像素，紅、綠、藍每個色版都會乘以該像素的 alpha 值。加權後的色版總和，接著除以總 alpha，並在輸出時四捨五入一次。完全透明的像素不會有任何貢獻，因為它們儲存的 RGB 色版是不可見的，且可能包含任意的編碼器資料。部分透明的像素則依其不透明度的比例做出貢獻。

什麼時候單一平均色是錯誤答案

算術平均會把整張圖片壓平成單一數字，而這種壓平有已知的失效情境，值得在你把這個值套用到設計上之前先認清楚。

兩個權重相同的紅色與藍色像素，會產生一個紫色的平均值，即使來源中根本不存在紫色像素。角落一小塊明亮的點綴色，可能被大片中性色背景稀釋，直到在結果中消失不見。一張有一條綠色草地的天空照片，回傳的會是一種柔和的藍綠色，這作為摘要有意義，但當成「天空的顏色」則具誤導性。這些不是工具的錯誤，而是算術平均本身的特性。

如果你需要的是最常出現的顏色、分開的色票，或具主體感知能力的擷取，相關的Color Palette Generator會更合適。若要做文字的無障礙檢查，Color Contrast Checker會依 WCAG 門檻讀出明確的對比度。如果你需要兩個 hex 值之間明確的感知距離，Color Difference Calculator會回傳一個 CIEDE2000 數值。單一平均值最適合用於粗略的背景配色、佔位樣式、縮圖摘要、設計庫存與快速視覺比較。

使用該值前先驗證

工具中的預覽色塊直接使用計算出的 HEX，因此是最快速的驗證方式。請在這個值實際要使用的燈光與主題環境下觀察色塊，因為外觀取決於顯示器、瀏覽器、周圍色彩與人眼的適應狀態。一個「正確」的 hex 值，在低對比的設計系統中看起來仍可能不對勁。

若要讓設計工作可重現，請記錄輸入檔案、瀏覽器、顯示的來源與取樣尺寸，以及回傳的值。如果之後需要為這個結果辯護，這四項情境資訊能讓你重現它。此工具不會讀取 EXIF、ICC 描述檔、相機中繼資料、顯示以外的檔名，或隱藏的文字區塊，也不會更動或匯出來源檔案，因此任何來源證明都需要由你自己提供。

請不要把單一平均色當作品牌合規、無障礙對比度、印刷配色、油漆配色或感知相似度的證明。算術平均是一種摘要，不是定論。如果這個值最終會用在品牌規範、無障礙稽核、印表機描述檔，或與另一個色票的比對上，請在簽核前先執行對應的專門檢查。

其他程式針對同一張圖片，可能會回傳略有不同的值。它們可能使用全解析度像素而非取樣後的畫布、使用具伽瑪感知或知覺性的數學運算而非直接的算術平均、取用動畫圖片中不同的影格，或採用不同的色彩管理流程。把方法記錄下來，而不只是記錄數字，這些小差異就不再神秘。

底層的像素介面是標準瀏覽器 canvas 的 getImageData 呼叫，記載於MDN getImageData 參考文件與WHATWG canvas 像素操作規範中。加權規則與大小限制，則是建立在這個介面之上的刻意產品選擇，因此結果是一個有文件記載的算術平均，而不是一個不透明的運算。

延伸閱讀：從 Hex 色碼在 Photoshop 中找出互補色。

延伸閱讀：如何在本機找出圖片的顏色編號。