超级取色器 - 使用教程
📌 工具简介
超级取色器是一款功能强大的专业在线取色工具，集成了屏幕取色、色值转换、颜色收藏、对比度检测、CSS代码生成等多项实用功能。无论您是前端开发、UI设计还是平面设计，这款工具都能大幅提升您的工作效率。
✨ 核心功能
1. 屏幕取色
点击「屏幕取色」按钮，使用浏览器 EyeDropper API 从屏幕任意位置吸取颜色。支持 Chrome 95+ 和 Edge 95+ 浏览器（需要 HTTPS 环境）。
2. 颜色选择器
点击「调色板」按钮，打开系统原生颜色选择器，自由选择任意颜色。
3. 随机颜色
点击「随机」按钮，一键生成随机颜色，为您提供配色灵感。
4. 图片取色
点击「图片」按钮上传图片，然后在图片上点击任意位置即可取色。这是屏幕取色的完美备选方案。
5. 手动输入
在输入框中直接输入颜色值，支持三种格式：
- HEX格式：如
#FF0000或FF0000 - RGB格式：如
rgb(255, 0, 0) - HSL格式：如
hsl(0, 100%, 50%) - 输入后点击「预览此颜色」即可应用。
6. 色值转换与复制
工具会实时显示当前颜色的 HEX、RGB、HSL 三种格式。点击任意色值即可一键复制到剪贴板。
7. 对比度检测
工具自动计算当前颜色与白色/黑色的对比度，符合 WCAG 无障碍标准：
- ✅ 白色文字清晰：对比度 ≥ 4.5:1
- ⚠️ 白色文字一般：对比度 ≥ 3:1
- ❌ 建议用黑色文字：对比度 < 3:1
预览色块中会实时展示白色和黑色文字的显示效果。
8. 相近颜色推荐
根据当前颜色自动计算并推荐：
- 互补色：色轮对面的颜色，对比强烈
- 类似色：相邻30°的颜色，和谐统一
- 三分色：相隔120°的颜色，丰富有层次
9. 颜色收藏夹
点击历史颜色右下角的 ⭐ 即可收藏。收藏夹独立保存，不受历史记录清空影响。
10. 历史记录
自动保存最近12次取色记录。悬停在色块上可删除单条记录。
11. CSS代码生成
工具会自动生成三种常用的 CSS 代码，点击即可复制：
color: #xxx;background-color: #xxx;border-color: #xxx;
12. 批量导出
点击下载按钮可将历史记录和收藏夹导出为 JSON 文件，方便备份或迁移。
13. 常用色板
内置16种常用颜色，点击即可快速选择。
📖 使用步骤
第一步：获取颜色
您可以通过以下任意方式获取颜色：
- 点击「屏幕取色」从屏幕任意位置取色
- 点击「调色板」使用系统取色器
- 点击「随机」生成随机颜色
- 点击「图片」上传图片取色
- 直接在输入框中输入颜色值
第二步：查看色值
颜色获取后，下方会显示 HEX、RGB、HSL 三种格式的色值，点击即可复制。
第三步：收藏常用色
点击历史颜色右下角的 ⭐ 图标，将颜色保存到收藏夹。
第四步：复制 CSS 代码
在 CSS 代码区域点击任意一行，即可复制对应的 CSS 样式代码。
💡 常见问题
Q: 屏幕取色为什么提示不支持？
A: 屏幕取色需要浏览器支持 EyeDropper API，请使用 Chrome 95+ 或 Edge 95+ 浏览器，并确保网站使用 HTTPS 访问。
Q: 如何在没有 HTTPS 的环境下取色？
A: 您可以使用「图片取色」功能，上传图片后点击取色，这是完美的备选方案。
Q: 收藏的颜色会被清空吗？
A: 不会。收藏夹和历史记录是分开保存的，清空历史不会影响收藏夹。
Q: 支持哪些颜色格式输入？
A: 支持 HEX（#FF0000）、RGB（rgb(255,0,0)）、HSL（hsl(0,100%,50%)）三种格式。
Q: 如何判断文字是否清晰？
A: 查看对比度徽章和预览色块中的文字效果。绿色徽章表示清晰，红色徽章建议更换文字颜色。
🔧 技巧建议
- 将品牌色保存到收藏夹，随时取用
- 使用相近颜色推荐功能快速构建配色方案
- 开发时直接复制 CSS 代码，提高效率
- 定期导出颜色备份，防止数据丢失
