你有一张图,想从里面取出一个数值:某个具体颜色的 hex 色码。也许是一张品牌规范早就找不着的 logo,也许是一张网站截图、你想对上它那个蓝,也许是一张照片里有个你想复用的颜色。凭感觉打出你以为的颜色是行不通的——眼睛没法从屏幕上读出 #3A7BD5,看着对的那个颜色往往差几位数。下面讲怎么直接从像素里读出真实的值。
为什么靠猜总是差一点
屏幕上一个"蓝",其实是一堆几乎一样的蓝铺开的,而显示器的亮度和校准还会把它们再往偏里带。靠眼睛挑,你会落得很近但不对——近到那点色差既恼人又不明显,于是你花十分钟纳闷按钮怎么跟标题对不上。解法就是别再猜,读出像素真正存着的那个数。
三步取到色码
可靠的办法是用取色器直接对像素取样。
- 载入图片。 把你要取色的 logo、截图或照片放进去。
- 悬停到那个确切的像素。 一个放大镜跟着光标走,把下面的区域放大,于是在硬边上你能看清哪个像素是纯正的品牌色,哪个是两色抗锯齿后的混色。
- 点击保存,再复制。 每次点击都把颜色留成一个色块,显示它的 HEX、RGB 和 HSL,各配一个复制按钮。点 HEX,它就进了剪贴板。
落在对的像素上
放大镜比听起来重要。当一个颜色跟另一个相接时——文字压在背景上、图标的边缘——中间这些像素是抗锯齿的:两色平滑过渡出来的混色,哪个都不是。在那儿取样,你会得到一个跟谁都对不上的浑浊值。要瞄准形状内侧几像素处的纯色区,那里颜色是实的,放大视图让你在点击前确认自己确实停在上面。
在干净的 logo 或纯色界面上,这很容易——颜色在一大片区域里是均匀的。在照片上就得多留心,因为噪点和压缩会让相邻像素真的不一样。挑一块平静、受光均匀的区域,多取两次看看是否一致。
HEX、RGB 还是 HSL——按需取用
每个色块同时给你三种,你要哪个就复制哪个:
- HEX(
#3A7BD5)——网页默认。CSS、Figma、Canva、品牌文档都认。没特别理由就用它。 - RGB(
rgb(58, 123, 213))——通道值,当某个工具要它、或你要用rgba加透明度时有用。 - HSL(
hsl(215, 65%, 53%))——色相、饱和度、明度。想调整颜色时最好用:提亮做 hover 态、压暗做一个变体、或从它推出一整条色阶。
因为每个色块三种都带着,你永远不用为了换格式重新取一次色。
一次取好几个颜色
一个 logo 很少只有一种颜色。一趟就把主色、辅色、文字色都点下来——每个都叠进列表,你能对比、能一个接一个复制,而不用把图重新载入三遍。
如果你要的是整张图的颜色概览、而不是具体像素——一张照片是由哪些颜色构成的——那是另一件事,img.diy 上单独有个调色板工具会自动帮你提取主色。知道自己要哪个确切的点,用这个取色器;想让工具帮你概括整张图,用调色板工具。
一切留在你的设备上
图片是在你浏览器本地、从 canvas 上读的——什么都不上传,不用注册,首次加载后断网也能用。所以一份还没发布的设计稿、或客户的私密素材,不会仅仅因为你要取一个 hex 色码就离开你的机器。
载入图片,悬停到像素,点击,复制色码。