📖 工具说明
1. 为什么需要在线取色工具？
在视觉创作过程中，准确获取目标色值是实现高质量输出的第一步：
- 设计还原： 完美克隆优秀案例的配色方案，解决“肉眼看有偏差”的难题。
- 开发协同： 前端工程师可快速从视觉稿中提取 HEX 或 RGB 代码，提升编码效率。
- 色彩统一： 确保品牌 Logo、网页按钮与海报文案的色彩高度一致，维护视觉规范。
- 跨行业应用： 无论是室内设计选色、绘画调色还是网购色差比对，都能提供数字化参考。
2. 核心功能解析
本站 取色工具通过 HTML5 高性能画布技术，为您提供极致的色彩分析体验：
A. 像素级精准定位
- 局部放大镜： 取色时自动开启悬浮放大窗口，让您可以精准锁定每一个细微像素点。
- 实时预览： 鼠标滑动处即刻显示颜色预览图，所见即所得。
B. 四种格式
- HEX、RGB、HSL、CMYK 四种写法同时给出，各有一个复制按钮。
- 取色时鼠标移到哪就实时显示哪个点的颜色和坐标，点一下自动复制 Hex。
C. 主色板 + 配色建议
- 主色板：用**中位切分（median cut）**算法从整张图提取 5 / 8 / 12 / 16 个代表色，按占比排序，可复制、导出 JSON / PNG。
- 配色建议：取到一个颜色后，自动给出它的一排明暗变化，以及互补色、邻近色，点色块即可切换为当前颜色。
- 另给整张图的平均色。
D. 本地处理
- 图片只在你的浏览器里处理，不上传。加载 URL 图片需要对方站点允许跨域，否则请下载后本地上传。
3. 多元化应用场景
| 领域 |
典型场景 |
| 网页/UI设计 |
快速提取素材图中的品牌主色，生成 CSS 样式代码。 |
| 室内装饰 |
拍下心仪家具或墙纸的照片，提取色值用于选购乳胶漆或软装。 |
| 艺术创作 |
分析名画的色彩分布，学习大师的配色逻辑，作为绘画参考。 |
| 电子商务 |
提取实拍图与官方图的色值进行数据比对，减少网购退货风险。 |
| 日常办公 |
在制作 PPT 时，提取公司 Logo 的准确颜色，保持演示文稿专业度。 |
4. 常见问题解答 (FAQ)
Q：为什么我识别出的 HEX 代码和手机上看到的不一样？
A： 这可能与显示器的色域（如 $sRGB$ vs $P3$）或屏幕亮度设置有关。建议在标准显色模式下进行取色。
Q：支持哪些图片格式？
A： 支持常见的 $JPG、PNG、WebP$ 及 $GIF$ 等主流格式。
Q：取色后能保存色板吗？
A： 点「提取」生成主色板后，可「JSON」导出色值数组，或「PNG」导出一张带 Hex 和占比的色卡图。单个颜色点复制按钮即可。
Q：加载 URL 图片总是失败？
A： 多数网站的图片不允许被其他网页跨域读取像素。把图片下载到本地，再用「选择文件」或直接粘贴 / 拖拽上传就行。
5. 说明
- 纯网页端，Windows / Mac / 手机浏览器都能用，图片不上传。
- 显示的色值和你在别的设备上看到的观感可能有差异，这和显示器色域（sRGB / P3）、亮度、色彩管理有关，色值本身是准的。
相关：颜色选择 / 转换 · 色觉测试 · CSS 效果 · 图片压缩 · 图片工具箱。
色值为屏幕 RGB 数值，用于印刷请以专业色彩管理和打样为准。