線上圖片色彩擷取工具
瞬間從照片或圖片中精準提取顏色色碼。
支援自動生成主要色彩調色盤，並提供方向鍵微調功能。
拖曳圖片至此
或點擊選擇檔案 / 支援 Ctrl+V 貼上
* 圖片完全在您的瀏覽器本地端進行處理，絕對不會被上傳到任何伺服器。
* 點擊圖片即可取色。點擊後可使用鍵盤方向鍵 (↑↓←→) 進行 1px 的精確微調。
色彩資訊
關於圖片色彩擷取工具
這是一款強大的免安裝圖片色彩擷取工具 (Image Color Picker)，能幫助您從任何照片、截圖或插畫中，快速吸取並提取出精準的色碼。工具提供了包含 HEX、RGB、HSL、CMYK 以及新一代的 OKLCH 等多種格式的色碼轉換。
本工具運用了先進的瀏覽器端 (Client-side) Canvas API 技術，因此您上傳的所有圖片都只會在您的設備本地進行運算，絕對不會上傳到任何外部伺服器。這不僅確保了極快的處理速度，也讓您能安心地處理具有機密性或牽涉隱私的圖片資料。
使用方法
上傳圖片
將您想要提取顏色的圖片拖曳到上方區域，或是點擊選擇檔案。同時也支援直接從剪貼簿貼上 (Ctrl+V / Cmd+V)。載入是瞬間完成的，全在您的瀏覽器內處理。
使用吸管精準取色
選擇「吸管工具」分頁，點擊圖片上您想查詢的區域。畫面會出現放大鏡，幫助您精準對焦到微小的像素。點擊後，您還可以利用鍵盤的方向鍵 (↑↓←→) 進行逐像素的微調。
自動分析主要色彩
切換到「自動分析」分頁，系統會自動運算並產生該圖片中最具代表性的前 8 個主要顏色 (Dominant Colors) 調色盤。點擊「複製為 CSS 變數」，您就能直接貼到專案的樣式表中使用。
名詞解釋
- HEX 色碼 (Hexadecimal Color Code)
- 網頁設計中最常被使用的色彩表示法。將紅 (R)、綠 (G)、藍 (B) 的數值轉換為 16 進位 (00 到 FF)，並組合成如
#FF5733這樣的 6 碼字串。在撰寫 HTML 與 CSS 時是指定色彩的標準做法。 - OKLCH 色彩空間
- 現代 CSS 開始支援的全新色彩定義法。它由亮度 (Lightness)、彩度 (Chroma) 與色相 (Hue) 組成。其最大的特色是「符合人類視覺感知的均勻性」，能輕易建立出亮度一致、對比度良好的色彩系統，改善了傳統 HSL 色彩空間的缺陷。
- 主要色彩 (Dominant Color)
- 一張圖片中最具視覺佔比、最能決定整體氛圍的代表顏色。本工具會透過專屬演算法分析全圖的像素，並自動為您提煉出最具代表性的 8 種色彩。
- 中位數切割演算法 (Median Cut Algorithm)
- 一種常用於影像色彩量化 (Color Quantization) 的演算法。它會將圖片的所有像素放到一個 3D 的 RGB 色彩空間中，並沿著色彩差異最大的軸線不斷進行切割，最後找出最具代表性的顏色群組，用來生成本工具的自動調色盤。
- 調色盤 (Color Palette)
- 設計中使用的色彩組合。通常會定義好主色、副色、強調色以及背景色等，確保整個網站或設計作品的視覺風格統一和諧。
常見問題
- Q.上傳的圖片會被儲存到伺服器上嗎？
- 不會的。所有的圖片處理與色彩擷取演算法都是透過您瀏覽器內建的 Canvas API 在本地端執行。圖片資料絕對不會透過網路傳送到外部伺服器，即使是機密或私人的圖片也能安心使用。
- Q.支援哪些圖片格式？
- 支援網頁常見的圖片格式，包含 JPG、PNG、GIF、WebP 以及 SVG。檔案大小限制為 10MB，對於絕大多數的使用場景都非常夠用。
- Q.擷取出來的顏色準確嗎？
- 非常準確。因為工具是直接讀取 Canvas 上的像素資料，所以能取得 100% 像素級距別的顏色 (在 sRGB 色域下)。此外，點擊圖片後，您還可以使用鍵盤的上下左右方向鍵來微調吸管位置，精準取得相鄰像素的微小色彩差異。
- Q.CMYK 色碼可以直接用於印刷嗎？
- 本工具提供的 CMYK 數值是根據 RGB 數值透過近似公式計算出來的理論值。在專業的印刷排版 (DTP) 中，實際的 CMYK 數值會受到色彩描述檔 (Color Profile，如 Japan Color) 的影響，因此建議僅將其作為參考值，並在 Illustrator 等專業軟體中進行最終確認。
使用場景
網頁設計與切版
前端工程師可以將客戶提供的 Logo 圖檔或是參考網站的截圖上傳，精準取得品牌色的 HEX / RGB 色碼並寫入 CSS 中。配合自動分析功能，還能一鍵找出主色、副色與背景色的候選名單。
配合照片的 UI 配色
在設計部落格文章列表或 Hero 橫幅時，可以先提取照片的主要色系 (Dominant Color)，並將這些顏色應用於文字背景或按鈕上，打造出圖片與 UI 完美融合的質感設計。
為插畫建立靈感色票
看到喜歡的插畫家作品或是優美的風景攝影時，上傳圖片即可提取出令人驚豔的色彩組合 (色票)。您可以直接一鍵複製為 CSS 變數，作為未來自己原創作品的配色靈感庫。
攝影修圖的白平衡參考
在進行相片後製 (Retouch) 時，透過吸管工具取得人物膚色或天空顏色的絕對 RGB 數值。透過分析這些像素級的客觀數據，能幫助您更精準地進行白平衡校正與電影感的 Color Grading (調色)。
發送反饋/請求
發送反饋
請告訴我們您的想法，以幫助我們改進工具。
這不是工具的輸入欄位
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.