圖片主色調提取

📖 工具介紹

上傳任意圖片，工具會用中位切分算法對像素顏色聚類，提取指定數量（2–24）的主色，並按佔總像素的比例從高到低排列。每種顏色同時給出 HEX、RGB、HSL 三種表示，點擊色塊即可複製。可一鍵複製全部顏色值，或導出爲 CSS 自定義變量文件直接用於前端項目。採樣間隔用於平衡速度與精度，值越大越快。全部處理在本地完成。常見使用場景包括：設計師從參考圖裏取色搭建配色方案，前端工程師爲網站生成主題色變量，運營人員爲海報提取品牌主色，以及對比多張圖片的色調差異。提取結果按佔比排序，排在第一位的通常是畫面底色或主色。若想突出畫面中的點綴色，可以把顏色數調大一些再從中挑選。導出的 CSS 變量文件可直接複製進樣式表使用。

✨ 功能特點

• 中位切分聚類：經典顏色量化算法，主色提取比簡單平均準確得多
• 佔比排序：按顏色佔畫面比例從高到低排列，主次一目瞭然
• 三種色值格式：HEX / RGB / HSL 一鍵切換，點擊色塊即可複製
• CSS 變量導出：導出爲 CSS 自定義屬性文件，可直接用於前端項目
• 可調採樣精度：採樣間隔越大越快，需要精細結果時調小即可

🚀 使用方法

1. 1. 上傳圖片；
2. 2. 設置顏色數量與顯示格式；
3. 3. 點擊「提取主色」；
4. 4. 點擊色塊複製或下載 CSS 變量。