圖片色彩擷取工具會在您的瀏覽器中完整讀取一張圖片，將鄰近的 RGB 像素分群，並回傳一個經過排序的調色盤，其中每個色塊都包含一個 HEX 碼、一組 RGB 三元值，以及該色塊所代表之可見像素的百分比。整個流程都在本機執行：檔案透過暫時性的 Object URL 解碼後，繪製到記憶體中的畫布上，並在不離開頁面的情況下進行分析，因此原始圖片永遠不會上傳到遠端服務。您所得到的是一組精簡的調色盤，包含最常出現的可見顏色，而不是所有相異像素的清單，而且每一個項目都可以直接作為 HEX 常數或 CSS rgb() 三元值使用。這種格式讓這個工具非常適合設計師、開發人員或分析師在需要快速取得 RGB 色彩基準時，用於樣式設定、圖表、主題配置或視覺檢視，而無需手動取樣像素或執行完整的感知分群流程。
圖片色彩擷取工具會回傳什麼
結果面板中的每個色塊都是一組包含三個值的小組合：給偏好十六進位的設計工具使用的六位數 HEX 碼、供 CSS 與程式碼使用的 rgb(r, g, b) 形式 RGB 三元值，以及顯示該顏色在分析過的可見區域中所佔比例的百分比。這個工具刻意一次提供全部三個值，因為 HEX 和 RGB 對同一個顏色來說是可以互換的，而百分比能協助您判斷一個色塊是主要背景還是次要的點綴色。調色盤大小是您唯一需要做的選擇之一，它控制了您會看到的排序項目數量。可用的大小有 3、5、8 和 12 種顏色。大小 3 提供快速的視覺摘要；5 和 8 涵蓋大多數情緒板與簡報的需求；12 則是這個工具所提供的最詳細選項，當您懷疑影像中兩個重要區域在較小尺寸下被合併時，這個大小就非常有用。您可以選取任何一個色塊，將其 HEX 值複製到剪貼簿。接著，您可以在編輯器中手動將其轉換為 RGB，或者直接讀取工具顯示在 HEX 碼旁邊的三元值。
如何在三個步驟內從圖片中擷取 RGB 值
擷取工作流程刻意設計得很短，因為分析是在本機執行，您可以視需要重新執行多次。
- 選擇一個支援的、大小不超過 20 MB 的圖片，並選擇 3、5、8 或 12 種顏色的調色盤大小。常見的 PNG、JPEG、WebP、GIF、BMP 和 AVIF 檔案都可以使用，只要您的覽器能夠解碼即可。從您認為足以涵蓋該圖片的最小大小開始，如果發現有重要區域遺漏，再往上調整。
- 等待本機畫布分析完成，然後將排序後的百分比與色塊與可見的影像區域進行比對。從最大到最小檢視每個百分比，思考每個色塊是否對應到原始影像中您能看到的區域。如果有兩個區域被合併成一個平均值，請增加調色盤大小並重新檢查。
- 選取任何一個色塊以複製其 HEX 碼，並在適當的專業工具中驗證對比度或精確的品牌需求。在決定將其用於文字之前，請先透過對比度檢查工具執行任何候選的前景與背景配對，切勿從頻率摘要中推斷官方的品牌調色盤或 Pantone 值。
第三個步驟很重要，因為擷取出的 RGB 值是對影像的描述，並非對這些顏色在影像以外所代表的意義具有權威性。
本機畫布分析如何將像素轉換為 RGB 三元值
色塊背後的方法是透明且具決定性的，這讓您在結果出乎意料時很容易推理。瀏覽器會解碼所選的檔案，並將其繪製到記憶體中的畫布上。只有在必要時，影像才會被縮小，以使任一邊的尺寸不超過 512 像素；演算法讀取的是縮小後的畫布，而不是原始的全解析度像素。Alpha 值低於 128 的像素會被忽略，以避免幾乎透明的背景主導調色盤。
一旦畫布進入記憶體後，每個可見像素的紅、綠、藍通道值都會取自其最高的三個位元，這會在每個通道產生 8 個範圍。三個通道加總，桶數的最大值為 8 × 8 × 8 = 512。每個像素都恰好落入一個桶中。這個工具會計算每個已佔用桶中的像素數量，在該桶內對原始通道值取平均，然後依數量對桶進行排序。同分的情況會依穩定的數值桶順序來打破，這也是為什麼重新執行同一張影像會產生相同的調色盤。
粗略的分桶方式讓結果快速且可重現，但它並非一個感知分群模型。對人眼來說看起來非常相似的兩個顏色，可能會落入相鄰的桶中，而幾個細微不同的色調則可能合併為一個平均值。亮度、伽馬、裝置色彩描述檔和人類視覺敏感度都沒有被納入模型。顯示的百分比是根據縮放後取樣的可見像素數量計算的，而非原始檔案的像素數量，因此非常細小的細節可能會消失，而大面積的背景可能僅因涵蓋許多像素就排名靠前。
RGB 取在什麼情況下優於像素選取
圖片色彩擷取工具與圖片色彩選擇器回答的是不同的問題，正確的工具取決於您實際的需求。
| 面向 | 圖片色彩擷取工具 | 圖片色彩選擇器 |
|---|---|---|
| 主要目標 | 彙整整張影像中最常出現的可見顏色 | 回報您所指像素的確切 RGB 值 |
| 您提供的輸入 | 一張影像加上 3、5、8 或 12 的調色盤大小 | 一張影像加上點選的位置 |
| 輸出格式 | 帶有 HEX、RGB 三元值和百分比的排序色塊 | 在點選位置的單一 HEX 與 RGB 值 |
| 最適用於 | 情緒板、主題、CSS 變數、圖表序列、設計檢視 | 特定的標誌邊緣、按鈕顏色或取樣細節 |
當您已經知道您需要的顏色在影像中的哪個位置時，例如標誌的角落、圖示的筆畫或單一按鈕，請使用選擇器。當您希望在無需指向任何位置的情況下取得起始顏色，或當同一個顏色出現在多個位置而您想要平均值時，請使用擷取工具。
將擷取出的 RGB 值實際應用
這個工具所呈現的 RGB 三元值可以直接套用於常見的樣式與分析情境。在 CSS 中，每個色塊都可以變成一個自訂屬性定義，例如 --brand-bg: rgb(244, 232, 218);，您可以將其貼到樣式表中並在各元件間重複使用。在圖表函式庫中，排序後的色塊清單為您提供一個可作為系列顏色起點的合理序列，而百分比則暗示了哪個顏色是主要背景、哪個是次要類別。對於情緒板或主題簡報來說，3 色和 5 色的結果通常足以定調整個視覺，而 12 色的結果則能提供讓調色盤更完整的點綴色。
當擷取出的調色盤將用於文字或介面外觀時，請將其視為草稿而非最終答案。同一個工具可以告訴您影像中存在哪些顏色，但只有對比度檢查工具能告訴您其中任何兩個顏色是否適合放在文字後方，也只有具備色彩管理的設計應用程式能告訴您取樣的色塊是否符合官方的品牌或 Pantone 值。請透過專用的對比度工具執行候選配對，將可用的 HEX 或 RGB 碼複製到您的設計草稿中，並在利害關係人拒絕某個顏色而您需要重新檢視時，再次回到該影像。
如需相關的逐步教學，重點在於找出影像中的每一個獨立顏色，而非最常出現的群組，請參閱以精確的 HEX 與 RGB 找出影像中的每一個顏色指南。
相關閱讀：如何在 Mac 上從 Word 文件擷取圖片。