免費轉換器

從圖片提取 色彩調色板

即時從任意圖片中提取主要顏色。一鍵取得HEX和RGB值。免費、安全,完全在瀏覽器中運行。

將圖片拖放到此處

支援PNG、JPG、WEBP、GIF。最大50MB。

關於此工具

調色板提取分析影像並識別主色或代表色。結果是一小組顏色(通常為 5-8 種),可以捕捉影像的視覺特徵。設計師使用提取的調色板來協調其他設計元素(補充英雄圖像的 UI 顏色、源自攝影的品牌調色板、匹配情緒圖像的配色方案)。

提取過程使用聚類演算法(k 均值或類似演算法)將所有影像像素分組為所需數量的顏色簇。每個簇的中心變成調色板顏色。最大的簇代表主色;演算法還可以根據視覺重要性(飽和度、對比度)而不是原始像素計數來加權,以呈現引人注目的強調色。

該工具使用 JavaScript 在您的瀏覽器中運行。影像被解碼為像素數據,進行取樣以減少計算量,並進行聚類。輸出是帶有十六進位代碼、RGB 值和比例條的調色板,顯示每種顏色在影像中的流行程度。

為什麼提取調色板

使用提取的調色板設計與現有圖像相協調的作品比透過眼睛挑選顏色快得多。網頁設計師圍繞著英雄圖像建立登陸頁面,行銷人員製作與關鍵產品照片匹配的資產,以及品牌設計師分析競爭對手圖像,所有這些都受益於演算法調色板提取。

調色板還支援內容管理。透過按主色對影像進行分類,您可以建立使用者按顏色瀏覽照片、產品或設計的介面。建立這樣的系統需要係統地提取調色板,這是透過程式提取實現的。

使用方法

上傳,選擇調色盤大小,取得顏色。

  1. 上傳您的圖片: 將 JPEG、PNG 或 WebP 拖曳到上傳區域。支援最大 50 MB 的檔案。
  2. 選擇調色板尺寸: 5-8 種顏色涵蓋了大多數用例。 3-4 為緊密聚焦的調色板; 10+ 用於精細提取。較大的調色板包含更微妙的顏色,但其實用性卻逐漸減弱。
  3. 萃取物: 叢集在您的瀏覽器中運作。較小的調色板提取速度更快;高解析度影像的較大調色板需要幾秒鐘的時間。
  4. 使用調色板: 可以直接複製十六進位代碼。調色板可以匯出為 JSON、CSS 自訂屬性或色樣影像。

常見用例

技術細節

K-均值聚類迭代:將每個像素分配給最近的聚類中心,重新計算中心作為分配像素的平均值,重複直到收斂。在全解析度影像上運行速度很慢;採樣(每隔 N 個像素)以最小的質量損失加速。

色彩空間很重要。 RGB 中的聚類會產生以 RGB 距離加權的調色板,這與感知距離不符。 LAB 或 HSV 中的聚類會產生在感知上更一致的調色板 - 看起來相似的顏色會更可靠地組合在一起。

輸出:每個聚類中心的十六進位代碼,加上每個聚類中影像像素的百分比。此百分比代表視覺普及率;最大的簇是最主要的顏色。

最佳實踐

常見問題

提取了多少種顏色?
該工具通常會提取 5-8 種主色,具體取決於影像的複雜性。顏色很少的簡單圖像會產生更少、更清晰的樣本。複雜的照片產生更廣泛的範圍。
提取演算法如何運作?
該工具使用顏色量化(中位數切割或 k 均值聚類)對相似像素進行分組並識別最具代表性的顏色。這會產生視覺上有意義的顏色,而不是最常見的單一像素值。
我可以為我的品牌使用提取的顏色嗎?
是的。這是一種從情緒板、照片或產品圖像中獲取品牌調色板的流行技術。提取的十六進位代碼可以直接在 CSS、設計工具或品牌指南中使用。
為什麼提取的顏色與我看到的顏色不完全匹配?
顏色提取將相似的像素分組在一起。肉眼看起來像一種顏色的漸變可能會被平均為稍微不同的色調。此外,顯示器校準會影響顏色在螢幕上的顯示方式。
輸出是什麼格式?
預設為十六進位代碼。大多數工具還會匯出 RGB、HSL 和其他色彩空間值。 CSS 自訂屬性或 JSON 輸出對於程式使用非常有用。
我的圖像是否已上傳到伺服器?
不會。提取發生在您的瀏覽器中。
調色盤是否與品牌形象相符?
演算法提取是描述性的,而不是規定性的。輸出描述圖像;該品牌可能有相關但不同的調色板。使用提取作為起點,然後進行細化以實現品牌一致性。
我可以從影片中提取內容嗎?
僅使用此工具進行單幀提取。對於視訊調色板提取,對幀進行採樣並從每個幀中提取,然後聚合。