線上圖片色彩擷取工具
瞬間從照片或圖片中精準提取顏色色碼。
支援自動生成主要色彩調色盤，並提供方向鍵微調功能。
拖曳圖片至此
或點擊選擇檔案 / 支援 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 (調色)。
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.