如何从任意图片里提取配色方案
2026-06-25
有些最棒的配色方案早就存在了——在一张日落照片里、一帧电影画面里、一个品牌 logo 里、一张你喜欢的设计截图里。与其去猜 HEX 值，你完全可以直接从图片里把颜色取出来。下面说说怎么做，以及如何把它们变成能用在你的 CSS 或设计工具里的数值。
为什么要从图片里取色
从零搭一套配色很难；借用一套已经成立的却很容易。一张照片天生就有和谐感，因为场景里的光把这些颜色串在了一起。一个品牌的 logo 直接把它精确的颜色递给你。从一张真实的图片出发，你会得到一套感觉协调的配色，然后再去打磨。
吸管是怎么工作的
一张图片是像素的网格，每个像素都有一个颜色。取色器（吸管）读取你指向的那个像素的确切颜色，并以一个代码报告出来——通常是 HEX（#f59563），也就是把同样的红/绿/蓝数值写成十六进制。悬停预览、点击保存你喜欢的那些，一套配色就有了。
ToolKoala 的取色器正是在你的浏览器里做这件事：
- 拖入任意图片——照片、截图、logo。
- 悬停预览颜色；点击保存。想存多少存多少。
- 每个保存的颜色都会给你 HEX 和 RGB，可以直接复制进你的代码。
它在本地运行，所以你采样的图片永远不会被上传。
HEX、RGB、HSL——你需要哪一个？
同样的颜色，不同的记法：
- HEX（
#f59563）——网页默认；你最常粘进 CSS 的就是它。 - RGB（
245, 149, 99）——当你需要 alpha 通道（rgba(...)）做透明时很方便。 - HSL（色相、饱和度、亮度）——设计师最爱用来调整颜色的那一个：微调亮度做出浅色调，移动色相找到互补色。
如果你手上有一种格式的颜色、需要转成另一种，颜色转换器能把 HEX 即时转成 RGB、HSL、HSV 和 CMYK。
把取到的色变成一套真正的配色
有几个习惯能让取到的配色真正好用：
- 抓取一个跨度，而不是五个几乎一模一样的色调——一个深色、一个浅色、几个中间调，外加一个点缀色。
- 对任何要放文字的地方检查对比度。一对漂亮但低对比的颜色是读不清的。
- 用 HSL 来做变体——一旦有了基准色，就调整亮度来做悬停态、边框和背景，而不是另挑一堆不相关的新颜色。
常见问题
如何从图片里获取颜色代码？ 用取色器：加载图片，悬停预览，点击你想要的那个像素。它会以一个 HEX（通常还有 RGB）代码报告颜色，你可以复制。ToolKoala 的取色器在浏览器里就能做。
HEX、RGB 和 HSL 有什么区别？ 它们是书写同一种颜色的三种方式。HEX 是网页标准，RGB 用于透明（rgba）很方便，而 HSL 最便于调整颜色——手动改变亮度或色相。
我能从截图或 logo 里取色吗？ 能——任何图片都行，包括截图和 logo。这往往是匹配一个品牌确切颜色最快的办法。
取色器会上传我的图片吗？ 不会。ToolKoala 在你的浏览器里读取像素，所以图片永远不会离开你的设备。
如何把一个 HEX 颜色转成 RGB 或 HSL？ 把它粘进颜色转换器。ToolKoala 的颜色转换器能把任意 HEX 一次性转成 RGB、HSL、HSV 和 CMYK。
— Milo 🐨