图片取色器

你要的是那个准确的颜色,不是一个"差不多"的颜色

你在重做一套品牌,手头只有一张老 logo。你想让一个按钮跟某个网站的截图对上色。你在照片里看到一个颜色,想用到自己的设计里。这些情况的难处是同一个:眼睛没法从屏幕上读出十六进制色值。你以为的"那个青色",其实是十几个略有差别的青色,显示器还会把它们再往偏里带。你要的是这个像素真正存着的那个数值。

这个工具做的就是这件事。载入一张图,把光标移上去,一个放大镜跟着你走,把光标下的像素放大给你看,你就能精确地落到你想要的那一个上。点一下,这个颜色就存成一个色块。每个色块都列出它的 HEX、RGB 和 HSL,每个数值旁边配一个复制按钮,你就从图里的一个像素,直接到剪贴板里的一段色值。

图片始终不离开你的机器。像素是在浏览器本地、从 canvas 上读出来的——什么都不上传,没有账号,页面加载完之后断网也照样用。当这张"图"是一份还没发布的设计稿、一份客户的品牌素材,或者一张你本不该丢给某个网页工具的内部截图时,这一点就是关键。

实际怎么用

• 放大镜是为了准。 logo 和界面上有硬边,颜色可能在一个像素的宽度里就变了——抗锯齿会让紧挨着的那个像素变成一坨混色。放大后的视图让你在下手前看清自己到底停在哪个像素上,于是你取到的是那块纯正的品牌色,而不是边缘的混色。
• 每次点击都留下一个色块。 取色不是取一次就没了。在图上到处点,每个颜色都会在列表里叠起来,你可以一趟就把一个 logo 的主色、辅色、文字色都取下来,并排比较。
• 三种格式,一次取到。 每个色块同时显示 HEX、RGB、HSL。想换格式不用重新取色——同一个颜色三种写法都已经摆在那儿,各配一个复制按钮。

HEX、RGB、HSL 各在什么时候用

它们是同一个颜色的三种写法,用哪个取决于它要去哪儿。

• HEX(#3A7BD5)是网页上的默认写法——CSS、大多数设计工具、品牌文档都认。短,哪儿都能粘。没有特别理由就复制它。
• RGB(rgb(58, 123, 213))把红、绿、蓝三个通道的值写清楚。当某个工具要通道值、当你需要加透明度(rgba)、或者你在琢磨一个颜色是怎么混出来的时候,用它。
• HSL(hsl(215, 65%, 53%))描述的是色相、饱和度、明度。当你想调整一个颜色而不只是照搬时,就该用它——把明度提一点做 hover 态、把饱和度压低做一个柔和的变体、保持色相去推出一整条色阶。

一个要说清楚的限制,以及一个姊妹工具

这是个点取样工具:每次点击读的是单个像素。在干净的 logo 或纯色界面上,这正是你要的。但在有噪点、渐变、JPEG 压缩痕迹的照片上,相邻两个像素可能就不一样,所以要在纯色区域里取,并借放大镜避开个别偏差的像素。这里没有"取一片区域求平均"的画笔。

如果你根本不想一个个手动挑,img.diy 上还有一个单独的调色板工具,它会扫描整张图、自动把主要颜色交给你。两者回答的是不同的问题。调色板工具告诉你这张图由哪些颜色构成;而取色器让你指向某个具体的像素——logo 上这个确切的点、那一个按钮——取它的值。想概括一张图,用调色板工具;已经知道自己要哪个点,用这个。

载入一张图,悬停找到像素,点击留下它,复制你要的那种格式。