屏幕颜色拾取

快速入门

从屏幕拾取颜色很简单：

基本使用

1. 点击拾取颜色：点击"拾取颜色"按钮激活吸管工具。
2. 选择颜色：将光标移动到屏幕上的任何颜色上并点击选择。
3. 查看格式：即时查看HEX、RGB、HSL和HSV格式的颜色。
4. 复制代码：点击任何格式将颜色代码复制到剪贴板。
5. 保存到调色板：将颜色添加到调色板以供以后使用。

颜色格式

• HEX：#RRGGBB格式 - 网页设计最常用（例如：#FF5733）
• RGB：红、绿、蓝值0-255（例如：rgb(255, 87, 51)）
• RGBA：带Alpha透明度的RGB（例如：rgba(255, 87, 51, 1)）
• HSL：色相、饱和度、亮度（例如：hsl(9, 100%, 60%)）
• HSLA：带Alpha透明度的HSL（例如：hsla(9, 100%, 60%, 1)）
• HSV：色相、饱和度、明度（例如：hsv(9, 80%, 100%)）

核心功能

• 吸管工具：从屏幕任意位置拾取颜色
• 多种格式：获取HEX、RGB、HSL和HSV格式的颜色代码
• 一键复制：即时将任何颜色格式复制到剪贴板
• 颜色历史：跟踪最近拾取的颜色
• 调色板：保存和组织您喜欢的颜色
• 颜色预览：所选颜色的大型预览
• 对比度检查器：检查WCAG无障碍对比度
• 颜色变化：生成更浅和更深的色调
• 互补色：查找匹配的配色方案
• 导出调色板：将调色板导出为JSON或CSS

浏览器兼容性

EyeDropper API支持：

• Chrome/Edge 95+
• Opera 81+
• Safari 17+（macOS）

如果您的浏览器不支持EyeDropper API，您仍然可以使用手动颜色输入功能。

最佳实践

• CSS和网页设计使用HEX格式
• JavaScript和动态颜色使用RGB/RGBA
• 更容易的颜色操作和变化使用HSL
• 检查对比度以符合无障碍标准
• 将常用颜色保存到调色板
• 导出调色板以进行团队协作
• 使用颜色变化创建一致的设计系统

使用场景

• 网页设计：从网站和设计中提取颜色
• UI/UX设计：创建一致的配色方案
• 品牌识别：匹配精确的品牌颜色
• 数字艺术：从参考图像中采样颜色
• 前端开发：获取CSS的精确颜色代码
• 平面设计：颜色匹配和调色板创建
• 无障碍测试：检查颜色对比度
• 颜色灵感：从图像构建调色板

无障碍

为文本和背景选择颜色时，确保足够的对比度：

• WCAG AA：普通文本最小对比度为4.5:1
• WCAG AAA：普通文本增强对比度为7:1
• 大文本：18pt+或14pt+粗体文本为3:1