選一張圖片，開啟 圖片平均色彩尋找器，工具會完全在您目前的瀏覽器分頁內回傳一個以 alpha 權重的 HEX 與 RGB 值 — 檔案本身永遠不會被上傳。您收到的精確數字，是取樣像素的 alpha 加權算術平均值:對於每個 alpha 不為零的取樣像素，其紅、綠、藍通道會各自乘上該像素的 alpha 值，接著把加權後的通道總和除以 alpha 總和，然後把每個通道四捨五入到 0 到 255 之間最接近的整數。完全透明的像素不會貢獻任何數值，因為它們儲存的 RGB 通道可能帶有任意的編碼器資料;半透明的像素則會按照其不透明度比例來貢獻。因此，得到的結果是肉眼所見的真正平均值，而不是主色群聚，也不是單一像素的吸色器讀數。這個差別是您在開始之前最需要理解的事情，因為它決定了哪些設計工作這個工具能夠乾淨俐落地解決，哪些工作則需要改用其他工具。
在開啟工具之前您需要準備什麼
您只需要準備好三件事:一個檔案、一個目前的瀏覽器分頁，以及對「一個平均色彩」在您的專案中應該代表什麼的大致概念。
檔案是最具體的一項。這個工具接受 PNG、JPEG、WebP、GIF、BMP 或 AVIF。選擇的檔案必須是非空白的、使用瀏覽器支援的圖片 MIME 類型，並且大小不超過 20 MB。在瀏覽器解碼檔案後，長邊與短邊皆不得超過 20,000 像素，總原始像素數不得超過 4,000 萬。這些限制是為了防止一個小壓縮檔解壓縮後變成巨大的畫布 — 這在全景照片或高解析度掃描中很常見。動畫格式只會以瀏覽器在初次解碼結束時所暴露的單一影格來進行評估;這個工具不會對每一影格取平均，也不會考慮每個影格停留的時間長短。
瀏覽器分頁是第二個先決條件。處理作業 — 圖片解碼、畫布取樣、取平均，以及寫入剪貼簿 — 都會在您目前的分機中本地進行。不會上傳到 Lizely 或任何圖片分析服務，原始檔案也不會被修改、匯出，或針對像素值以外的內容進行檢查。如果您在意這項特性，可以為自己的環境親自驗證:在工具運作時打開瀏覽器的網路面板，您會看到沒有任何圖片資料請求離開這個頁面。實作方式是透過 WHATWG HTML canvas 像素操作規格以及 MDN CanvasRenderingContext2D.getImageData 參考文件中所描述的標準 8 位元 RGBA 介面來讀取畫布。
心智模型是第三個先決條件，也是最多初學者會跳過的一項。這個工具會回傳一個數字，用以概括影像中每個可見的像素。當專案需要的是代表性色調時，這個數字很棒;但當專案需要的是調色板多樣性、出現最頻繁的色彩，或主體感知式的萃取時，這個數字就很糟糕。面對那些工作，您應該換用其他工具，而不是勉強讓單一平均值去執行它並非設計來做的工作。
執行工具並讀取結果
這是多數第一次閱讀的人來這裡最想看的部分:從上傳到複製 HEX 的實際操作順序，中間不需要帳號，也不需要與伺服器往返。
- 選擇一個支援的、不超過 20 MB 的圖片。選擇器接受上述列出的格式;其他格式會以明確的錯誤訊息拒絕，畫面上不會留下任何過時的結果。
- 等待本地解碼完成，並檢視 HEX、RGB、覆蓋率與取樣尺寸。瀏覽器會解碼檔案、從畫布取樣像素、計算 alpha 加權平均值，並同時輸出六位數小寫 HEX 與對應的十進位 RGB 三元組。介面也會回報原始尺寸、實際用於分析的取樣尺寸，以及 alpha 覆蓋率 — 即取樣的 alpha 總和除以該取樣範圍內可能的最大 alpha 總和。
- 點擊 HEX 值以複製它，然後在預期的設計情境中驗證色塊。複製的文字永遠剛好是一個井字號加上六個小寫十六進位數字。如果瀏覽器拒絕剪貼簿權限，該數值仍會保持可見且可選取，介面也不會錯誤地宣稱複製成功。
理解工具所顯示的數字
輸出面板所做的事情不僅僅是印出一個色彩，它顯示的四項資訊分別回答不同的問題。
HEX 值就是結果。這是您要貼進 CSS、設計工具，或樣式表中變數的標準格式。採用小寫是有意且一致的:每次複製都會回傳相同形狀的字串。同類別中的 HEX 轉 RGB 轉換器是將數字翻回通道形式最簡便的方式，如果您的目的地偏好整數表示的話。
十進位 RGB 三元組以三個通道顯示相同的答案，當目的地工具偏好整數而非十六進位時非常實用 — 例如，當您要將該值餵給反向操作的 RGB 轉 HEX 轉換器，或手動比較各通道時。這兩個數值來自同一個內部計算，只是同一個數字的不同呈現方式。
alpha 覆蓋率會告訴您，影像中實際上有多大的比例貢獻了平均值。一張以棋盤格為底、放上浮水印標誌的高度透明影像，會顯示出偏低的覆蓋率，此時回傳的色彩將會是一小塊可見區域的平均值，而不是整個畫面的平均值。如果覆蓋率意外地偏低，代表那塊可見區域可能並非您心中所想像的影像。
原始與取樣尺寸是誠實的基礎。像素數在 1,048,576 以下的影像會以其解碼尺寸讀取，並以完整解析度進行分析。更大的影像會按比例縮放，使分析畫布保持在該像素預算上限以下。這兩組數字讓您能夠清楚看出工具何時回報的是經過降階取樣的結果，而不是逐位元組平均每個原始像素的結果。降階取樣時瀏覽器內插可能會讓該數值與離線的全解析度計算略有偏移，若重視可重現性，這是一項值得記下的事實。
何時單一平均色彩才是正確選擇
這個工具不能與調色盤產生器、主色尋找器或吸色器互換使用，把它們當作彼此可替換，是得到混亂結果最快的途徑。下表將常見工作對應到快速的合適度檢查。
| 您要做的工作 | 這個工具能解決嗎? | 無法解決時更好的替代方案 |
|---|---|---|
| 用於佔位版型的粗略背景色 | 可以 — 一個數字正好就是目標 | — |
| 影像網格的快速縮圖色調 | 可以 — 一個代表性色調就已足夠 | — |
| 橫跨多項資產的設計盤點 | 可以 — 統一且可比較的摘要 | — |
| 在繁忙照片上疊加的雙色效果 | 有可能 — 取決於覆蓋率與情境 | 色彩對比檢查器用於文字可讀性 |
| 主體感知式萃取(天空、皮膚、汽車) | 不行 — 平均會把所有東西混在一起 | 調色盤產生器 |
| 從標誌中取出前五大品牌色 | 不行 — 它回傳一個數字，而不是排序過的清單 | 調色盤產生器 |
| 平面插畫中出現最頻繁的色彩 | 不行 — 頻率不等於平均值 | 調色盤產生器 |
兩個例子能讓這條界線更具體。同等權重的紅色與藍色像素平均起來會得到一個紫色的數字，即使原始影像中根本沒有紫色像素 — 這正是算術平均的特性。一小塊鮮豔的強調色放在大面積的中性背景上，幾乎會被稀釋成接近中性色，因為大多數像素都帶著中性的訊號。這兩種行為都符合這個工具的定義，但對於想要強調色或完整調色盤的工作來說，兩者都是錯誤的。這個工具的單一結果最適合用於粗略的背景配對、佔位樣式、縮圖摘要、設計盤點，以及快速的視覺比較。
儲存 HEX 並在情境中檢查它
一旦您複製了 HEX，最後一個步驟是大多數初學者最容易忘記的:把色塊放到它實際要存在的位置，並在那裡判斷它。
打開目的地 — 一個 CSS 變數、一個 Figma 畫框、一份印刷規格 — 然後貼上該數值。看著它與即將並列的色彩和光線放在一起的效果。工具內的預覽色塊是個有用的快速檢查，但它只是您螢幕上的一塊單一色磚;它的外觀會隨著瀏覽器的色彩管理、您的顯示器設定檔、周圍的主題，以及您眼睛的適應狀態而改變。請不要把這個色塊當作數字正確的證明 — 它只是數字「可能」合理的提示。瀏覽器的色彩管理、方向處理、廣色域轉換，以及動畫行為，會因格式與瀏覽器而異，這是為什麼在情境中檢查仍然重要的另一個原因。
若要留下紀錄，請將四項資訊與 HEX 一起記下:輸入的檔名、您使用的瀏覽器與版本、介面回報的原始與取樣尺寸，以及 HEX 本身。那份紀錄才能讓日後的稽核成為可能，因為同一個工具的兩次同樣有效的執行，當瀏覽器版本或畫布降階取樣行為改變時，可能會相差一兩個通道值。如果這個色彩要驅動對比決策，請把它交給色彩對比檢查器，而不是用肉眼判斷。如果這個色彩要驅動相似度決策，請把它交給 色彩差異計算機來取得一個明確的量化指標。平均色彩工具的工作在 HEX 進入您的剪貼簿時就結束了;之後的一切，都屬於更了解您實際問題的工具。
延伸閱讀:如何開始使用 CSS 三角形產生器。
延伸閱讀:如何正確地從圖片取得平均色彩。