顏色提取器

什麼是顏色提取器？

顏色提取器是一款免費線上工具，可自動從圖片中提取主要調色盤。分析照片或設計作品中使用了哪些顏色，並取得 HEX、RGB、HSL 格式的顏色代碼。

在網頁設計、平面設計、品牌設計、室內設計等各個領域需要調色盤時都可以方便地使用。從靈感圖片中提取顏色，應用到您的專案中。

適合人群

• 網頁/應用程式設計師 – 從參考圖片中提取調色盤以建立設計系統
• 品牌設計師 – 從 Logo 或產品圖片中分析和提取品牌色彩
• 平面設計師 – 尋找捕捉照片氛圍的和諧配色
• 室內設計師 – 從富有靈感的空間照片產生調色盤
• 插畫師 – 分析參考圖片的色調用於創作
• 社群媒體內容創作者 – 分析顏色以維持一致的動態色調
• 服裝設計師 – 從趨勢圖片中提取季節性色彩

主要功能

• 8種主要顏色提取 – 自動從圖片中提取8種最具代表性的顏色。相似的顏色會被分組，以提供多樣化的調色盤。
• 顏色佔比顯示 – 以百分比顯示每種顏色在圖片中的佔比。幫助您了解主色和輔助色的構成。
• 多種顏色格式 – 可以查看 HEX、RGB、HSL 三種格式的顏色代碼。點擊標籤切換到您想要的格式。
• 顏色名稱顯示 – 顯示每種顏色最接近的標準顏色名稱。’Coral’、’Navy’、’Gold’ 等直觀的顏色名稱讓顏色更容易理解。
• 一鍵複製 – 點擊顏色卡片即可將該顏色代碼複製到剪貼簿。
• CSS 變數複製 – 可以一次以 CSS 自訂屬性（變數）格式複製所有提取的顏色。
• 調色盤圖片下載 – 將提取的調色盤下載為 PNG 圖片以便分享或保存。
• 拖放上傳 – 將圖片拖放到上傳區域即可立即開始顏色提取。

了解顏色格式

讓我們了解本工具支援的三種顏色格式。

HEX（十六進位）

HEX 使用十六進位數表示顏色。#RRGGBB 格式中，每兩位數字分別表示紅（R）、綠（G）、藍（B）的值，範圍從 00 到 FF。

• #FF0000 – 紅色
• #00FF00 – 綠色
• #0000FF – 藍色
• #FFFFFF – 白色
• #000000 – 黑色

這是網頁開發中最常用的格式，可直接在 CSS 中使用。

RGB

RGB 使用紅（Red）、綠（Green）、藍（Blue）的組合表示顏色。每個顏色通道的值範圍是 0 到 255。

• rgb(255, 0, 0) – 紅色
• rgb(0, 255, 0) – 綠色
• rgb(128, 128, 128) – 灰色

需要透明度時，可以新增 alpha 值，如 rgba(255, 0, 0, 0.5)。

HSL

HSL 使用色相（Hue）、飽和度（Saturation）、明度（Lightness）表示顏色。由於與人類感知顏色的方式相似，因此非常直觀。

• H（色相）：0°–360° 色環角度（0°=紅、120°=綠、240°=藍）
• S（飽和度）：0%–100% 飽和度（0%=灰色、100%=鮮豔色）
• L（明度）：0%–100% 明度（0%=黑、50%=純色、100%=白）

例如：hsl(0, 100%, 50%) 是純紅色。

顏色提取演算法

本工具透過以下流程從圖片中提取顏色：

1. 圖片取樣 – 為最佳化效能，將圖片縮小到適當大小。
2. 顏色量化 – 對相似顏色進行分組並提取代表色。
3. 頻率分析 – 計算每個顏色組的像素數並按頻率排序。
4. 多樣性保證 – 排除過於相似的顏色，選擇多樣化的顏色。
5. 顏色配對 – 為每種顏色配對最接近的標準顏色名稱。

使用技巧

• 使用高品質圖片 – 從清晰且包含多種顏色的圖片中可以提取更準確的顏色。
• 使用完整圖片 – 包含整體氛圍的圖片比只擷取部分的圖片效果更好。
• 利用 CSS 變數 – 將提取的 CSS 變數複製到專案的根樣式表中，建立一致的顏色系統。
• 儲存調色盤 – 將喜歡的調色盤下載為圖片，儲存到專案資料夾中。
• 比較多張圖片 – 從多張參考圖片中提取顏色並比較，找到最佳調色盤。

設計中的顏色運用

讓我們學習如何有效地使用提取的調色盤。

60-30-10 法則

這是室內設計和設計領域廣泛使用的顏色分配法則：

• 60% – 主色：用於背景和主要區域的基礎色
• 30% – 輔助色：補充主色的第二顏色
• 10% – 強調色：吸引視線的點綴色

顏色和諧

• 互補色（Complementary）：色環上相對位置的顏色組合。產生強烈對比效果。
• 類似色（Analogous）：色環上相鄰顏色的組合。和諧舒適的感覺。
• 三角配色（Triadic）：色環上形成等邊三角形的三種顏色。平衡的多樣性。

使用方法

1. 上傳圖片 – 點擊選擇檔案按鈕或拖放圖片上傳。
2. 自動分析 – 圖片上傳後自動開始顏色分析。
3. 選擇格式 – 點擊 HEX、RGB、HSL 標籤選擇您想要的顏色格式。
4. 複製顏色 – 點擊顏色卡片將顏色代碼複製到剪貼簿。
5. 複製 CSS – 點擊「CSS 變數」區域的複製按鈕，以 CSS 格式複製所有顏色。
6. 下載調色盤 – 點擊「下載調色盤」按鈕儲存為 PNG 圖片。