前端还原设计稿
从设计图截图里取按钮色,复制 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),自动提取主色调色板