色彩選擇器
色彩選擇器工具是一款從圖片中擷取顏色(色碼)的工具。載入上傳的圖片或圖片 URL 後,可透過顯示的放大鏡放大,並依像素點擊拾取顏色。
將圖片拖到這裡
或
支援 PNG / JPG / WebP / GIF / BMP / SVG(最大 20MB)。.png,.jpg,.jpeg,.webp,.gif,.bmp,.svg
已擷取的顏色0 項
點擊圖片中的像素後,顏色會加入這裡。
相關工具
色彩選擇器是什麼?
色彩選擇器工具是一款從圖片中擷取顏色(色碼)的工具。載入上傳的圖片或圖片 URL 後,可透過顯示的放大鏡放大,並依像素點擊拾取顏色。
取得的顏色可在 HEX(#RRGGBB)、RGB、HSL 三種形式間切換顯示。放大鏡倍率提供 5x / 10x / 20x 三檔。拾取多種顏色組成調色盤後,可將其依 JSON 或 CSS 變數形式複製到剪貼簿,直接貼上至設計稿、樣式指南或程式碼中。
在 Chrome 系瀏覽器中還可使用「從畫面拾取顏色」(EyeDropper API),不限於圖片,可於桌面畫面全局拾取顏色。載入的圖片全部在使用者的瀏覽器內處理,不會傳送至外部伺服器。全程在瀏覽器中完成。
使用方法
- 上傳圖片檔案,或貼上圖片 URL 載入。
- 將游標移到圖片上時會顯示放大鏡。選擇放大鏡的倍率(5x / 10x / 20x)。
- 點擊想依像素精準確認的位置,該點的顏色會被加入調色盤。
- 在 HEX / RGB / HSL 之間切換顏色顯示形式以確認。
- 在支援的瀏覽器中,可透過「從畫面拾取顏色」按鈕從桌面畫面任意位置拾取顏色。
- 透過「複製 JSON」「複製 CSS 變數」可一併匯出擷取的調色盤。
使用情境
- 希望從設計稿中取出配色並作為 Web 網站 CSS 變數實作的 Web 設計師、前端工程師。
- 希望從競品站或參考設計的截圖中分析配色的 UI 設計師。
- 希望從照片或素材中擷取品牌色以製作配色指南的品牌負責人。
- 希望嚴格取出插畫或照片特定部分顏色的插畫家、攝影師。
- 希望讓資料或簡報中所用圖表的顏色與參考圖保持一致的商務人士。
注意事項
- 「從畫面拾取顏色」(EyeDropper)僅在部分 Chrome 系瀏覽器可用。Firefox / Safari 等不支援時不會顯示。
- 透過圖片 URL 載入時,若目標圖片伺服器不允許 CORS(Cross-Origin Resource Sharing),顏色取得(getImageData)可能失敗。
- 顏色在 sRGB 色彩空間中取得。廣色域(如 Display P3)圖片會顯示轉換為 sRGB 後的值。
- 放大鏡中顯示的顏色可能與整圖視覺顏色略有不同(受相鄰像素影響)。
- 本工具依像素取色。與 AI「全圖代表色擷取」的目標不同。
常見問題
圖片會被上傳至伺服器嗎?
不會。顏色擷取處理全部在您的瀏覽器內完成。即使是公司內部設計素材或個人照片也可放心使用。
輸入圖片 URL 後取不到顏色。
若圖片代管未允許 CORS(跨來源存取),依瀏覽器規範無法取得顏色。請將圖片下載至本機後從上傳方式重試。
HEX / RGB / HSL 有什麼差異?
HEX 是 #RRGGBB 的 16 進位表示,RGB 以 0~255 表示紅、綠、藍的強度,HSL 以色相、飽和度、明度三要素表示。CSS 中 HEX 與 RGB 廣泛使用,HSL 適合以色相為中心做微調的設計。本工具可一鍵切換同一顏色的 3 種表示。
看不到「從畫面拾取顏色」。
僅在支援 EyeDropper API 的 Chrome 系瀏覽器(Google Chrome / Microsoft Edge / Brave 等)中顯示。Firefox 與 Safari 不支援,請使用上傳圖片的方式。
可以將取得的顏色帶入 Figma / Sketch / Photoshop 嗎?
將 HEX 直接複製即可貼上至幾乎所有設計工具。需要一併帶入多種顏色時,請透過「複製 JSON」「複製 CSS 變數」匯出的字串,使用對應外掛或匯入功能取入。