反馈

取色器原理:怎么从图片里提取主色调

从一张图片里取出某个点的颜色很直接——读取那个像素的 RGB 值就行。但要从一整张图里提取出"最具代表性的几个主色",就需要一套算法来决定该把哪些相近的颜色归并成一类。


目录

  1. 取单点颜色:直接读像素值
  2. 提取主色:中位切分算法
  3. 配色建议:从一个颜色推荐一组搭配

1. 取单点颜色:直接读像素值

鼠标移动到图片某个位置,实时显示该点颜色,这个功能实现上很直接:图片在浏览器里本质上是一个像素矩阵,每个像素点都存储着对应的颜色数值(通常是 RGB 三个通道各 0-255 的强度值),鼠标悬停时只需要读取鼠标坐标对应的那一个像素点的原始颜色数据即可,不涉及任何复杂算法——这也是为什么取色器工具的这个功能反应速度极快,且颜色数值一定是图片里真实存在的、精确的某个像素颜色。

2. 提取主色:中位切分算法

一张图片动辄几十万上百万个像素,"提取这张图的主色调"这件事,本质上是要把这些海量的、连续分布的颜色值归并聚类成少数几个具有代表性的颜色。中位切分算法(Median Cut Algorithm)是解决这类问题的经典方法之一,基本思路是:把所有像素点看作三维颜色空间(RGB 三个坐标轴)里的点,找出这批点在哪一个颜色通道(R、G 还是 B)上数值分布范围最大,沿着这个通道的中位数把点集切成两半(这样两边各自的像素数量大致相等);对切出来的每一半,重复这个"找到分布最大的通道、按中位数再切一刀"的过程,每递归一次,颜色分组的数量就翻倍——重复足够多次后,每一小组像素点内部的颜色已经足够接近,取每组的平均颜色(或代表色)就得到了最终的主色列表。这套算法保证了切分出来的每个颜色组包含的像素数量相对均衡,不会出现"某个主色其实只对应图片里极少数像素"这种不具代表性的结果。

3. 配色建议:从一个颜色推荐一组搭配

拿到一个具体颜色之后,推荐"搭配色"依据的是色彩理论里几种经典的配色关系,这些关系本质上是在前面提到的 HSL 颜色模型 的色相环上做几何运算:

  • 互补色:色相环上正好相对(相差 180°)的颜色,视觉对比最强烈,常用于需要突出重点、制造视觉冲击力的设计
  • 邻近色:色相环上角度相近(比如相差 30° 以内)的颜色,视觉上过渡自然、和谐统一,常用于需要整体协调感的配色方案
  • 整图平均色:把图片所有像素的颜色值直接求平均,得到一个反映整张图片"总体色调倾向"的单一颜色,常用于给图片生成一个匹配的背景色或者做图片加载时的占位色

这几种配色关系都是色彩理论里长期使用的经典搭配思路,取色器工具把它们自动化成"选定一个颜色,直接算出对应的搭配色建议",省去了手动在色环上估算角度的过程。


在线工具:图像颜色识别