图片取色器

图片取色器使用指南

📌 简介

图片取色器是一款面向设计师和前端开发者的在线工具，可以从上传的图片中精确拾取任意位置的颜色，并自动生成该图片的主色板。取到的颜色以 HEX 和 RGB 两种格式展示，点击即可复制到剪贴板。常用于提取设计稿主色、分析竞品配色、生成品牌色板等场景。所有处理在浏览器本地完成。

📖 图片取色的原理

图片在浏览器中通过 Canvas API 加载后，每个像素的颜色值（RGBA）都可以被读取。取色时，鼠标点击的位置映射到 Canvas 坐标系，然后通过 getImageData() 读取该像素的颜色数据，转换为 HEX 或 RGB 格式显示。主色板生成则使用颜色量化算法，将相似的颜色分组并统计出现频率，提取出最具代表性的几个颜色。

💼 常见应用场景

• 设计取色： 从设计稿截图中提取品牌色和强调色。
• 前端开发： 从参考图获取精确的色值，用于 CSS 配色。
• 配色参考： 分析优秀作品的配色方案，用于自己的设计。
• 品牌识别： 从 Logo 图片中提取企业标准色。

⚙️ 使用步骤

1. 点击上传区域或拖拽图片文件。
2. 图片加载后，鼠标移到预览图上会显示十字光标。
3. 点击任意位置拾取颜色，左侧显示该颜色的 HEX 和 RGB 值。
4. 点击 HEX 或 RGB 值可快速复制。
5. 右侧底部的色板显示自动提取的 10 个主色，点击色块也可复制其 HEX 值。

⚠️ 注意事项

• 图片会等比缩放到适合显示的大小，取色精度可能与原图略有差异。
• 建议使用 PNG 或高质量 JPG 图片，避免压缩造成的颜色偏差。
• 自动提取的主色采用量化算法，仅供参考。如果需要精确的色值请手动取色。

❓ 常见问题 (FAQ)