色彩選擇器
色彩選擇器工具是一款從圖片中擷取顏色(色碼)的工具。載入上傳的圖片或圖片 URL 後,可透過顯示的放大鏡放大,並依像素點擊拾取顏色。
將圖片拖到這裡
或
支援 PNG / JPG / WebP / GIF / BMP / SVG(最大 20MB)。.png,.jpg,.jpeg,.webp,.gif,.bmp,.svg
已擷取的顏色0 項
點擊圖片中的像素後,顏色會加入這裡。
相關工具
圖片配色擷取
線上圖片取色工具，上傳圖片即可自動從圖片擷取主要配色（代表色／主色）並產生調色盤。支援 HEX/RGB/HSL 三種格式、顯示各顏色占比、可調整 4–12 種顏色，並能匯出 JSON、CSS 變數、SCSS 或 Tailwind 設定。圖片不上傳伺服器，全程在瀏覽器中完成，免費且無需註冊。
- 擷取
- 設計與配色
配色產生器
只要選一個基準色，就能依配色理論自動產生互補色、類似色、三角配色等配色方案的免費配色產生器。可輸出 CSS 變數、Tailwind、SCSS、JSON 格式，並提供對比度參考，全程在瀏覽器中完成。
- 產生器
- 設計與配色
色碼轉換
在 HEX、RGB、HSL、HSV、OKLCH 色碼之間互相轉換的免費工具，支援透明度（RGBA、8 位 HEX）與 CMYK 參考值，一鍵複製任意格式，全程在瀏覽器中完成。
- 轉換
- 設計與配色
對比度檢查
即時計算前景色與背景色對比度的免費對比度檢查工具，依 WCAG 2.1/2.2 判定 AA、AAA 是否合格，並支援合格色建議、色覺（色盲）模擬與 APCA，全程在瀏覽器中完成。
- 檢查
- 設計與配色
- 無障礙
CSS 漸層產生
以 GUI 操作顏色、方向與色彩停駐點,即可自動產生 CSS 漸層程式碼的免費漸層產生器。支援線性、放射、圓錐（conic）漸層,可調整不透明度,並輸出 CSS 變數、Tailwind、SCSS 格式與分享 URL。複製即可使用,全程在瀏覽器中完成。
- 產生器
- 開發
- 設計與配色
CSS 陰影產生器
box-shadow 產生器，可用滑桿即時調整 CSS 陰影（box-shadow、drop-shadow）。支援多圖層、inset 內陰影、新擬態（Neumorphism）、長陰影、發光等預設，並能輸出 CSS、CSS 變數、Tailwind、SCSS 與分享 URL。免費、免註冊，全程在瀏覽器中完成。
- 產生器
- 設計與配色
色彩選擇器是什麼?
色彩選擇器工具是一款從圖片中擷取顏色(色碼)的工具。載入上傳的圖片或圖片 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「全圖代表色擷取」的目標不同。