使用方式
- 1 開啟智慧圖片色彩提取與像素放大鏡，輸入、貼上或選擇要處理的內容。
- 2 依需求調整頁面上的選項與格式。
- 3 確認即時結果，再複製或下載可用的輸出。
智慧圖片色彩提取與像素放大鏡
拖入本地圖片，透過像素級高解析放大鏡精準抓取色值，支援 HEX、RGB、HSL 複製與 WCAG 網頁色彩對比度檢測。
原始圖片 (移動滑鼠以像素取色)
🎨
拖曳圖片至此，或點擊選擇本地圖片
Supports PNG, JPG, WEBP #FFFFFF rgb(255, 255, 255) hsl(0, 0%, 100%)
文字顏色 (前景)
背景顏色
對比度比例： 4.52:1
WCAG AA 級標準 (對比度 ≥ 4.5:1)
一般文字: 通過 ✅ 大字體 (18pt+): 通過 ✅
WCAG AAA 級標準 (對比度 ≥ 7.0:1)
一般文字: 不通過 ❌ 大字體 (18pt+): 通過 ✅
適合的使用情境
拖入本地圖片，透過像素級高解析放大鏡精準抓取色值，支援 HEX、RGB、HSL 複製與 WCAG 網頁色彩對比度檢測。適合日常工作、開發、學習或快速驗證時使用。
隱私與資料處理
工具在瀏覽器中運作；處理敏感資料前，仍請確認瀏覽器與裝置環境可信。
從圖片精準取色，並確認配色是否夠清楚
設計網頁、簡報或社群圖卡時，常需要從品牌 Logo、產品照或參考圖中「吸」出確切的顏色。用肉眼猜色碼很容易偏差，而截圖丟進繪圖軟體又太麻煩。本工具讓你上傳圖片後直接在畫面上點選，立即取得該像素的 HEX、RGB 與 HSL 色碼，一鍵複製到 CSS、Figma 或 Canva 使用。
游標移到圖片上時會出現圓形放大鏡，把游標周圍 9×9 個像素放大顯示，中央以紅框標出目前選中的那一格。照片中的邊緣與漸層常常相鄰像素差異很大，放大鏡能幫你避開反鋸齒或雜訊造成的「髒色」，精準點到想要的顏色。每次取色都會加入取色歷史，方便來回比較並組成一組配色。
取到顏色之後，下方的 WCAG 2.1 對比度檢測可以設定前景（文字）與背景色，計算對比度比率並顯示是否通過標準：一般文字 AA 級需 4.5:1、AAA 級需 7:1；大字（18pt 以上，或 14pt 粗體以上）則分別放寬為 3:1 與 4.5:1。從品牌色延伸出按鈕或標題配色時，先檢查對比度，能避免長輩、弱視者或戶外強光下看不清楚的問題。
要注意，螢幕取到的顏色是圖片檔中的數值，而照片會受光線、白平衡與壓縮影響，同一件產品在不同照片裡色碼可能不同；需要正式品牌色時，仍應以官方規範的色碼為準。圖片只在瀏覽器中以 Canvas 讀取，不會上傳到伺服器。
常見問題
可以輸出哪些色碼格式？
點選像素後會同時顯示 HEX、RGB 與 HSL，可分別一鍵複製。
為什麼同一個區域點出來的顏色不太一樣？
照片中的雜訊、漸層與邊緣反鋸齒會讓相鄰像素顏色不同。請利用放大鏡對準顏色均勻的區塊再點選。
WCAG 對比度要多少才算合格？
一般文字 AA 級需 4.5:1、AAA 級需 7:1；大字（18pt 以上或 14pt 粗體）AA 為 3:1、AAA 為 4.5:1。
上傳的圖片會被儲存嗎？
不會。圖片只在你的瀏覽器中讀取像素，不會傳送到任何伺服器。
