一張影像的單一代表色編號，是一個六位數的十六進位代碼，它會將圖片所有可見像素濃縮成一個 HEX 值，例如 #4A6B8C 或 #C9E3B1，計算方式是將每個紅色、綠色和藍色通道乘以該像素的 alpha 值，再除以總 alpha，然後四捨五入到 0 到 255 之間最接近的整數。不同於由多個色塊組成的調色盤，或主色叢集分析的結果，這是所有取樣像素的單一算術平均數——一個你可以直接貼進 CSS、Figma 或設計規格中，作為快速占位符或背景配色的值。整個計算過程完全在當前的瀏覽器分頁內執行，透過標準的 canvas getImageData 介面，也就是 MDN canvas getImageData 參考文件中所記載的、從 2D canvas 讀取 RGBA 陣列的同一種像素資料方法。這代表整個操作不需上傳檔案即可重現，而且回傳的數值只取決於瀏覽器解碼的內容、canvas 降取樣的結果，以及 alpha 通道的加權方式。

how to find the color number of an image
如何找出影像的色號

「色號」究竟是什麼

當設計師提到「影像的色號」，他們通常指的是一個特定、可直接複製貼上的代碼，可以放進樣式表或品牌文件裡。最常見的格式是 HEX——井字號後接六個字元，範圍為 0-9 和 a-f，其中每兩個字元分別編碼紅、綠、藍強度的一個位元組。所以 #000000 是黑色，#FFFFFF 是白色，而 #3D7AB8 是一個特定的中藍色。RGB 以三個 0 到 255 的十進位數字表示同一概念，而 HSL 或 CMYK 則重新排列相同的通道，以適應不同的思考模型。

對於單一像素來說，這些格式可以互換，因為你只是在描述一個 256 乘 256 乘 256 色彩方塊中的一個點。然而對於一張影像，通常會有數百萬個像素，問題就變成如何將它們壓縮成一個數字。數種不同的數學答案都是有效的：

  • 將每個通道相加，再除以像素總數的算術平均。
  • 對部分透明的像素給予較小影響力的加權平均。
  • 尋找典型值而非平均數的中位數或眾數。
  • 挑選主色或最飽和色彩的感知叢集。

本地瀏覽器工具所產生的「色號」採用第二種做法。它將每個像素的透明度視為其 RGB 貢獻的權重，因此完全可見的像素完整計入，而幾乎看不見的像素則幾乎完全不計。

三個步驟從影像取得色號

從磁碟上的影像到剪貼簿中的 HEX 值，只需三個動作。流程假設你已在瀏覽器中開啟 Image Average Color Finder。

  1. 選擇一個不超過 20 MB 的支援影像。可接受的格式包括 PNG、JPEG、WebP、GIF、BMP 和 AVIF。所選檔案必須非空，且使用瀏覽器可辨識的影像 MIME 類型。
  2. 等待本地解碼完成，並檢視 HEX、RGB、覆蓋率和取樣尺寸。該工具會透過 canvas 像素處理介面讀取檔案，對大型解碼後的影像進行縮放，使分析 canvas 維持在 1,048,576 像素以內，並套用上述規範中說明的 alpha 加權公式。
  3. 點擊 HEX 值即可複製，然後在預期的設計情境中驗證色塊。複製的字串永遠剛好是井字號後接六個小寫十六進位數字，同樣的值會以十進位 RGB 並排顯示。

如果檔案不支援、解碼失敗、尺寸無效，或不含任何可見像素，工具會顯示明確的錯誤訊息而非過時的結果，讓你可以直接換上另一張影像再試一次，而無需猜測哪裡出了問題。

解讀 HEX、RGB 和覆蓋率欄位

第二步完成後，介面通常會顯示四項資訊。HEX 是你最終要取的六位數值，也是複製到剪貼簿的欄位。RGB 是同一個顏色以 0 到 255 的三個整數表示——當工具或樣式表接受十進位格式時很實用。覆蓋率是取樣總 alpha 除以該樣本最大可能 alpha。接近 100% 的值代表影像大部分是不透明的，而像 32% 這樣的低覆蓋率則告訴你，平均值是由相對少量的可見區域構成，因此更容易被剛好出現的像素拉動。

第四個欄位是來源與取樣尺寸這對數值。來源是原始檔案解碼後的大小，取樣則是分析 canvas 實際讀取的尺寸。當取樣小於來源時，代表工具為了效能而進行了降取樣，結果描述的是高解析度子集，而非逐位元組對應的逐像素平均。這個區別會被明確顯示而非隱藏，讓你能自行判斷降取樣後的答案是否符合需求。

一個簡單的計算範例能讓加權更具體。取兩個權重相同、完全不透明的像素：一個純紅 (255, 0, 0)，一個純藍 (0, 0, 255)。每個紅色通道總和為 255 乘以其像素 alpha，藍色通道同理；兩個通道總和再除以 510 的合併 alpha。四捨五入到最接近的整數，結果為 (128, 0, 128)，也就是 #800080——一個原本在來源中並不存在的紫色。正是相同的原理，使得一個小而鮮豔的強調色會被大面積的中性背景稀釋，也使得平均結果看起來與實際主導畫面的顏色截然不同。

工具回報的欄位 定義值或公式
最大檔案大小 20 MB
解碼後的最大邊長 每邊 20,000 像素
最大來源像素數 40,000,000 像素
分析 canvas 上限 按比例縮放，使 canvas 不超過 1,048,576 像素
通道四捨五入 介於 0 到 255 之間的最接近整數，於輸出時僅執行一次
輸出格式 井字號後接剛好六個小寫十六進位數字

為何另一個程式會回傳不同的色號

因為結果取決於整個管線中的每個步驟，兩個工具可能各自回報一個「正確」卻彼此矛盾的 HEX。Image Average Color Finder 的精確步驟為：在本地解碼、限制解碼後尺寸、按比例取樣至最多 1,048,576 個 canvas 像素、忽略零 alpha 像素、以 alpha 為 RGB 通道加權、於輸出時僅四捨五入一次，並公開來源與取樣尺寸。其他軟體可能省略其中某個步驟，或以不同方式執行。

常見的差異來源：

  • 像素覆蓋率：另一個程式可能以全解析度平均每個像素，而瀏覽器工具會降取樣以符合其像素上限。
  • 透明度處理：忽略 alpha 的工具會把一個 1% 不透明的紅色像素當作貢獻了 100% 的紅色像素，這在數學上等同於將平均值往紅色方向拉。
  • 色彩管理：gamma 感知運算、寬色域轉換，以及 ICC 設定檔處理都會改變通道權重，根據 WHATWG HTML canvas 像素處理規範。
  • 動畫：動畫 GIF 或動畫 WebP 只能取得瀏覽器初次解碼的畫格，而非依時間加權的平均。
  • 四捨五入：將中間結果四捨五入兩次，相對於只在最後四捨五入一次，會在最後一個十六進位數字上產生微小但可見的差異。

如果你的紀錄很重要，請一併擷取輸入檔名、瀏覽器、顯示的來源尺寸、顯示的取樣尺寸，以及回傳值，因為同一支程式在同一瀏覽器上執行兩次，通常能完全重現相同的數字。

當單一數字不足以完成任務時

單一 HEX 在占位樣式、縮圖摘要、粗略背景配色、設計盤點列，以及只需一個代表色的快速視覺比較中確實有用。對於設計系統、精確的品牌參考、無障礙決策或印刷輸出來說，這是錯誤的答案，若被當作定論可能會誤導判斷。

  • 如果你的影像實際上包含多個重要顏色——例如一個含三或四個品牌色塊的標誌——平均值會撒謊。請使用會回傳分離色塊的調色盤產生器。
  • 如果你需要判斷文字在所選 HEX 上的無障礙對比，請將兩者送進專門的對比檢查工具，而非用肉眼判讀色塊。
  • 如果你需要在感知上區分兩個相近的顏色，必須使用定義明確的色差公式，而非單一的平均值。
  • 如果你需要印刷用的數值，請將任何螢幕平均值視為起點，逐通道進行轉換，並理解 CMYK 百分比會因色域差異而僅為近似值。

將這個單一數字視為快速、本地、透明的近似值：用在原本會用肉眼判讀色塊的地方，但一旦工作要求超越單一樣本的精確度，就應改用其他工具。

如果你正在權衡選項，從影像取得 CMYK 轉 RGB：擷取與預覽對此有詳細說明。

如果你正在權衡選項，透明像素與影像的平均色對此有詳細說明。