如何计算四色渐变?

当两种颜色之间需要渐变时,最好的解决方案是使用 HSV 表示(色调饱和度值)。

如果您有两种颜色的h s v值,您只需对h、s和v进行线性插值,并且您有很好的颜色(在rgb空间中的插值总是导致“坏”的结果)。

你也发现 here 公式分别从rgb到hsv和从hsv到rgb。

现在,对于四个角的问题,可以对四个H/S/V值进行线性组合,用从E到这四个点A、B、C和D的距离加权。

编辑:与Tekblues相同的方法,但是在hsv空间(在rgb和hsv空间中很容易测试它)。你会看到不同之处。在HSV中,只需将彩色圆柱体旋转一圈,这就是为什么它会产生很好的效果)

edit2:如果你喜欢“速度和简单”,你可以使用l1范数,而不是l2范数(欧几里得范数)

所以,如果 a 正方形的大小和点的坐标是( 0 , 零 (b) 零 , 一 (c) 一 , 零 (D) 一 , 一 ,然后是E点的色调( x , y )可以用以下公式计算:

Hue(E) = ( Hue(B)*y/a + Hue(A)*(1-y/a) ) * (x/a)  +  ( Hue(D)*y/a + Hue(C)*(1-y/a) ) * (1-x/a)

哪里 Hue(A) 是A点的色调, Hue(B) B的色调等…

对饱和度和值应用相同的公式。

一旦你有了E点的色调/饱和度/值,你就可以在RGB空间中变换它了。

看看这个网站,它提供了一个@thibthib评论的可视化演示,“hsv中的梯度将更令人满意”:

http://www.perbang.dk/rgbgradient/

它是一个渐变创建器,将创建并显示RGB渐变和HSV渐变。

如果您尝试从ffaaaa到aaffaa(浅红色到绿色)的9个步骤,您将通过浅黄色得到一个很好的过渡,并且hsv和rgb看起来类似。

但是,尝试从ff0000到00ff00(粗体红色到绿色)的9个步骤,您将看到rgb-one通过一个美味的绿色棕色过渡。然而,HSV渐变通过粗体黄色过渡。

1. 确定点E到每个点A、B、C、D的距离

2. E点的颜色将是红色/绿色/蓝色的组合。计算每个颜色轴作为A、B、C、D同一颜色轴的平均值,并按距离进行思考。

   距离_a=sqrt((xa xe)^2+(ya ye)^2)

   距离_b=…

   总和_距离=距离_A+距离_B…

   红色=红色 距离A+红色B 距离……)距离/距离

   color_e=colorfromargb(红、绿、蓝)