CSS
前端开发
无需打开 DevTools，就能从在线网站取得精确值，用于 CSS、SCSS 或 Tailwind 配置。
Chrome 免费取色器
从任意网页取色，得到 #E8553D
简易取色器是 Chrome 的免费吸管工具。点击它的按钮或按 Alt+P，用放大镜对准任意像素并点击：HEX、RGB 或 HSL 代码已在剪贴板里。最近 50 个颜色就放在弹窗中。
Chrome Web Store 上有 453 位用户
也可在 Edge、Brave、Opera 和其他 Chromium 浏览器中使用。
概览
- 功能
- 取色器吸管：用放大镜对准网页上的任意像素并点击，就会复制它的 HEX、RGB 或 HSL 代码。
- 适合谁
- 需要从在线网站、设计稿和浏览器中打开的截图里匹配颜色的网页开发者和设计师，以及任何需要颜色代码的人。
- 价格
- 免费。无需账号，没有付费版。
- 数据
- 历史记录和默认格式保存在你设备上扩展程序的本地存储中。无统计分析，无网络请求。
- 适用环境
- 电脑上的 Chrome 和其他可从 Chrome Web Store 安装扩展程序的 Chromium 浏览器。不适用于新标签页、设置和 Chrome Web Store 等浏览器页面。
- 限制
- 只能从标签页的可见部分取色，使用你启动时截取的快照。不支持 CMYK、Pantone 和对比度检查，也不能在浏览器之外取色。
- 版本
- 2.7.0，更新于 2026年10月23日
三步，一次点击
- 1
启动取色器
点击工具栏图标并按“选取颜色”，或在任意页面按 Alt+P。
- 2
用放大镜瞄准
方形放大镜放大光标周围的区域，并框住准确的像素。下方的标签实时显示 HEX、RGB 和 HSL。
- 3
点击并粘贴
代码按默认格式复制，并弹出简短提示确认。粘贴到 CSS、Figma 或消息里即可。
谁在用
HEX
设计与品牌核对
从界面、设计稿或参考图中取色板，并核对页面用的是不是正确的品牌色。
HSL
调整颜色
取 HSL 手动调整明度和饱和度，或取 RGB 用于需要数值的代码。
功能
像素，精确框选
放大镜放大光标周围 11 × 11 像素，准星框住你将取的那一个。能点中一像素宽的边框，或渐变中的某一级。
种格式
HEX 如 #2A6FDB，RGB 如 rgb(42, 111, 219)，HSL 如 hsl(217, 71%, 51%)。在弹窗里设置一次默认格式。
个历史颜色
每次取色都会排到最近 50 个颜色网格的最前面，不重复。点击一个色块，即可查看并复制全部三种代码。
快捷键 Alt+P
无需打开弹窗即可开始取色。想换键的话，点击弹窗里的键帽，会打开 Chrome 的快捷键设置。
次网络请求
一切都在你的浏览器里运行。无账号，无统计分析，无遥测。
浅色和深色
弹窗和放大镜跟随系统主题，使用中性灰，不会干扰你判断的颜色。
如何获取网页上任何内容的颜色代码
Chrome 自带的吸管藏在 DevTools 里：打开“样式”面板，找到一个颜色属性，点击它的色块，再点吸管。能用，但藏得深，而且取到的值会替换页面 CSS 中的那个属性，而不是进入你的剪贴板。
简易取色器让吸管只差一次点击或一个快捷键。启动时，它会截取标签页的可见部分，并在上面打开一个方形放大镜，所以你看到的是准确的像素，而不是平均色。点击一次即可复制代码，弹窗会把它和最近 50 个颜色一起保存，三种格式都有。
开始前先滚动到需要的位置：放大镜读取的是那张快照。新标签页、设置和 Chrome Web Store 等浏览器页面对所有扩展程序都是关闭的。
默认保护隐私
无网络请求
扩展程序从不与服务器通信。无统计分析，无遥测。
留在你的设备上
历史记录和默认格式保存在扩展程序的本地存储中。
四项权限
当前标签页，仅在你开始取色时用于截取快照；脚本注入，用于显示放大镜；存储，用于历史记录和格式；写入剪贴板，用于复制代码。
DevTools 吸管与简易取色器
| DevTools 吸管与简易取色器 | DevTools 吸管 | 简易取色器 |
|---|---|---|
| 如何启动 | 打开 DevTools，在“样式”里找到颜色，点击它的色块，再点吸管 | 工具栏按钮或 Alt+P |
| 结果去向 | 你打开的那个 CSS 属性；需要自己复制 | 点击后直接进入剪贴板 |
| 颜色格式 | HEX、RGB、HSL 等 | HEX、RGB 和 HSL |
| 之前取的颜色 | 不保存 | 最近 50 个，可再次复制 |
| 价格 | Chrome 内置 | 免费 |
常见问题
如何获取网站上的颜色代码？
安装简易取色器，在页面上按 Alt+P，用放大镜对准颜色并点击。HEX 代码（或你喜欢的 RGB、HSL）会复制到剪贴板。
如何从网页上的图片取色？
方法相同：启动取色器，点击图片中想要的像素。放大镜会放大画面，所以能取到准确的一个像素。
可以复制 HSL 或 RGB 而不是 HEX 吗？
可以。在弹窗里选择默认格式：HEX、RGB 或 HSL。弹窗也会为历史中的每个颜色显示全部三种代码，每种都有自己的复制按钮。
之前取的颜色在哪里找？
打开弹窗：最近 50 个颜色以色块形式排列，最新的在前。点击一个即可查看并复制它的代码，也可以清除历史记录。
如何更改 Alt+P 快捷键？
点击弹窗里的快捷键键帽。会打开 Chrome 的键盘快捷键页面，你可以在那里设置其他按键。
为什么在某些页面上不能用？
Chrome 对所有扩展程序关闭了自己的页面，例如新标签页、设置和 Chrome Web Store。取色器也只读取标签页的可见部分，所以请先滚动到要取的颜色。
能在浏览器之外取色吗？
不能。它只能从当前浏览器标签页取色。它也不转换为 CMYK 或 Pantone，不检查对比度。
免费吗？会收集数据吗？
免费，且不发出网络请求。历史记录和默认格式保留在你的设备上。
