屏幕颜色拾取器

屏幕颜色拾取器 — 快速获取任意颜色的色值

屏幕颜色拾取器是一款运行在浏览器中的在线取色工具，借助现代浏览器内置的 EyeDropper API，用户只需点击一个按钮，即可将鼠标悬停到屏幕上的任意位置进行取色。拾取完成后，工具会自动将颜色转换为设计与开发中最常用的五种格式：HEX、RGB、HSL、HSV 和 CMYK，每种格式均支持一键复制，极大提升工作效率。

核心功能

• 屏幕任意位置取色：支持从网页、图片、视频截图、软件界面等任意屏幕区域拾取颜色，无需截图再导入第三方软件。
• 多格式色值输出：自动输出 HEX（十六进制）、RGB、HSL、HSV、CMYK 五种主流颜色格式，覆盖网页开发、平面设计、印刷等不同场景需求。
• HEX 大小写切换：HEX 字段支持一键转换大写或小写，满足不同代码规范的格式要求。
• 历史记录：自动保留最近 12 次拾取的颜色，点击历史色板即可快速切换查看，方便颜色对比与复用。
• 实时预览：取色后顶部色块实时更新，棋盘格背景准确模拟颜色的视觉效果。
• 一键复制：每种格式右侧均有复制按钮，点击即复制到剪贴板，直接粘贴进代码或设计工具。

适用场景

• UI/UX 设计师：看到喜欢的配色方案时，无需截图，直接在浏览器中吸取色值，快速应用到设计稿。
• 前端开发者：快速获取页面或参考图的精确颜色，复制 HEX 或 RGB 值直接用于 CSS 样式。
• 平面设计师：获取 CMYK 色值，用于印刷品的颜色核对与调整。
• 品牌与运营人员：精准提取品牌色、竞品色板，保持视觉一致性。

如何使用

1. 点击页面中的「拾取屏幕颜色」按钮，浏览器将进入取色模式，鼠标变为放大镜光标。
2. 将鼠标移动到屏幕上任意位置，可实时预览当前颜色。
3. 点击目标颜色，工具自动完成拾取并填充所有格式字段。
4. 在右栏找到需要的颜色格式，点击右侧复制按钮即可使用。
5. 历史记录色板会保留本次会话的拾取记录，方便对比。

颜色格式说明

• HEX（十六进制）：如 #16baaa，是网页开发中最常用的颜色表示方式，CSS、HTML、设计工具均广泛支持。
• RGB：如 rgb(22, 186, 170)，表示红、绿、蓝三通道的强度值（0–255），适用于屏幕显示场景。
• HSL：如 hsl(175, 79%, 41%)，以色相、饱和度、亮度描述颜色，更符合人类对颜色的直觉认知，便于手动调色。
• HSV：如 hsv(175, 88%, 73%)，与 HSL 类似但亮度定义不同，常见于 Photoshop 等专业设计软件的拾色器。
• CMYK：如 cmyk(88, 0, 9, 27)，用于描述印刷四色（青、品、黄、黑）的混合比例，是印刷行业的标准颜色模型。

常见问题（FAQ）

Q：为什么点击按钮没有反应，或按钮显示为灰色？
A：屏幕取色功能依赖浏览器内置的 EyeDropper API，目前仅 Chrome 95+、Edge 95+ 及基于 Chromium 的浏览器支持。Safari 和 Firefox 暂不支持此功能，请更换浏览器使用。

Q：拾取的颜色为什么没有透明度通道？
A：EyeDropper API 的设计规范不返回透明度信息，所有拾取的颜色 Alpha 值固定为 1（完全不透明），这是浏览器层面的限制。

Q：历史记录会保存到下次打开吗？
A：会。工具通过浏览器本地存储（localStorage）自动保存最近 12 次拾取的颜色，下次打开页面时历史记录会自动恢复。隐私模式下不会保存。

Q：能拾取浏览器之外（如桌面应用）的颜色吗？
A：可以。EyeDropper API 支持跨窗口取色，点击拾取按钮后移动鼠标到桌面任意位置均可拾取，不限于浏览器内部。