如何实现RGB颜色之间的渐变？

Question

红色：FF0000 绿色：00FF00
如何实现红色到绿色的渐变？如果简单的只改变R和G的值的话，会发现比真正的渐变效果少了中间的黄色（真正的红色到绿色的渐变过程是：红色->浅黄色->绿色）。
哪个大哥知道这中间应该如何改变啊？
有现成的算法更好，最好能给出例子，在线等

Answer 1

RGB的色彩空间的渐变是这样的你说的效果是 HLS的色彩空间渐变，可以把RGB转换成 HLS，然后渐变色调H

Answer 2

void color_step(COLORREF startColor,COLORREF endColor)
{
  int r = (GetRValue(endColor) - GetRValue(startColor));
  int g = (GetGValue(endColor) - GetGValue(startColor));
  int b = (GetBValue(endColor) - GetBValue(startColor));  int nSteps = max(abs(r), max(abs(g), abs(b)));
  if (nSteps < 1) nSteps = 1;  // Calculate the step size for each color
  float rStep = r/(float)nSteps;
  float gStep = g/(float)nSteps;
  float bStep = b/(float)nSteps;  // Reset the colors to the starting position
  float fr = GetRValue(startColor);
  float fg = GetGValue(startColor);
  float fb = GetBValue(startColor);  for (int i = 0; i < nSteps; i++) 
  {
    fr += rStep;
    fg += gStep;
    fb += bStep;    COLORREF color = RGB((int)(fr + 0.5),(int)(fg + 0.5),(int)(fb + 0.5));
    //color 即为重建颜色
  }
}

Answer 3

DarknessTM 可以介绍的更详细点吗？我不太懂。该怎么转换成HLS，然后渐变色调H？

Answer 4

TO：zgl7903
你好，你讲的是RGB转换到HSL吗？

Answer 5

转成HLS后 就和你之前的渐变一样的方法啊HLS也是3个值对应一个颜色 ，色调 亮度 饱和度

Answer 6

TO：DarknessTM 
那怎么转换成HLS呢？能不能给个函数或者讲一下这两者之间是如何转换的啊？

Answer 7

你baidu Google 下把，我这里上网不方便RGB 和 HSL 的转换到处都应该有，codeproject上似乎还有写好的互相转换的类

Answer 8

为什么要先转换成HSL的值啊？？？
颜色用RGB和HSL表示有什么区别呢？

Answer 9

昨天稍微查了一下，我发现RGB颜色的渐变，好像不是先转换到HSL吧？
大概的转变应该是这样的过程：红色-》黄色-》绿色-》青色-》蓝色-》品红-》红色
如果只是给以上的颜色的话，比较容易实现渐变，但如果随便给一个颜色，它的RGB三个值都有值，那该怎么实现渐变呢？
所以说，我想要的是RGB颜色的渐变算法，请大家看清楚再回答

Answer 10

RGB - > HSLvar_R = ( R / 255 )                     //RGB from 0 to 255
var_G = ( G / 255 )
var_B = ( B / 255 )var_Min = min( var_R, var_G, var_B )    //Min. value of RGB
var_Max = max( var_R, var_G, var_B )    //Max. value of RGB
del_Max = var_Max - var_Min             //Delta RGB valueL = ( var_Max + var_Min ) / 2if ( del_Max == 0 )                     //This is a gray, no chroma...
{
   H = 0                                //HSL results from 0 to 1
   S = 0
}
else                                    //Chromatic data...
{
   if ( L < 0.5 ) S = del_Max / ( var_Max + var_Min )
   else           S = del_Max / ( 2 - var_Max - var_Min )   del_R = ( ( ( var_Max - var_R ) / 6 ) + ( del_Max / 2 ) ) / del_Max
   del_G = ( ( ( var_Max - var_G ) / 6 ) + ( del_Max / 2 ) ) / del_Max
   del_B = ( ( ( var_Max - var_B ) / 6 ) + ( del_Max / 2 ) ) / del_Max   if      ( var_R == var_Max ) H = del_B - del_G
   else if ( var_G == var_Max ) H = ( 1 / 3 ) + del_R - del_B
   else if ( var_B == var_Max ) H = ( 2 / 3 ) + del_G - del_R   if ( H < 0 ) ; H += 1
   if ( H > 1 ) ; H -= 1
}HSL -> RGBif ( S == 0 )                       //HSL from 0 to 1
{
   R = L * 255                      //RGB results from 0 to 255
   G = L * 255
   B = L * 255
}
else
{
   if ( L < 0.5 ) var_2 = L * ( 1 + S )
   else           var_2 = ( L + S ) - ( S * L )   var_1 = 2 * L - var_2   R = 255 * Hue_2_RGB( var_1, var_2, H + ( 1 / 3 ) ) 
   G = 255 * Hue_2_RGB( var_1, var_2, H )
   B = 255 * Hue_2_RGB( var_1, var_2, H - ( 1 / 3 ) )
} 
--------------------------------------------------------------------------------Hue_2_RGB( v1, v2, vH )             //Function Hue_2_RGB
{
   if ( vH < 0 ) vH += 1
   if ( vH > 1 ) vH -= 1
   if ( ( 6 * vH ) < 1 ) return ( v1 + ( v2 - v1 ) * 6 * vH )
   if ( ( 2 * vH ) < 1 ) return ( v2 )
   if ( ( 3 * vH ) < 2 ) return ( v1 + ( v2 - v1 ) * ( ( 2 / 3 ) - vH ) * 6 )
   return ( v1 )
}
================然后你就3个分量逐步变化吧

Answer 11

to:zgl7903你的那个代码做的只是大概的渐变，颜色不够均匀，而且肯定不能表达出来红色向绿色转变过程中的黄色。你可以自己去试下看。

Answer 12

to: DarknessTM
你说的这个方法我知道，但是你从RGB转到HSL，然后又从HSL转回RGB有什么意义呢？
比如我红色（255 0 0）转成HSL，然后又从HSL转会RGB还是(255 0 0),这样做的意义呢？
这样还是没有解决我的问题，你有没有去试过呢？我刚才去试过了，结果就还是红色，跟我要求的没有联系。
郁闷！

Answer 13

其实也不用给我什么代码，你能举个例子把原理给我讲清楚就行了，代码我可以自己去写。
就比如你告诉我怎么从（220 26  180）渐变到（255 128 64）就行。把R，G，B三个值是如何转换的告诉我就行了。我想我的问题已经描述的够清楚了，可是为什么没有人针对问题进行回答？

Answer 14

转成HSL之后，只需调整其中的色调分量就可以实现颜色渐变了，亮度和饱和度不用变你没有修改直接转回RGB自然没有变化拉
过程是
RGB->HSL->修改色调->RGB

Answer 15

RGB（255 0 0）-》HSL（0 1 0.5）
如何渐变色调，使红色经过32次变化渐变到绿色？

Answer 16

to:vocanicy
谢谢，你说的我差不多懂了，好像是可以的但是我不太清楚，是否对于所有的RGB颜色的渐变，我转成HSL后，只改变H色调的值就可以了？其他的两个值S和L还用改变吗？例如我随便选的一个颜色（153 200 3），然后想让它渐变到另一个颜色（231 58 64），这个过程中 ，我只需要改变H的值就可以达到渐变的效果吗？

Answer 17

转换成HSL后就由 H1 -> H2 S1->S2 L1->L2 ，会产生你期望的渐变过程因为HSL色彩空间的分布比较符合我们人眼的感知，如 深红 和某淡红，在HSL中 就表现为 色调亮度相近，只是饱和度不同，而RGB来区别的话，不是这么明显你可以看看Windows的选择颜色对话框，可以很明显的看到HSL渐变的效果

Answer 18

楼主找本计算机图像学的书看看吧
通常HSL和RGB之间的关系都会在第一章...基础中的基础

Answer 19

楼主找本计算机图像学的书看看吧
通常HSL和RGB之间的关系都会在第一章...基础中的基础

Answer 20

我刚接触计算机图形方面，以前没接触过，也没学过，不知道也很正常
楼上那位你觉得是基础中的基础，那说明你已经是高手了吧？
那干嘛不回答我的问题，而去说那些废话？我有书的话还用来这里问吗？你不知道怎么样效率高吗？
没事一边混去吧！最鄙视那些不帮忙还说风凉话的人。多向那些星星们学习，而不是去花时间去损人！好了，问题已经解决，谢谢DarknessTM和vocanicy的认真热心耐心的帮助，再次表示感谢，马上散分！