如何使用
- 点击“选择图片”、拖入图片，或直接按 Ctrl+V / Cmd+V 粘贴截图。
- 在图片上移动鼠标或手指，查看实时 HEX、RGB、HSL 颜色值和放大镜预览。
- 点击想保留的位置，颜色会进入取色历史。
- 点击“提取主色调”，生成图片调色板，并复制需要的色值。
示例场景：把产品截图粘贴进工具，吸取按钮主色，复制 HEX 到 CSS 或设计稿中。
核心功能
- 本地图片取色：图片只在浏览器 Canvas 中渲染和读取像素，不会上传到服务器。
- 像素级 HEX/RGB/HSL：移动鼠标或拖动手指，即时查看当前像素的 HEX、RGB 和 HSL 颜色值。
- 放大镜准星辅助：局部放大预览帮助你对准图标边缘、UI 截图细节和细小色块。
- 图片调色板生成：在浏览器内统计图片像素，提取最多 5 个适合设计参考的主色调。
- 点击保存与复制：点击图片保存取色历史，点击色块即可复制颜色代码。
相关工具
在 HEX、RGB、HSL、CMYK 之间实时转换颜色，并自动计算 WCAG 无障碍对比度（AA/AAA）。支持印刷用 CMYK 百分比与可视化预览。全程本地处理不上传。
生成用于设计与前端开发的 Lorem Ipsum 假文，支持纯文本、HTML <p> 标签与 JSON 数组输出。可变长度（段落/句子/单词），并支持中文假文。全程本地生成不上传。
快速计算长宽比与缺失尺寸（输入宽得高/输入高得宽），内置 TikTok 9:16、YouTube 16:9、Instagram 4:5 等预设，并自动生成 aspect-ratio CSS 代码。全程本地运行不上传。
计算逻辑
本工具使用 HTML5 Canvas 在浏览器本地解码图片，并通过 getImageData 读取取色坐标处的 RGBA 像素值。HEX、RGB 和 HSL 都由这个像素值即时换算得到。
主色调提取会按一定步长采样 Canvas 像素，将相近颜色归入同一色桶，再按出现次数排序输出前 5 个颜色。这个结果适合快速生成网页和设计参考色板，但不承诺还原专业摄影工作流中的 ICC / P3 绝对色彩管理。
常见问题
图片会上传到服务器吗？
不会。图片读取、取色、放大镜预览和调色板生成都在你的浏览器本地完成。
如何从图片中获取 HEX 颜色？
选择或粘贴图片后，把鼠标或手指移动到目标位置，当前颜色会实时显示。点击图片即可把颜色保存到历史记录，再点击色块复制 HEX。
支持哪些颜色格式？
工具显示并复制 HEX、RGB 和 HSL，覆盖网页设计和前端开发最常用的颜色格式。
为什么和 Photoshop 里的颜色可能有差异？
浏览器 Canvas 读取的是图片在浏览器中实际渲染后的像素。不同浏览器、显示器色域和图片内嵌色彩配置文件可能造成轻微差异。
手机上可以取色吗？
可以。在移动设备上，你可以用手指在图片上拖动准星，松开或点击即可锁定颜色。