你看到一个想复用的颜色——在一张照片里、在你喜欢的某个网站截图里、在一个源文件早就丢了的老 logo 里——你需要的是真实的十六进制色值，而不是靠猜。用眼睛估从来都不太准；显示器会骗人，"那个蓝"其实是六种略有差别的蓝。直接从像素里把配色抠出来，你拿到的色值可以直接粘进 CSS、设计工具或品牌文档。
下面讲怎么做，以及怎么得到一份真正能用的配色，而不是随手抓一把像素。
"提取配色"到底做了什么
工具会扫描图片，找出最能代表它的颜色——主色调加上显眼的点缀色——再把每一个给你，作为可复制的十六进制码。你拿到的不是上百万个单独的像素色，而是一组整齐的集合（比如 5 个或 8 个），概括了这张图。
它对几个常见活儿是真有用的：
- 在没有原始规范时，从 logo 或老素材里找回品牌色。
- 从一张你想匹配其氛围的照片里搭一份设计配色——风景、产品图、一幅画。
- 匹配一个已有网站或图形，而你手头只有一张截图。
- 为你正在用的某张图挑一个协调的背景或点缀色。
丢一张图进去，把色值读出来：
用数量控制拿到有用的配色
最重要的一个设置，是你抠出多少个颜色。它会彻底改变结果。
- 少一点（3–5 个）给你的是核心配色——定义这张图的那几种色调。这通常正是品牌或设计系统想要的，一个精简的集合是优点，不是局限。
- 多一点（8–12 个）能捕捉细微的点缀色和渐变。当图片丰富多变、你也想要次要色调时有用，或者当你要研究一张照片究竟怎么构成时。
如果第一次的结果感觉不对——某个色调压了全场，或你想要的点缀色被合并掉了——调一下数量再读。一张 80% 是天空的照片，在低数量下会给你一大堆蓝；把数量往上加，才能让那些小面积的亮色冒出来。
点击复制——真正重要的工作流
读一个十六进制码再手打出来，是错误钻空子的地方（#3A7BD5 和 #3A7BD6，你花十分钟纳闷它为什么看着不对）。在配色工具里，每个色块点一下就复制它的十六进制码，你从图片到剪贴板到样式表，一路不用碰键盘。
一个实用流程：
- 载入图片。
- 把数量设成匹配活儿——品牌配色调低，抓点缀色调高。
- 点你要的每个色块；粘到它要去的地方。
- 色域不够？微调数量，把多的抓出来。
用设计的眼光读结果
有几件事值得知道，好让配色落得稳：
- 主色不一定是有用的那个。 白底上的产品图会报出一大堆白或接近白。这没错，但你真正在意的颜色是产品——把数量往高调把它抠出来，或者先裁到主体。
- 照片的颜色比看上去多。 皮肤、阴影、反光都会加进你没自觉注意到的色调。高数量把它们揭出来；低数量把它们藏进平均值里。
- 十六进制是通用的。 你复制的每个码都能直接用在 CSS、Figma、Photoshop、Canva 或品牌文档里，无需转换。
为什么它留在你的浏览器里
整个提取在本地运行——图片用 Canvas 在你的浏览器里读取和分析，从不上传到服务器。当这张"图"是一份没发布的样稿、客户的私密品牌素材，或一张不该发到随便某个网页工具上的内部截图时，这一点很重要。它免费、无需注册，第一次访问后也能离线用。
抓颜色、点击复制、粘到它该去的地方。