一款無需註冊也無需上傳的圖片顏色提取工具，會在瀏覽器分頁中直接解碼你的檔案，並在你選取檔案後立即回傳一份依出現頻率排序的可見顏色調色盤。每一個 HEX、RGB 和百分比數值都是在本地端產生，因此原始照片、螢幕擷圖、插圖或 logo 從不離開你的裝置。這個單一特性——本地處理——正是區分真正的免註冊工具與藏在註冊牆後、只是免費試用的隱藏上傳服務的關鍵。使用 Image Color Extractor，你可以挑選一個最大 20 MB 的檔案，選擇 3、5、8 或 12 的調色盤數量，瀏覽器就會把一個縮放後的副本繪製到記憶體中的畫布上。可見像素會依其粗略的通道範圍分群，在每個群組內取平均值，再依面積出現頻率排序。結果是一份精簡的清單，你可以瀏覽、複製並貼到 CSS、情緒板或圖表中，完全不用把你的素材交給遠端服務。
一個真正免費、免註冊的提取工具對你而言實際意味著什麼
「免費」與「免註冊」通常伴隨著一些附加條件——廣告、浮水印、每日額度，或是你一按下提取，檔案就悄悄上傳到伺服器。這款提取工具的「免費」意義就和用自己電腦的圖片檢視器開啟檔案一樣：不需要建立帳號、不需要確認電子郵件，也沒有任何第三方服務持有你圖片的副本。瀏覽器透過臨時的 Object URL 讀取檔案、進行解碼，並在分頁內分析像素。更換圖片或離開頁面就會釋放該臨時參考。對於工作中的草稿、客戶 mockup 或 NDA 下的圖片，這種純本地端的行為才是真正的重點，而非價格標籤。
純瀏覽器分析實際上是怎麼運作的
瀏覽器在任何計數開始前，會先綁定一個 512-by-512 的畫布，因此無論是 4000 像素寬的螢幕擷圖，還是 600 像素寬的 logo，都能容納在同一個工作尺寸中。Alpha 通道值低於 128 的像素會被略過，這能避免半透明背景佔據調色盤的主導位置。剩下的紅、綠、藍通道各自分入八個粗略範圍之一，因此最多產生 512 個 RGB 桶。工具會統計有多少取樣像素落入每個被佔用的桶中，取出該桶內原始通道值的平均，再把桶由大到小排序。遇到平分的情況時，會採用穩定的數值順序，因此同一個檔案跑兩次會得到相同的調色盤。
這個分桶步驟刻意設計得快速且可重現。它並非感知叢集模型，也不試圖模擬人眼如何歸納顏色。視覺上相近的兩種色調可能落入相鄰的桶中，而細微不同的數個色調則可能合併成同一個平均色塊。亮度、伽瑪、ICC 設定檔和人類的色彩敏感度都不在模型的考量範圍內。請把輸出視為哪些通道最常出現的透明摘要，而非校準過的色彩讀數。
用三個步驟從任何圖片取得調色盤
完整流程簡單到試一次就能記住，而且不管是照片、平面的插圖、UI 螢幕擷圖還是 logo 檔，步驟都一樣。
- 挑選一個最大 20 MB 的支援圖片，並選擇 3、5、8 或 12 的調色盤數量。
- 等待本地畫布分析完成，再把排序後的百分比與色塊與可見的圖片區域比對。
- 選取任一色塊以複製其 HEX 碼，並在合適的專業工具中驗證對比或精確的品牌規格。
從剛好能涵蓋主要區域的最小調色盤開始——三色用於快速摘要，五色或八色適用於大多數設計草稿——只有當兩個重要區域被合併、或缺少某個強調色時，才升級到十二色。如果色塊對照你的圖片看起來不對，問題通常出在輸入檔案的大小，或是有個過於雜亂的背景把小細節擠掉了。在提取前先用 Image Resizer 快速縮圖，並不會改變顏色，但能加速對特大原圖的分析。
解讀輸出：HEX、RGB 與百分比
結果中的每一列代表一個經過平均的顏色群組，而不是單一像素。HEX 值就是你可以貼進 CSS 或設計檔中的六字元網頁色碼。RGB 三元組是同一個顏色的加法螢幕表示形式，當某個工具只能接受數值輸入時很好用。百分比則告訴你有多少可見分析區域被分配到該群組。一個佔比 41% 的色塊代表大約 41% 的取樣可見像素落在該桶中。百分比是相對於取樣畫布計算，而不是相對於檔案的完整像素數，因此它是一種相對排序信號，而非精確的面積量測。
| 調色盤大小 | 最適合用於 |
|---|---|
| 3 種顏色 | 用於情緒板、快速挑選調色或主視覺投影片的簡短視覺摘要。 |
| 5 種顏色 | 簡報主題、CSS 變數區塊，或含三至四個資料序列的圖表的實用起始組合。 |
| 8 種顏色 | 更詳細的拆解，能捕捉次要強調色而不讓設計變得雜亂。 |
| 12 種顏色 | 用於插圖研究或設計品質檢視的廣泛檢視，讓你看到較小尺寸會被合併的強調色。 |
何時該改用 Image Color Picker
提取工具回答的問題是：「這張圖片中哪些大範圍的顏色最常出現？」，而且不需要你指任何東西。Image Color Picker 回答的則是相反的問題：「在你點選某個位置後，這個像素的確切顏色是什麼？」。兩者是互補的工具。當你需要主題的起始顏色、一組 CSS 變數、圖表資料序列或情緒板時，請選用提取工具。當你需要 logo 邊緣、按鈕背景，或提取工具已合併成更大群組的單一品牌色塊的精確數值時，請選用挑選器。在同一張圖片上兩個都使用是正常的工作流程。
| 它回答的問題 | Image Color Extractor | Image Color Picker |
|---|---|---|
| 哪些顏色最常出現？ | 是——依取樣面積排序 | 否 |
| 選定像素的確切 HEX？ | 否 | 是——點選該位置 |
| 調色盤的最佳起點？ | 是 | 可用於驗證 |
| 最適合用於單一品牌色塊？ | 不適合此用途 | 是 |
| 輸出單位 | HEX、RGB、百分比 | HEX、RGB |
開始前值得知道的限制
20 MB 的輸入上限和瀏覽器能否解碼該檔案是唯一真正的關卡，因此現代瀏覽器能開啟的任何格式——通常是 PNG、JPEG、WebP、GIF、BMP 和 AVIF——皆可適用。動態圖片會以瀏覽器為畫布解碼的那一格（通常是第一格）進行分析。512 像素的工作畫布讓結果快速產生，但也正因為如此，一個一像素的強調色或一條細線即使在設計上很重要，仍可能消失。大型背景幾乎總是會名列前茅，因為它涵蓋了大量像素，不論設計如何看待它的重要性。輸出屬於描述性質，而非權威性質：它並不認識 ICC 設定檔、Pantone 油墨或印刷條件，因此在上稿前，請把任何候選的文字與背景搭配，送到專門的對比工具中檢查。
請用設計師看待草圖的方式來運用結果：作為一個可以回應的起點，而不是最終規格。將百分比視為排序信號而非精確的面積量測，讓最大的強調色與品牌定義的細節保留在你的眼裡，而非排名清單中，並在定稿前把 HEX 碼複製到你的實際草稿裡。這就是完整的迴圈——挑選一張圖片、讓瀏覽器在本地端摘要可見的顏色、複製有用的部分，然後繼續前進，沒有帳號、沒有上傳，也沒有等待室。
如果你正在權衡選項，批次反轉多張圖片的顏色 對此有詳細說明。