colors - 颜色插值

Question

好的，所以我正在查看一个典型的颜色选择器，它看起来像这样：

如果我们只处理高度饱和的颜色，混合模式的行为如下：

R 255  
G 0  
B 0  

R 255  
G 0 -> 255  
B 0  

R 255  
G 255  
B 0  

R 255 -> 0  
G 255  
B 0  

R 0  
G 255  
B 0  

R 0  
G 255  
B 0 -> 255  

R 0  
G 255  
B 255  

R 0  
G 255 -> 0  
B 255  

R 0  
G 0  
B 255  

R 0 -> 255  
G 0  
B 255  

R 255  
G 0  
B 255  

R 255  
G 0  
B 255 -> 0  

R 255  
G 0  
B 0  

是否可以定义一个插值函数 f ，它取 0 到 1 之间的值并在该光谱上产生一种颜色（其中 0 和 1 对应于上面发布的光谱的左侧和右侧）？我只关心高度饱和的颜色（一个组件始终是 255。）。另外，我注意到这种模式从 R 到 G 再到 B 混合。但是，是否还有类似的功能可以混合青色、洋红色和黄色？虽然这是不正确的，但如果 f(0) 产生青色而 f(1) 产生黄色，那么 f(0.5) 会产生与混合两种颜料时可能达到的绿色相似。

我希望这是有道理的。请随时让我澄清任何事情。谢谢！

Answer 1

http://www.w3.org/TR/css3-color/#hsl-color为稀有的 CSS3 网络解释了 HSL，并包括一个简单的 HSL->RGB 实现。

Answer 2

在某些情况下，HSL 可能比 RGB 更好，但HCL在视觉上是最好的。它的计算成本更高，但您可以将其用作中间步骤。标准插值函数始终为：

C(x) = (1.0 - x) * color_1 + x * color_2, where x in (0.0, 1.0)

您想对每个组件执行此操作，其中red green和blue或hue 饱和度和value。

R(x) = (1.0 - x) * color_1.red + x * color_2.red
G(x) = (1.0 - x) * color_1.green + x * color_2.green
B(x) = (1.0 - x) * color_1.blue + x * color_2.blue

其中每个组件可以被规范化（从0.0到1.0）或直接0.0到255.0。

使用 RGB 值时，中间结果可能不是您想要在视觉上实现的。然而，数值结果应该总是如此。换句话说，RG 和 B 值应该从开始到结束数字平滑移动。然而，从视觉上看，这可能会导致一些未经处理的灰色，这就是 HCL 的亮点。

查看本教程，我将在其中进行更深入的介绍。