颜色插值

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-＆gt; RGB实现。

Answer 2

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

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

您希望为每个组件执行此操作，其中红绿和蓝色或色调饱和度和值 。

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值时，中间结果可能不是您想要的视觉效果。然而，数值结果应始终如此。换句话说，R G和B值应该从开始到结束数字平滑地移动。然而，在视觉上这可能会导致一些未打败的灰色，这就是HCL闪耀的地方。

查看this教程，我将深入探讨。