圖片配色擷取
圖片配色擷取可以自動從圖片中擷取主要配色（代表色），協助你快速產生可用的調色盤。上傳照片或設計圖後，工具會分析整張圖片，擷取最多 12 種代表色，並顯示每種顏色的占比（在圖片中所占的比例）。
將圖片拖曳到這裡
或
支援 PNG / JPG / WebP / GIF / BMP / SVG（最大 20MB）。.png,.jpg,.jpeg,.webp,.gif,.bmp,.svg
相關工具
色彩選擇器
從圖片中擷取顏色並取得色碼的免費色彩選擇器，可用放大鏡依像素精準拾取，支援 HEX / RGB / HSL 切換與調色盤匯出。免費、免註冊。
- 設計與配色
- 效率
配色產生器
只要選一個基準色，就能依配色理論自動產生互補色、類似色、三角配色等配色方案的免費配色產生器。可輸出 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。免費、免註冊，全程在瀏覽器中完成。
- 產生器
- 設計與配色
圖片配色擷取是什麼?
圖片配色擷取可以自動從圖片中擷取主要配色（代表色），協助你快速產生可用的調色盤。上傳照片或設計圖後，工具會分析整張圖片，擷取最多 12 種代表色，並顯示每種顏色的占比（在圖片中所占的比例）。
擷取的顏色可在 HEX（#RRGGBB）、RGB、HSL 三種格式之間切換檢視，並支援一鍵複製。你可以選擇擷取的顏色數量（4–12 種），並將整套調色盤匯出為 JSON、CSS 變數、SCSS 或 Tailwind 設定，直接用於網站或設計規範。此外，可透過擷取模式（主色優先 / 平衡 / 點綴色優先）選擇擷取策略，控制面積小但鮮明的點綴色保留多少。
與每次只取一個像素顏色的「滴管工具」不同，本工具會從整張圖片中產生最能代表配色平衡的顏色。上傳的圖片不會傳送到伺服器，配色擷取全程在瀏覽器中完成。免費使用，無需註冊。
使用方法
- 拖放想要分析的圖片，或點擊選擇檔案上傳。
- 工具會從整張圖片中自動擷取代表色，並以調色盤形式顯示每種顏色的占比。
- 選擇「擷取模式」（主色優先 / 平衡 / 點綴色優先），控制保留多少面積小但鮮明的點綴色。
- 選擇「擷取的顏色數量」（4–12 種），即可依該數量重新擷取配色。
- 在 HEX / RGB / HSL 之間切換顏色代碼格式，點擊任一顏色即可複製。
- 使用「匯出配色」將整套調色盤複製為 JSON、CSS 變數、SCSS 或 Tailwind。
使用情境
- 需要從照片或設計圖決定配色的網頁設計師與前端工程師，可將擷取的代表色直接用作 CSS 變數或 Tailwind 設定。
- 希望從參考網站或截圖分析配色平衡的 UI/UX 設計師。
- 需要從產品照片或品牌素材中擷取主色（基礎色、強調色）以製作配色規範的品牌負責人。
- 想快速掌握插畫或照片整體色調的插畫家與攝影師。
- 希望依參考圖片快速統一文件或簡報配色的商務使用者。
注意事項
- 代表色透過 median-cut（中位切分）顏色量化演算法計算得出。即使是同一張圖片，改變擷取的顏色數量也會使各顏色的數值與占比有所變化。
- 相近的顏色（色差很小的顏色）會被合併，因此實際顯示的顏色數量可能少於所選數量。
- 可透過擷取模式（主色優先 / 平衡 / 點綴色優先）切換權重：點綴色優先更易保留面積小但鮮明的顏色，主色優先則偏向占面積大的顏色。
- 為加快擷取速度，圖片會在內部縮小後再進行分析，因此占比僅供大致參考。
- 顏色以 sRGB 色彩空間處理。廣色域（如 Display P3）圖片會以轉換為 sRGB 後的數值顯示。
- 透明度較高（接近全透明）的像素會被排除在代表色之外。
- 如需逐像素取得顏色，請使用「滴管工具」。本工具適用於產生整張圖片的代表色。