如何使用
- 點擊「選擇圖片」、拖曳輸入圖片，或直接按 Ctrl+V / Cmd+V 貼上截圖。
- 在圖片上移動鼠標或手指，查看實時 HEX、RGB、HSL 顏色值和放大鏡預覽。
- 點擊想保留的位置，顏色會進入取色歷史。
- 點擊「提取主色調」，生成圖片調色板，並複製需要的色值。
示例場景：把產品截圖貼上進工具，吸取按鈕主色，複製 HEX 到 CSS 或設計稿中。
核心功能
- 本機圖片取色：圖片只在瀏覽器 Canvas 中渲染和讀取像素，不會上傳到伺服器。
- 像素級 HEX/RGB/HSL：移動鼠標或拖動手指，即時查看當前像素的 HEX、RGB 和 HSL 顏色值。
- 放大鏡準星輔助：局部放大預覽幫助你對準圖示邊緣、UI 截圖細節和細小色塊。
- 圖片調色板生成：在瀏覽器內統計圖片像素，提取最多 5 個適合設計參考的主色調。
- 點擊保存與複製：點擊圖片保存取色歷史，點擊色塊即可複製顏色代碼。
相關工具
在 HEX、RGB、HSL、CMYK 之間實時轉換顏色，並自動計算 WCAG 無障礙對比度（AA/AAA）。支援印刷用 CMYK 百分比與可視化預覽。全程本機處理不上傳。
生成用於設計與前端開發的 Lorem Ipsum 假文，支援純文字、HTML <p> 標籤與 JSON 數組輸出。可變長度（段落/句子/單字），並支援中文假文。全程本機生成不上傳。
快速計算長寬比與缺失尺寸（輸入寬得高/輸入高得寬），內置 TikTok 9:16、YouTube 16:9、Instagram 4:5 等預設，並自動生成 aspect-ratio CSS 代碼。全程本機運行不上傳。
計算邏輯
本工具使用 HTML5 Canvas 在瀏覽器本機解碼圖片，並通過 getImageData 讀取取色坐標處的 RGBA 像素值。HEX、RGB 和 HSL 都由這個像素值即時換算得到。
主色調提取會按一定步長採樣 Canvas 像素，將相近顏色歸入同一色桶，再按出現次數排序輸出前 5 個顏色。這個結果適合快速生成網頁和設計參考色板，但不承諾還原專業攝影工作流中的 ICC / P3 絕對色彩管理。
常見問題
圖片會上傳到伺服器嗎？
不會。圖片讀取、取色、放大鏡預覽和調色板生成都在你的瀏覽器本機完成。
如何從圖片中獲取 HEX 顏色？
選擇或貼上圖片後，把鼠標或手指移動到目標位置，當前顏色會實時顯示。點擊圖片即可把顏色保存到歷史記錄，再點擊色塊複製 HEX。
支援哪些顏色格式？
工具顯示並複製 HEX、RGB 和 HSL，覆蓋網頁設計和前端開發最常用的顏色格式。
爲什麼和 Photoshop 裏的顏色可能有差異？
瀏覽器 Canvas 讀取的是圖片在瀏覽器中實際渲染後的像素。不同瀏覽器、顯示器色域和圖片內嵌色彩配置檔案可能造成輕微差異。
行動裝置上可以取色嗎？
可以。在移動設備上，你可以用手指在圖片上拖動準星，鬆開或點擊即可鎖定顏色。