关于 图片取色器
从一张图片里取色是设计师与前端开发者的日常需求：还原设计稿的品牌色、采集照片中的渐变参考、为 UI 组件挑选配套强调色。本工具把图片取色做成了浏览器内的吸管：上传或拖入图片后，鼠标在画面上移动即可实时预览光标所在像素的 HEX、RGB、HSL 值，配合 5×5 放大镜网格精准定位单个像素，点击即锁定颜色并自动加入历史记录（最多 12 条）。建议把它与「颜色转换器」「配色生成器」搭配使用，取色后直接转换格式或推导配色方案，它适合从设计稿或照片采集品牌色与渐变参考，取色后可直接与“颜色转换器”“配色生成器”联动，完成取色、格式转换到方案推导的闭环。例如在取色器中选中 #2DD4BF 会同步给出 rgb(45, 212, 191) 与 hsl(167, 65%, 50%)，可直接复制任意格式。
使用方法
- 打开「图片取色器」
- 上传图片文件
- 根据需要调整输出选项
- 点击「处理」按钮，结果实时显示
- 复制或导出结果
使用场景
- 设计稿取色 — 上传视觉稿截图，用吸管精确点取品牌主色、辅助色与文字色，复制 HEX 直接写入 CSS 变量。
- 照片配色提取 — 从摄影作品或插画中采样主色调，为海报、Banner 或数据可视化挑选和谐的色彩组合。
- UI 还原核对 — 对比还原页面与设计稿的同位置像素色值，快速发现色差并修正 CSS，提升视觉还原度。
- 渐变采样 — 沿渐变方向多点取色，记录每个停止点的色值，用于在 CSS gradient 中复刻相同的色彩过渡。
- 无障碍对比 — 提取前景与背景色后，配合对比度计算判断文字可读性，确保配色符合 WCAG 可访问性标准。
常见问题
取色准确吗？
准确。工具从图片原始像素读取 RGB 值，不经过压缩或缩放重采样，保证与原图逐像素一致。
支持哪些图片格式？
支持 PNG、JPEG、WebP、GIF、BMP 与 SVG。SVG 会按其内在尺寸栅格化后取色。
图片会上传到服务器吗？
不会。所有图片在浏览器本地用 Canvas 解析与读取，不发生任何网络请求，可放心处理敏感截图。
放大镜里的方块是什么？
5×5 网格展示光标周围 25 个像素的放大效果，中心格即当前取色像素，方便在密集区域精准定位。
历史记录能保留多少条？
最多 12 条，新取色会自动置顶并去重，点击任一历史色块即可复制其 HEX 值。
广告