颜色混合怎么算 - 两色/多色混合、插值与色阶生成

🌟 “两个颜色的中间色”是怎么算的#

做渐变、生成色阶、模拟叠加时，都需要”混合颜色”。但混合不是简单取平均——在哪个颜色空间里混合，结果差别很大。星点颜色混合与计算工具可以直观对比。

两色平均：结果 = (色A + 色B) / 2（逐通道）。

多色加权：结果 = Σ(色i × 权重i) / Σ权重i。

这在 RGB 空间直接算，简单但对某些颜色不”自然”。

例：蓝 → 黄的中间色，RGB 混合会得到偏灰的颜色，而在感知均匀空间里过渡更协调。做渐变时，浏览器也支持 linear-gradient(in oklab, ...)。

给定起止颜色，生成 N 个过渡色：

1
色i = 起始 + (结束 - 起始) × i / (N - 1)

常用于：生成主色的 10 个明度层级（50~900），类似 Tailwind 的做法。

叠加两个颜色时，不同模式效果不同：

常用于图像处理、图层叠加、CSS mix-blend-mode。

为什么 RGB 混合的中间色发灰？

因为 RGB 不是感知均匀空间，直线插值会经过低饱和区域。改用 OKLab 可缓解。

加权混合怎么用？

给每个颜色一个权重（如 0.7 与 0.3），结果更偏向权重大的颜色。

色阶和渐变是一回事吗？

相关但不同：色阶是离散的一组颜色，渐变是连续过渡。色阶可当作渐变的采样。

颜色混合的关键是”在哪个空间插值”：要自然用 OKLab，要鲜艳用 HSL，要简单用 RGB。生成色阶、做渐变、模拟叠加，都可以用颜色混合与计算完成。

立即体验：访问颜色混合与计算