從圖片中提取顏色（主色提取工具）
上傳圖片後，可自動提取照片或插畫中使用的主要顏色（主色）。所有處理均在瀏覽器內完成，圖片不會被發送到伺服器。
如何從圖片中提取顏色
想知道一張照片、插畫或 Logo 中最常出現的顏色時，用取色器一個一個手動挑選會很麻煩。本工具可以幫您完成這項工作：只需上傳圖片，就能自動列出圖片中佔據較大面積的代表色（即「主色」），並立即顯示可複製的 HEX 值和 RGB 值，方便直接貼上到 CSS、Figma、Photoshop 等設計工具中使用。
在內部實作上，工具會先把圖片繪製到瀏覽器的 Canvas 元素上並讀取像素資料，然後把相近的顏色歸併（量化）為若干個較粗的分組，統計每個分組的出現次數，再選出出現頻率最高的分組作為代表色。透明 PNG 圖片中的透明部分會被自動排除在統計之外，因此即使是背景透明的去背圖，提取結果也會集中在主體本身的顏色上，而不是背景。較大的圖片在分析前會先在內部被縮小，因此即便是數百萬畫素的照片也幾乎能瞬間完成處理。由於全部運算都在您的瀏覽器本機完成，圖片資料不會離開您的裝置，即便是比較私密的照片也可以放心使用。
從圖片中提取顏色的步驟
- 上傳圖片 將圖片檔案拖放到指定區域，或點選該區域從檔案選擇對話方塊中選取圖片。
- 選擇要提取的顏色數量 在「要提取的顏色數量」中選擇 4、8 或 12。每次變更選項後結果都會立即重新計算，無需重新上傳圖片。
- 查看提取出的色塊 色塊會按出現頻率從高到低排列，每個色塊旁都會顯示對應的 HEX 值和 RGB 值。
- 複製 HEX 值 點選任意色塊下方的複製按鈕，即可將對應的 HEX 值傳送到剪貼簿，隨時貼上到 CSS 或設計軟體中。
用好本工具的小技巧
- 點選色塊下方的複製按鈕即可將其 HEX 值複製到剪貼簿，可直接貼上到 CSS 或設計工具中使用。
- 可以從 4、8、12 中選擇提取的顏色數量。簡單的 Logo 配色適合選 4 色，想仔細分析照片的豐富色調則可以選擇 12 色。
- PNG 圖片中透明的部分會被自動排除，提取結果會更聚焦於主體本身的顏色，而不是透明背景。
- 所有處理都通過 Canvas API 在本地瀏覽器中完成，圖片資料不會發送到任何伺服器，即使是敏感圖片也可以放心使用。
- 提取的顏色按出現頻率從高到低排列，排在前面的顏色在圖片中佔據的面積更大。
可以這樣使用本工具
從現有 Logo 制定配色方案
上傳 Logo 圖片即可以 HEX 值的形式取得其中使用的確切顏色，方便讓網站或簡報的配色與品牌形象保持一致。
從產品照片中尋找品牌色候選
提取包裝或產品照片中的代表色，可以為確定企業色或活動頁面的強調色提供具體參考。
掌握照片或插畫的色彩平衡
在 4 色和 12 色之間切換，既能一眼看出圖片整體的大致色調，仔細觀察時也能看到更細緻的色彩分佈。
將顏色交付給 CSS 或設計工具
複製提取出的 HEX 值，直接貼上到 CSS 變數或 Figma、Photoshop 的取色器中，省去手動憑肉眼記錄顏色的麻煩。
術語表
- 主色
- 在圖片中佔據最大面積，或出現頻率最高的代表性顏色。本工具列出的色塊正是這些主色，並按佔圖片比例的高低排序。
- HEX 值
- 一種用兩位十六進位數分別表示顏色紅、綠、藍三個分量的表示法，例如「#3366cc」。「#」後依序是紅、綠、藍三個分量，廣泛用於 CSS 和各類設計軟體。
- RGB 值
- 用光的三原色──紅（Red）、綠（Green）、藍（Blue）──分別以 0 到 255 之間的數字來表示顏色的方法。三個數值的組合幾乎可以還原任何可見顏色。
- 顏色量化
- 把相近的顏色歸併為數量更少的分組的處理過程。本工具將 RGB 每個色版劃分為 32 為單位的分組，從而把 JPEG 壓縮等原因造成的細微色差歸入同一顏色統計，而不會被當作雜訊。
- Alpha 值（透明度）
- 表示圖片中每個像素不透明程度的數值。透明 PNG 中背景透出的部分 Alpha 值較低，本工具會自動將這些像素排除在顏色統計之外。
- Canvas API
- 瀏覽器提供的一種用於繪製和分析圖像、圖形的 JavaScript 介面。本工具借助它逐像素讀取圖片，並在您的裝置本機完成顏色提取，全程不會把資料傳送到伺服器。
常見問題
閒話 ― 從照片中尋找品牌色的工作
從照片或產品包裝中提取"所使用的顏色"，是網頁設計和平面設計工作中的常見任務。在制定品牌視覺規範時，設計師通常會先從現有的照片素材或 Logo 中提取代表色，再以此為基礎考慮企業色或強調色的候選方案。過去需要用取色工具逐一手動拾取的工作，如今可以通過本工具這樣的"主色提取"演算法自動完成。
顏色提取有多種演算法。本工具採用的"分桶量化 + 頻率統計"方法，將每個畫素的 RGB 值粗略歸入某個分組並統計出現次數，是一種計算成本低、執行速度快的簡單方法。而更高階的方法，例如 k-means 聚類演算法，會根據顏色空間中的距離進行分組，能得到更自然的分組結果，但計算量也隨之增加。
有趣的是，同一張圖片根據提取的顏色數量不同，給人的印象也會截然不同。只提取 4 種顏色時，會呈現出圖片整體的大致色調（偏暖還是偏冷）；而提取到 12 種顏色時，則連陰影和反光帶來的細微色差也能被捕捉到。根據用途調整提取數量，就能從同一張圖片中獲取不同粒度的資訊。