前端還原設計稿
從設計圖截圖裏取按鈕色,複製 HEX 直接貼進 CSS。
使用指南
圖片取色器用於從一張圖裏精確拿到顏色:鼠標在圖上移動時,光標旁跟着一個 120px 的圓形放大鏡,把周圍 15×15 個像素放大顯示並高亮中心格,避免在漸變或邊緣處點偏;點擊後色值寫入「當前顏色」並自動複製 HEX,同時給出 rgb() 與 hsl() 兩種寫法。圖片載入時還會把它縮到 128px 寬做顏色聚類,提取 8 個主色並按佔比畫成色帶。處理在瀏覽器本地完成。
更新於 2026-09-09约 3 分钟读完
圖片取色器用於從一張圖裏精確拿到顏色:鼠標在圖上移動時,光標旁跟着一個 120px 的圓形放大鏡,把周圍 15×15 個像素放大顯示並高亮中心格,避免在漸變或邊緣處點偏;點擊後色值寫入「當前顏色」並自動複製 HEX,同時給出 rgb() 與 hsl() 兩種寫法。圖片載入時還會把它縮到 128px 寬做顏色聚類,提取 8 個主色並按佔比畫成色帶。處理在瀏覽器本地完成。
與「顏色轉換」工具不同,這裏的顏色來自圖片像素;與「圖片直方圖」不同,它關心的是具體色值而非明暗分佈。
HEX 自動進剪貼板
8 個主色由 128px 縮略圖聚類得出
細小像素會被合併,取色略有平均
點擊圖中天空HEX `#4A90D9`、`rgb(74, 144, 217)`、`hsl(211, 65%, 57%)`載入一張品牌海報色帶裏最寬的一段是海報主色,其餘按面積遞減長邊 6000px 的大圖取色畫布縮到 2048px從設計圖截圖裏取按鈕色,複製 HEX 直接貼進 CSS。
載入競品海報看 8 個主色的佔比,理解它的用色比例。
從公司 Logo 裏取主色和輔色,套到幻燈片主題。
放大到單像素確認某處是純黑 #000000 還是深灰。
JPG 壓縮、色彩配置文件和放大縮小都會讓像素值有 1–3 的偏差;用 PNG 原圖、在純色區域取色最準。
不能,只讀 RGB;透明背景的 PNG 在透明處讀到的是畫布上的合成色。
主色按像素數量聚類,面積很小的點綴色會被合併;直接用放大鏡點它即可。
圖片在瀏覽器本地繪製到 canvas 取色,不會上傳到任何服務器;複製到剪貼板只發生在你點擊時。
更新於 2026-09-09
放大鏡精確取色(HEX/RGB/HSL),自動提取主色調色板
此工具尚未完整翻譯,部分內容使用源文或回退語言。