很多时候你手头只有一张截图。你打不开那个网站的 CSS,检查不了那个 App,也没有设计源文件——但屏幕上的颜色你看得见,而截图把它们冻成了一张可以取样的图。下面讲怎么从里面取出准确的颜色码。
为什么截图是诚实的来源
当你对渲染好的页面或 App 截图时,你抓到的是颜色实际显示出来的样子——每一层渐变、叠加、透明度都已经作用完毕。这往往比源码里的值更真实。一张卡片,源码写的是 #000000 叠在灰底上、90% 不透明度,它在屏幕上并不是黑的,而是某个具体的深灰。看源码给你的是配方;对截图取样给你的是用户真正看到的颜色。当你要还原那个观感时,该读的就是截图。
三步取一个颜色
- 截图并载入。 把屏幕(或你关心的那块区域)截下来,把图放进取色器。
- 悬停到像素上。 一个放大镜跟着光标走,把下面的区域放大,于是你能精确落点——哪怕是一条细边框或一个小图标。
- 点击保存,再复制。 每次点击都把颜色留成一个色块,带 HEX、RGB、HSL,各配复制按钮。复制你需要的那种格式,粘进样式表或设计工具。
截图特有的几个注意点
截图有些小毛病会带偏取样,知道了就很好躲:
- 存成 PNG,别用 JPEG。 JPEG 压缩会把颜色略微抹开,尤其在边缘和纯色区,取到的值会跟真实值有偏差。PNG 是无损的,每个像素都准——大多数系统截图工具本来就默认存 PNG。
- 留意缩放比例。 在浏览器或系统缩放不是 100% 时截的图是被缩放过的,而缩放会把相邻像素混在一起。想取得最干净,就在 100% 下截。
- 避开边缘和文字。 抗锯齿意味着任何边缘上的像素都是混色,不是真实颜色。要在纯色区中间取样——放大镜能帮你看清自己已经离开了那圈模糊的边界。
- 当心文字的次像素颜色。 把渲染的文字放大,你会看到一圈不属于文字本色的彩边。要从填充和背景取色,别从笔画上取。
读 HEX、RGB 和 HSL
每个色块同时显示三种格式:
- HEX(
#3A7BD5)——CSS 和设计工具的默认。 - RGB(
rgb(58, 123, 213))——通道值,需要rgba透明度时顺手。 - HSL(
hsl(215, 65%, 53%))——色相、饱和度、明度,想微调颜色而不是照搬时最好用。
换格式不用重新取样——同一个颜色三种早就都在那儿了。
一趟取下整套配色
从一张截图,你能把整套配色重建出来:点标题色、按钮、链接、背景、灰字。每个都叠进列表,你可以一次会话里把整套取齐,再按顺序复制。
如果你要的反而是让工具帮你概括整张图的调色板——那几个主色调——那是另一件事,img.diy 的调色板工具会自动提取。这个取色器是用来指向截图里某个具体像素的;调色板工具是用来概括整张图的。
什么都不离开你的机器
截图里常有你不太想上传的东西——一块内部看板、一份私密草稿、客户还没发布的界面。在这里,图片是在你浏览器本地、从 canvas 上读的:什么都不往外发,没有账号,首次加载后离线也能用。你取到了颜色,而截图从没离开过你的设备。
截图,悬停到像素,点击,复制。