跳至主要內容
Lizely

圖片色彩提取

從圖片中提取最常見的可見色彩，且不需上傳檔案或手動選擇像素。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.選擇支援的圖片，最多至 20 MB，並選擇調色盤大小為 3、5、8 或 12 顏色。
  2. 2.等待本機畫布分析完成，然後將排序的百分比與調色盤與圖片中的可見區域進行對比。
  3. 3.選擇任一調色盤複製其 HEX 碼，並在適當的專業工具中驗證對比或精確品牌需求。

關於圖片色彩提取

圖片色彩提取可將照片、截圖、圖示或標誌轉化為其最常見可見色彩的精簡調色盤。選擇圖片後，瀏覽器會分析縮放後的本機副本，將鄰近的 RGB 值分群，並對最大群組進行排序。每個結果包含 HEX 碼、一個 RGB 三元組，以及分配給該群組的可見像素百分比。選擇調色盤即可複製其 HEX 值。提供三、五、八或十二種調色盤大小的選擇，讓你從簡潔的視覺摘要逐步轉向更詳細的設定，而不會產生過於龐雜的清單。

這個工具與圖片色彩選擇器有意圖上的不同。選擇器會回答 “這張圖片這個精確像素的顏色是什麼？”，你點選圖片上的某個點後。提取器則會回答 “這張圖片中哪些色彩出現的頻率最高？”，而無需你尋找代表性的點。使用選擇器來取得精確的按鈕、標誌邊緣或取樣細節。使用提取器時，如果你想為情緒板、簡報主題、CSS 變數、圖表系列、圖示研究或設計評估取得起始色彩。提取結果是描述性的，並不代表每個像素都與顯示的色塊完全一致。

演算法是透明且決定性的。瀏覽器會解碼圖片，僅在必要時縮小圖片尺寸，確保圖片的長寬都不會超過 512 像素，並讀取產生的畫布。透明度低於 128 的像素會被忽略，因此過於透明的背景不會佔據色彩調色盤的主導地位。每個剩餘的紅、綠、藍色彩通道會被分為八個粗略的範圍，產生最多 512 RGB 個色彩桶。工具會計算每個被佔用色彩桶中的像素數量，並計算該色彩桶內原始色彩通道值的平均數，最後根據像素數量對色彩桶進行排序。出現平局時會使用穩定的數字色彩桶順序。

粗略分群讓結果快速且可重現，但這並非一種視覺聚類模型。人們認為非常相似的兩種顏色可能落在相鄰的群組，而幾個微妙不同的色調可能會合併為一個平均值。亮度、伽馬、裝置色彩配置檔案以及人類視覺敏感度均未建模。動態圖片將從瀏覽器解碼畫布的第一幀進行分析。若精確的商標色彩測量至關重要，建議在支援色彩管理的設計應用中檢視原始檔案，並直接取樣源像素，而非僅以頻率為依據。

顯示的百分比使用的是被樣本的可見像素數，而非檔案原始像素數。縮放保留了整體構成，但極小的細節可能貢獻較少甚至消失於縮減樣本中。一條細膩的強調線、一個微小圖示或單個像素因此可能完全缺失，即使對設計至關重要。相反地，大面積的背景通常排名較高，因為它覆蓋了大量像素，而非因為工具認為其美學上重要。調色盤的排序是根據面積頻率，而非視覺重要性、對比品質或可訪問性。

所有解碼與分析皆在當前瀏覽器中完成。圖片以暫時性 Object URL 表示，並繪製到記憶體中的畫布；不會傳送至 Lizely 或遠端圖片服務。更換圖片或離開頁面將釋放暫時的 URL。輸入限制為 20 MB，且像素處理函式有獨立的防護緩衝限制。支援的格式取決於瀏覽器的解碼能力，介面支援常見的 PNG、JPEG、WebP、GIF、BMP 與 AVIF 圖片型別。若圖片中無足夠可見像素，將顯示明確錯誤。

為確保可靠的工作流程，建議從最小的實用調色盤開始，並與圖片進行對比。當兩個重要區域被合併或某種強調色缺失時，再增加調色盤大小。將這些程式碼複製至設計草稿中，然後透過 Color Contrast Checker 檢查任何前景/背景組合的對比，再使用於文字。請勿從此輸出推論品牌官方調色盤、商標權限、印刷油墨配方、Pantone 值或可訪問文字組合。這僅是本機頻率摘要，旨在加速探索，同時讓底層方法與限制清晰可見。

方法與來源

本機解碼的圖片會按比例限制至 512 × 512 的畫布像素。透明度低於 128 的像素將被忽略；可見的 RGB 通道將透過其最高三位元組量化，最多分為 512 個桶。原始通道的總和與計數產生每個桶的平均色彩與樣本區域百分比，並依降序計數排序，若有並列則使用決定性斷開方式。

常見問題

圖片會上傳嗎？
不會。瀏覽器透過暫時性 Object URL 解碼本機檔案，並分析記憶體中的畫布。
為何一個小的強調色缺失？
調色盤根據樣本像素面積排序。小細節在縮放限制後可能消失，或在選定調色盤大小以下排名。
這與圖片色彩選擇器有何不同？
提取器會總結圖片中常見的色彩群組。選擇器則會報告你選定位置的精確 RGB 值。
結果是否經過色彩管理或適用於印刷匹配？
不會。此方法使用粗略的 sRGB 通道分桶，並未建模 ICC 檔案、感知距離、Pantone 油墨或印刷條件。

相關工具

圖片工具 使用指南

查看全部