首页

屏幕取色工具

从屏幕任意位置吸取颜色，立即获得HEX、RGB、HSL、HSV与CMYK色值。全部处理在浏览器本地完成，不上传屏幕内容；不支持EyeDropper的浏览器也可通过颜色选择器或HEX输入继续使用。

本地处理 即取即用 一键复制

取色与预览

正在检测浏览器
#EF4444
正在检测当前浏览器是否支持屏幕取色。
手动选择或输入颜色

颜色格式

实时转换
HEX #EF4444
RGB rgb(239, 68, 68)
HSL hsl(0, 84%, 60%)
HSV hsv(0, 72%, 94%)
CMYK cmyk(0%, 72%, 72%, 6%)
白色背景对比度 3.76:1
黑色背景对比度 5.58:1

当前颜色更适合搭配深色文字。

最近取色

暂无历史颜色，完成一次屏幕取色或手动应用后会显示在这里。

功能特性

全屏像素取色

通过浏览器原生EyeDropper API，从网页、桌面应用或图片的任意可见位置吸取颜色。

多格式转换

一个颜色同步生成HEX、RGB、HSL、HSV与CMYK格式，减少设计和开发换算步骤。

可靠复制降级

优先使用Clipboard API，浏览器受限时自动回退到传统复制方式，保持操作可用。

本地隐私处理

取色、换算和历史记录均在本地浏览器完成，不向服务器上传截图或色值。

使用说明

使用EyeDropper屏幕取色

  1. 确认页面右上角显示“支持屏幕取色”，然后点击“开始屏幕取色”。
  2. 移动鼠标到屏幕上的目标像素，浏览器会显示放大镜辅助定位。
  3. 单击目标位置完成取色，页面会立即更新颜色预览、格式转换和对比度结果。
  4. 点击任意格式右侧的复制按钮，或使用“复制全部格式”一次获取全部结果。

浏览器不支持时

如果当前环境没有EyeDropper API，主按钮会自动切换为颜色选择器。也可以直接输入3位或6位HEX色值，例如 #F00 或 #EF4444，按回车或点击“应用”完成转换。

适用场景

  • UI与网页开发：快速获取页面组件、设计稿或竞品界面的准确色值。
  • 品牌规范整理：提取Logo、海报和演示文稿中的品牌色并转换为常用格式。
  • 无障碍检查：参考颜色与白色、黑色背景的对比度，辅助选择更清晰的文字配色。
  • 日常办公：无需安装桌面软件，在兼容浏览器中直接完成屏幕取色。

常见问题

为什么浏览器提示不支持屏幕取色？
屏幕取色依赖浏览器的EyeDropper API，并要求页面运行在HTTPS等安全上下文中。建议使用最新版Chrome、Edge或其他兼容浏览器；不支持时仍可使用页面内的颜色选择器或输入HEX色值。
取色时会上传屏幕截图吗？
不会。取色过程由浏览器原生能力在本地完成，本工具只能收到你最终选中的颜色值，不会获取或上传屏幕截图、窗口内容及其他像素数据。
如何复制HEX、RGB或HSL颜色？
完成取色后，点击对应格式右侧的复制图标即可。需要同时粘贴到文档或开发工具时，可点击“复制全部格式”。如果Clipboard API不可用，页面会自动尝试兼容复制方式。
颜色历史会保存多久？
最近使用的颜色保存在当前浏览器的localStorage中，最多保留12个。它不会同步到其他设备；清理浏览器站点数据或点击本页“清空”按钮会删除记录。
对比度数值代表什么？
对比度按WCAG相对亮度公式计算，范围为1:1到21:1。普通正文通常建议至少达到4.5:1，大号文字建议至少达到3:1；实际设计还应结合字号、字重与使用场景判断。