如何在 Chrome 里从任意网页取色

你需要一个按钮、一个 logo、一个渐变色标的准确颜色。截图丢进设计工具那条路要花好几分钟;DevTools 有吸管,但它埋在某个 CSS 属性输入框里,还默认你要的颜色属于某个能被选中的元素。Screen Ruler 的取色放大镜跳过这两段弯路:在页面上点击图标,按 4,直接拾取那个像素。

下手之前先放大

放大镜会随光标移动放大周围的像素。这比听起来重要得多:你要的颜色常常只有一个像素宽——一条发丝般的边框、图标的边缘、渐变中的一个色标——而它周围全是抗锯齿的混合色。有了放大视图,你拾取的是你真正想要的那个像素,而不是差着三个色阶的邻居。

页面上渲染出来的都能取

因为放大镜读的是渲染后的像素而不是样式表规则,它不限于有 background-color 的元素。照片、渐变、canvas 图表、SVG 图标、文字字形——只要画在页面上,就能取。而这恰恰是“检查元素然后读 CSS”束手无策的地带。

以 HEX、RGB 或 HSL 复制

点击一下,色值就在剪贴板里。默认是 HEX;设置页可以把复制格式切成 RGB 或 HSL,匹配你代码库的习惯。如果你经常取色,同一个设置页还能把取色放大镜设为启动默认模式,点一下图标、一次悬停就拿到色值。

你取到的是什么,说清楚

放大镜报告的是浏览器实际画出的颜色——不透明度、遮罩和混合都已生效。这通常正是你要的,因为这是用户看到的颜色。但这意味着取到的值可能和样式表里的 token 不同:压着 90% 白色遮罩的品牌色,取出来是混合后的结果,不是那个 token。如果你要的是源码里的变量,DevTools 才是对的工具;放大镜告诉你的是屏幕上的真相。

本地,而且只在你要求的地方

Screen Ruler 没有 host 权限——覆盖层只在你点击图标时经 activeTab 注入——也不发任何网络请求,取到的颜色绝不会离开你的机器。作为页面覆盖层的另一面:它取不了浏览器自身工具栏或其他应用程序的颜色。但对任何渲染在网页里的东西,它都是最短路径,用完按 Esc 即可移除。