不會 — 當你使用 圖片平均色彩尋找工具時,你的圖片從未離開你的裝置。瀏覽器會使用內建的影像解碼器開啟檔案,透過 HTML canvas 取樣其像素資料,在同一個分頁內計算出經過 alpha 加權的平均值,然後將產生的 HEX 值寫入你的剪貼簿,整個過程不會將任何位元組傳送給 Lizely 或任何第三方的影像分析服務。你可以在挑選檔案之前先打開瀏覽器的網路面板來確認:一旦工具頁面載入完成,不論是你選擇檔案時、讀取 canvas 時,或計算完成時,都不會有任何夾帶影像資料的請求透過網路送出。整個流程都針對你機器上既有的資源執行,因此不論這張圖片是機密的產品模型圖、個人照片、你不想被建立索引的螢幕截圖,或是影片中的某一幀,隱私狀態都完全相同。這件事很重要,因為許多色彩工具在能夠處理像素資料之前,都會悄悄地把你的圖片上傳到遠端伺服器,而這次上傳在使用者介面上往往看不出來。圖片平均色彩尋找工具是圍繞 HTML canvas 像素操作規範所打造,它能讓網頁讀取圖片的 RGBA 值,卻完全不需要將檔案送出使用者的電腦。

does the image leave my device when i use average color from image
使用平均色彩工具時,我的圖片會離開我的裝置嗎?

本機處理與伺服器色彩工具有何不同

在以瀏覽器為基礎的影像工具中,「本機處理」代表計算過程中的每一步都發生在使用者自己的硬體上,並在載入工具的同一個分頁內執行。檔案由瀏覽器的影像解碼器讀取,使用一個隱藏的 canvas 作為工作表面,算術運算則在頁面內的 JavaScript 中執行。沒有任何 API 呼叫會將影像位元組往外傳送,也沒有使用伺服器端的算繪農場。

相較之下,以伺服器為基礎的色彩工具會透過 HTTPS 將影像送到遠端機器,在那裡處理像素,再把結果送回來。在良好的網路連線下,這個往返過程相當快速,但這代表你的影像會有一份副本(即便存在時間很短)存在於你無法掌控的基礎架構上。對於敏感的素材——內部 UI 螢幕截圖、未公開的產品算繪圖、受 NDA 約束的模型圖、任何包含個人臉孔或位置的影像——即便操作人員承諾會刪除,這個往返過程仍可能造成問題。

圖片平均色彩尋找工具專為本機情境所設計。它公告了 20 MB 的檔案大小上限以及明確的像素邊界防護機制,這是因為實作必須將解碼後的影像控制在瀏覽器的 canvas 記憶體預算之內,而並非因為它會把資料轉送到任何地方。這裡沒有帳號、沒有註冊流程、沒有 API token,也沒有與該影像綁定的使用紀錄。當分頁關閉時,工作用的 canvas 也跟著消失;原始檔案仍然在你儲存在磁碟上的原本位置。若想深入了解瀏覽器內部處理流程的逐步說明,請參考在瀏覽器中取得圖片平均色彩的指南。

瀏覽器如何在不透過伺服器的情況下解碼並取樣影像

此工具使用的是每個瀏覽器都已內建的標準影像載入介面。當你挑選檔案時,瀏覽器會從磁碟讀取位元組,執行其原生解碼器(可辨識 PNG、JPEG、WebP、GIF、BMP 與 AVIF),並產生一個解碼後的點陣圖。這個解碼後的點陣圖會以受控的大小繪製到一個離螢幕 canvas 上,再由 JavaScript 呼叫向 canvas 索取像素資料。

像素資料是透過 CanvasRenderingContext2D.getImageData API 讀取的,該 API 會回傳一個由 8 位元 RGBA 值組成的扁平陣列,相關說明請參考 MDN 上 getImageData 的參考文件。每個像素包含一個紅色位元組、一個綠色位元組、一個藍色位元組,以及一個 alpha 位元組。此工具會走訪整個陣列,對於每個 alpha 值不為零的像素,會先把紅、綠、藍三個通道乘上 alpha 值,再加進累計總和。完全透明的像素不會有任何貢獻,因為其所儲存的 RGB 通道為不可見狀態,且可能包含編碼器所填入的任意資料。部分透明的像素則會依照其不透明度按比例貢獻。當走訪結束後,加權後的通道總和會除以 alpha 總和,並對結果從 0 到 255 四捨五入至最接近的整數一次。輸出結果會以六位數小寫 HEX 字串以及十進位 RGB 表示。

這是 canvas 色彩資料的算術平均數,而不是主色分群模型。兩個權重相同的紅色與藍色像素會產生紫色的平均值,即使來源中並不存在任何紫色的像素。一個小而鮮豔的強調色可能會被大片的中性背景稀釋。若你需要的是最常出現的色彩、互相分離的色票,或主體感知的萃取,調色盤式工具才是合適的起點。

在不上傳檔案的情況下取得圖片的平均色彩

  1. 在你的瀏覽器分頁中開啟圖片平均色彩尋找工具。不需要登入、帳號或任何擴充功能。
  2. 從你的本機檔案系統中選擇一個大小不超過 20 MB 且受支援的影像。此工具支援 PNG、JPEG、WebP、GIF、BMP 與 AVIF。
  3. 等待本機解碼完成。瀏覽器會對已在記憶體中的位元組執行其原生解碼器;你應該會在不發生任何網路活動的情況下,看到 HEX、RGB、alpha 覆蓋率以及取樣尺寸的顯示。
  4. 讀取顯示出的 HEX 值及其對應的十進位 RGB 三元組。來源尺寸與分析用 canvas 的尺寸也會一併顯示,因此你可以判斷計算是否使用了降取樣的視圖。
  5. 點擊 HEX 值即可複製。剪貼簿會收到剛好是一個井字號加上六位小寫十六進位數字。如果瀏覽器拒絕授予剪貼簿權限,該數值仍會保持可見且可選取。
  6. 將複製的 HEX 貼到你的設計工具、CSS 檔或色彩參考中。以肉眼在其預期的設計情境中確認色票,並在將其視為最終結果之前,對照你的無障礙與品牌文件加以驗證。

運算在哪裡發生,以及為何輸出結果可能不同

由於資料不會離開你的裝置,計算會受到瀏覽器在 canvas 記憶體中所能處理內容的限制。像素數在 1,048,576 以下的影像會以其解碼後的尺寸讀取;較大的影像則會按比例縮放,使分析用 canvas 維持在該像素預算之內。因此,所得到的結果描述的是高解析度的取樣,而非對每個來源像素逐一進行位元對位元的平均,而瀏覽器的內插處理可能會使該數值與離線的全解析度計算略有出入。來源與取樣尺寸都會在介面中一併顯示,讓這個近似狀況是看得到的,而不是被隱藏起來。

其他對同一檔案取平均的程式可能會回傳略為不同的數值,原因有以下幾種。它們可能使用每一個來源像素,而不是降取樣的視圖。它們可能採用 gamma 感知或感知性的數學運算,而非單純的算術平均。它們可能評估的是動畫格式中的不同幀,因為此工具讀取的是瀏覽器在初次解碼時所暴露的那一幀,而非平均每一幀或依播放時間加權。瀏覽器的色彩管理、EXIF 方向處理、寬色域轉換以及動畫行為,都會因為引擎與格式的不同而有所差異。記錄輸入檔案、瀏覽器、所顯示的來源與取樣尺寸,以及回傳的數值,可以為日後的比較提供一個可重現的指紋。

下表摘要列出此工具所記載的主要技術限制,讓你能夠一目了然地判斷某個輸入是否會被接受,以及它會如何被取樣。

限制記載的數值
最大檔案大小20 MB
解碼後的最大邊長每邊 20,000 像素
最大來源像素數40,000,000 像素
取樣 canvas 預算1,048,576 像素,超過時按比例縮小
支援的 MIME 類型PNG、JPEG、WebP、GIF、BMP、AVIF
最低需求非空白的檔案,且具備受支援的 MIME 類型

此工具所遵守的隱私界線,以及它不會檢查的內容

此工具刻意不去查看某些項目,這進一步強化了本機處理的聲明。它不會保留或檢查 EXIF 中繼資料、ICC 色彩設定檔、相機資訊,或檔案中嵌入的隱藏文字區塊。它除了在本機顯示檔名供使用者參考之外,不會讀取檔名;也不會修改、重新編碼或匯出來源檔案。預覽色票是直接從計算出的 HEX 所繪製,因此你在色票中看到的,正是被複製的那個數字。

Canvas 的像素存取是以標準的 8 位元 RGBA 資料形式要求,這是 HTML canvas 像素操作規範對外暴露給網頁的格式。實作被限制在 RGBA 運算、每個通道一次的捨入輸出,以及一鍵複製到剪貼簿。如果瀏覽器政策拒絕授予剪貼簿權限,介面不會謊稱成功;該數值會保持可見且可選取,讓你能夠手動複製。

為了讓設計工作可重現,請記錄輸入檔案、瀏覽器、所顯示的來源與取樣尺寸,以及回傳的 HEX 值。單一平均值不應被視為品牌合規、無障礙對比、印刷對色、塗漆對色或感知相似性的證明。針對文字與背景的對比,請使用讀取明定比率的對比檢查工具。若要以明定指標比較兩個不透明的 HEX 值,請使用建立在已公開標準上的色差計算工具。

動畫格式是依據瀏覽器完成初次解碼時所暴露的那一幀來評估,因此該數值描述的是單一幀,而非整個動畫。如果你需要針對幀的分析,請對每一幀分別執行此工具,把各個結果貼到你的工作筆記中,並把這個平均值視為一個取樣,而非決定性的總結。

若想進一步了解,請參考 避免在使用圖片平均色彩時犯錯。