從圖片中取色
選擇圖片畫素，複製 HEX、RGB、HSL 或 CSS 顏色變數。
- 免費
- 無需登入
- 本地處理
使用方法
選擇裝置上的檔案、拖入檔案，或貼上圖片。
懸停預覽顏色，點擊儲存。使用鍵盤時，方向鍵移動（按住 Shift 每次 10 像素），Enter 儲存。
下載結果或複製顏色，無需註冊或付費。
適用情境
品牌色
從 Logo 或產品照片中找出精確的 HEX 色碼，讓設計保持一致。
從靈感圖建立配色
擷取照片或藝術作品的主色調，作為配色方案的起點。
從設計到程式碼
將顏色複製為 CSS 變數或 Tailwind 設定片段，直接貼進專案。
效果與限制
在圖片上選點，檢視包含透明度的網頁顏色。放大預覽有助於選擇小細節。最多儲存 10 個不同顏色，可複製單個色值或下載 CSS 變數文字。色值來自瀏覽器解碼後的圖片，不代表經過校準的印刷顏色測量。
輸入和輸出均受大小限制，不支援動畫圖片。檔案僅儲存在記憶體，重新整理會清空。手機上建議使用較小批次。
常見問題
如何取得圖片中某個顏色的 HEX 色碼？
上傳圖片後，將滑鼠移到任一像素上即可在放大鏡中預覽，點擊即可儲存。HEX、RGB、HSL 和 OKLCH 色值會顯示在圖片旁，點擊色值就能複製。
主色調是怎麼找出來的？
工具會對縮小後的圖片副本取樣，以中位數切割（median-cut）演算法將相近顏色分組，並依在圖片中所占面積排序。透明像素不列入計算。
可以擷取圖片以外的顏色嗎？
在 Chrome、Edge 等支援 EyeDropper API 的瀏覽器中，使用「從螢幕取色」即可擷取螢幕上任何一個像素的顏色。
為什麼顏色和設計檔略有差異？
採用 Display P3 等廣色域色彩設定檔的圖片，會轉換成網頁使用的 sRGB。色值與瀏覽器實際顯示一致，但可能與印刷或設計軟體中依原始設定檔呈現的顏色不同。
圖片會被上傳嗎？
不會。圖片處理在瀏覽器本地完成，檔案不會傳送給 Codia。重新整理或離開頁面後工作區會清空。獲准採集的網站統計不包含圖片內容和檔名。
支援批次處理嗎？
每次處理一張 JPG、PNG 或 WebP，最大 20 MiB、1200 萬畫素。
畫質和後設資料會保留嗎？
取決於操作和設定。有失真壓縮會改變畫素，JPG 無法保留透明背景。匯出面向普通 8 位網頁圖片，不承諾保留 EXIF、HDR、原始色彩配置或 16 位色深，請檢查處理結果。
相關圖片工具
線上圖片壓縮
縮小 JPG、PNG 和 WebP 的檔案大小，保持原始格式。
開啟工具 →PNGPNG 圖片壓縮
壓縮 PNG 截圖和圖形素材，保留透明背景。
開啟工具 →JPG · PNG · WEBP將圖片壓縮至 100KB
自動調整畫質和尺寸，讓照片滿足上傳大小限制。
開啟工具 →WEBP → PNGWebP 轉 PNG
將靜態 WebP 轉為 PNG，保留透明背景。
開啟工具 →PNG · WEBP → JPGPNG 轉 JPG
將 PNG 轉為 JPG，並為透明區域選擇背景顏色。
開啟工具 →JPG · PNG · WEBP線上調整圖片尺寸
按畫素或比例調整圖片尺寸，保持原始寬高比。
開啟工具 →SVG → PNGSVG 轉 PNG
將自包含的 SVG 按 1×、2×、4×或自定義寬度匯出為 PNG。
開啟工具 →