上传图片，悬停/点击/框选取色，手动输入 HEX，一键复制色号。纯前端，开箱即用。
| 模式 | 操作 | 适用场景 |
|---|---|---|
| 点击取色 | 点击图片任意位置（支持采样网格 3×3 / 5×5 / 7×7） | 精确取色 |
| 吸管取色 👑 | 鼠标悬停即自动取色 | 快速浏览多个颜色 |
| 区域取色 | 拖拽框选区域，自动计算平均色 | 渐变色、大面积区域 |
| 手动输入 HEX | 点击 HEX 值行，直接输入 #RRGGBB 回车确认 |
精准输入已知色号 |
按住
Alt可在任意模式下临时切换为吸管模式。
- 亮/暗主题切换：顶部 🌓 按钮一键切换，偏好自动保存
- 全屏画布模式：按
F键隐藏面板，画布最大化
- 三格式并排显示：HEX / RGB / HSL 同时展示，每行右侧独立复制按钮
- HSL + A 滑块微调：取色后拖动 H/S/L/A 滑块微调，色环实时联动
- 颜色名称识别：自动匹配 150+ 常见颜色名称（珊瑚红 Coral 等）
- WCAG 对比度检查：输入另一颜色 HEX，自动计算 AA/AAA 评级
- 色盲模拟器：取色后显示红/绿/蓝色盲三种模拟预览，点击色块复制 HEX
- 图像滤镜：亮度/对比度/饱和度三滑块，实时影响取色结果
- 色彩搭配：互补色、近似色、三角调和三组配色方案，每行一键复制全部色号
- 多图片标签：上传多张图片后通过标签栏切换
- 光标中心缩放：滚轮以鼠标位置为中心缩放
- 拖拽平移：放大后拖拽画布查看细节
- 一键重置：双击画布或按
0键恢复 100% - 右键菜单：快速复制颜色 / 重置缩放 / 提取主色
- 取色记录：最多保存 20 条，悬浮显示色号、取色时间和坐标
- 星标收藏：标记重要颜色，收藏项自动置顶，支持筛选仅看收藏
- 清空全部：仅清除非收藏记录；一键复制全部 HEX 到剪贴板
- 搜索过滤：支持按 HEX / RGB / HSL 格式搜索
- 数据持久化：刷新页面不丢失
- 撤销取色：
Ctrl+Z撤销最近一次取色
| 功能 | 说明 |
|---|---|
| 📦 导出代码 | CSS 变量 / Tailwind v4 / SCSS / JSON / CSV |
| 🖼️ 导出色卡 | 导出为 PNG 色卡图（色块 + HEX 标注） |
| 🔗 分享链接 | 取色记录编码为 URL，一键复制分享 |
| 快捷键 | 功能 |
|---|---|
Ctrl+V |
粘贴图片 |
Ctrl+Z |
撤销取色 |
Ctrl+F |
搜索历史色号 |
Alt |
临时吸管模式 |
+ / - |
放大 / 缩小 |
0 |
重置缩放 100% |
F |
全屏画布模式 |
C |
复制当前色号 |
S |
提取图片主色调 |
双击 |
重置缩放 |
右击 |
快捷菜单 |
Esc |
取消选区 / 关闭弹窗 |
? |
快捷键帮助面板 |
访问 https://yuzhichenai.github.io/color-recognizer/ 即可。
git clone https://github.com/yuzhichenai/color-recognizer.git
cd color-recognizer
open index.html无需安装依赖，浏览器直接打开即可。
| 技术 | 说明 |
|---|---|
| HTML5 | Canvas 2D API 绘制与像素操作 |
| CSS3 | Grid / Flexbox 布局、backdrop-filter 毛玻璃、CSS 变量 |
| JavaScript (ES6+) | ResizeObserver、FileReader、Clipboard API、requestIdleCallback |
| 存储 | localStorage 持久化历史记录与偏好设置 |
| 部署 | GitHub Pages 静态托管 |
零第三方依赖，纯原生实现。
详见 CHANGELOG.md。
最新版本：v1.8.0