色调、饱和度和亮度 HSL

最近看饱和度。转些东西过来，都是成熟的理论。

H: hue,色调，
　　S：saturation 饱和度
　　L lum 亮度

从人的视觉系统看，颜色可用色调（hue）、饱和度（saturation）和亮度来描述，其中色调与光波的波长有直接关系，亮度和饱和度与光波的幅度有关。人眼看到的任一彩色光都是这三个特性的综合效果，这三个特性可以说是颜色的三要素。

（一）色调

色调(hue)又称为色相，指颜色的外观，用于区别颜色的名称或颜色的种类。色调是视觉系统对一个区域所呈现颜色的感觉。对颜色的感觉实际上就是视觉系统对可见物体辐射或者发射的光波波长的感觉。这种感觉就是与红、绿和蓝三种颜色中的哪一种颜色相似，或者与它们组合的颜色相似。色调取决于可见光谱中的光波的频率，它是最容易把颜色区分开的一种属性。

色调用红、橙、黄、绿、青、蓝、靛、紫(red，orange, yellow，green，cyan，blue，indigo，violet)等术语来刻画。苹果是红色的，这“红色”便是一种色调，它与颜色明暗无关。绘画中要求有固定的颜色感觉，有统一的色调，否则难以表现画面的情调和主题。例如我们说一幅画具红色调，是指它在颜色上总体偏红。

色调的种类很多，如果要仔细分析，可有一千万种以上，但普通颜色专业人士可辨认出的颜色大约可达三百至四百种。黑、灰、白则为无色彩。色调有一个自然次序：红、橙、黄、绿、青、蓝、靛、紫。在这个次序中，当人们混合相邻颜色时，可以获得在这两种颜色之间连续变化的色调。色调在颜色圆上用圆周表示，圆周上的颜色具有相同的饱和度和明度，但它们的色调不同，如图06-01-2 所示，展开的情况如图06-01-3所示色环。

 图06-01-2 圆周表示色调 

图06-01-3  色环

颜色连续变化的色环 太阳光带中的六种标准色与六种中间色，即红橙，黄橙，黄绿，蓝绿（青），蓝紫，红紫（品红），合称十二色相或色调。把不同的色调按红橙黄绿蓝紫的顺序衔接起来，就形成了一个色调连续变化过渡的圆环，称作为色环。

用于描述感知色调的一个术语是色彩(colorfulness)。色彩是视觉系统对一个区域呈现的色调多少的感觉，例如，是浅蓝还是深蓝的感觉。

（二）饱和度

饱和度(saturation)是颜色的纯洁性，可用来区别颜色明暗的程度。当一种颜色渗入其他光成分愈多时，就说颜色愈不饱和。完全饱和的颜色是指没有渗入白光所呈现的颜色，例如仅由单一波长组成的光谱色就是完全饱和的颜色。饱和度在颜色圆上用半径表示，如图06-01-4(a)所示。沿径向方向上的不同颜色具有相同的色调和明度，但它们的饱和度不同。例如在图06-01-4(b)所示的七种颜色，它们具有相同的色调和明度，但具有不同的饱和度，左边的饱和度最浅，右边的饱和度最深。

图06-01-4  半径大小表示饱和度的深浅

（三）明度、亮度与光亮度

1．明度

根据国际照明委员会的定义，明度(brightness)是视觉系统对可见物体辐射或者发光多少的感知属性。

有色表面的明度取决于亮度和表面的反射率。由于感知的明度与反射率不是成正比，而认为是一种对数关系，因此在颜色度量系统中使用一个比例因子(例如，0~10)来表示明度。人们也已经发现，对于用不同光谱特性但发射流明数量相同的两个表面，它们被认为有相同的明度。明度的一个极端是黑色(没有光)，另一个极端是白色，在这两个极端之间是灰色。

在许多颜色系统中，明度常用垂直轴表示，如图06-01-5(a)所示。例如在图06-01-5(b)所示的七种颜色,它们具有相同的色调和饱和度，但它们的明度不同，底部的明度最小，顶部的明度最大。

图06-01-5 垂直轴表示明度

用纯正的颜色相互比较所产生的明暗差别是明度的典型例子。在纯正光谱中，黄色的明度最高，显得最亮；其次是橙、绿；再其次是红、蓝；紫色明度最低，显得最暗（图06-01-6）。 

 图06-01-6  纯正的颜色的明暗差别

明度和人的感知有关，目前还无法用物理设备来测量。

2．亮度

根据国际照明委员会的定义，亮度(luminance)是用反映视觉特性的光谱敏感函数加权之后得到的辐射功率(radiant power)，用单位面积上反射或者发射的光的强度表示。它的幅度与物理功率成正比，并在555 nm 处达到峰值。在CIE XYZ 系统中，亮度用Y 表示。严格地说亮度应该使用像烛光/平方米(cd/m2)这样的单位来度量，但实际上是用指定的亮度即白光作参考，并把它标称化为1 或者100 个单位。例如，监视器用亮度为80 cd/m2的白光作参考，并指定Y = 1 。

3．光亮度

     

其中（Y/ Yn ）? 0.008856，Y 是CIE XYZ 系统中定义的亮度，Yn是参考白色光的亮度。

光亮度用作颜色空间的一个维，而明度(brightness)则仅限用于发光体，该术语用来描述反射表面或者透射表面。对计算机显示器显示的颜色，除使用明度(brightness)之外，也可使用光亮度(lightness)。因为虽然监视器是发射光的物体，但显示的颜色是相对于监视器的白光而言的。

由于明度很难度量，通常可以用亮度(luminance)即辐射的能量来度量。

饱和度越高，颜色越艳丽、越鲜明突出，越能发挥其颜色的固有特性。但饱和度高的颜色容易让人感到单调刺眼。饱和度低，色感比较柔和协调，可混色太杂则容易让人感觉浑浊，色调显得灰暗。

另外附上一个公式转换的网址：

 http://www./index.php?X=MATH&H=19#text19

还有我用hlsl写了个shader，方便调整的。一并附上。（没经过优化，很大优化空间，现在支持ps3.0）

float3 RGB2HSL(float3 diffuseColor)
{
  //得到　ｈｓｌ
 float H,S,L;
 float var_R = diffuseColor.x;                     //RGB from 0 to 255
 float var_G = diffuseColor.y;                     //RGB from 0 to 255
 float var_B = diffuseColor.z;                     //RGB from 0 to 255

float var_Min = min(var_B,min( var_R, var_G ));    //Min. value of RGB
float var_Max = max(var_B,max( var_R, var_G ));    //Max. value of RGB
float del_Max = var_Max - var_Min;             //Delta RGB value

L = ( var_Max + var_Min ) / 2.0;

if ( 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 );

   float del_R = ( ( ( var_Max - var_R ) / 6.0 ) + ( del_Max / 2.0 ) ) / del_Max;
   float del_G = ( ( ( var_Max - var_G ) / 6.0 ) + ( del_Max / 2.0 ) ) / del_Max;
   float del_B = ( ( ( var_Max - var_B ) / 6.0 ) + ( del_Max / 2.0 ) ) / del_Max;

   if      ( var_R == var_Max ) H = del_B - del_G;
   else if ( var_G == var_Max ) H = ( 1 / 3.0 ) + del_R - del_B;
   else if ( var_B == var_Max ) H = ( 2 / 3.0 ) + del_G - del_R;

   if ( H < 0 ) H += 1;
   if ( H > 1 ) H -= 1;
}
return float3(H,S,L);
 }
 
 
float Hue_2_RGB(float v1,float v2,float vH )             //Function Hue_2_RGB
{
float vH1 = vH;
   if ( vH < 0 ) vH1 += 1;
   if ( vH > 1 ) vH1 -= 1;
   if ( ( 6 * vH1 ) < 1 ) return ( v1 + ( v2 - v1 ) * 6 * vH1 );
   if ( ( 2 * vH1 ) < 1 ) return ( v2 );
   if ( ( 3 * vH1 ) < 2 ) return ( v1 + ( v2 - v1 ) * ( ( 2 / 3.0 ) - vH1 ) * 6.0 );
   return ( v1 );
}

 
float3 HSL2RGB(float H,float S,float L)
{
float R,G,B;
 if ( S == 0 )                       //HSL from 0 to 1
{
   R = L;                      //RGB results from 0 to 255
   G = L;
   B = L;
}
else
{
   float var_2,var_1;
   if ( L < 0.5 ) var_2 = L * ( 1 + S );
   else           var_2 = ( L + S ) - ( S * L );

   var_1 = 2.0 * L - var_2;

   R = Hue_2_RGB( var_1, var_2, H + ( 1 / 3.0 ) ) ;
   G = Hue_2_RGB( var_1, var_2, H );
   B = Hue_2_RGB( var_1, var_2, H - ( 1 / 3.0 ) );
}

return float3(R,G,B);
}

float4 std_PS(vertexOutput IN) : COLOR {
    float3 diffuseColor = tex2D(ColorSampler,IN.UV).rgb;
 //{beigin 
 float3 HSL = RGB2HSL(diffuseColor);

//hsl加数字
 HSL.r+=0.2;
 
    float3 result = HSL2RGB(HSL.r,HSL.g,HSL.b); 
 //end}
  

 //HSL.r = Hue_2_RGB(diffuseColor.r,diffuseColor.g,diffuseColor.b);
    return float4(result,1);
}