色彩模型(CIE&RGB&CMY&HSV&HLS)

作者:追风剑情 发布于:2017-7-29 13:15 分类:计算机图形学

       具有真实感的计算机图形,是一幅颜色逼真的画面。人们看到颜色的过程,是外部世界在人的眼脑视觉系统中引起的反应。颜色既是一种心理生理现象,也是一种心理物理现象。在心理生物学上,颜色由色彩(Hue)、色饱和度(Saturation)和明度(Brightness)决定。色彩即颜色的“色彩”,它是某种颜色据以定义的名称。色饱和度是单色光中掺入白光的度量。单色光的色饱和度为100%,白光加入后,其色饱和度下降。非彩色光的色饱和度为0。明度为非彩色光的光强值。在心理物理学上,与彩色、色饱和度和明度相对应的是主波长、色纯度和亮度。光是波长为400~700nm电磁波,这些电磁波被我们的视觉系统感知为紫、青、蓝、绿、黄、橙、红等颜色。我们可以用主波长、纯度和亮度三元组来描述任何光谱分布视觉效果。

CIE色彩模型

4444.png

人类对颜色的感知是以三刺激理论为基础。三刺激理论假设人类眼睛的视网膜中有3种锥状视觉细胞,分别对红、绿、蓝3种光最敏感。因此人们把这3种颜色定义为三基色。1931年,国际照明委员会(简称CIE)规定了3种基色(X, Y, Z),适当地混合此三基色即可规定出我们眼睛所能感觉到的所有光感。CIE的色度值x、y、z为

222.png

这时,x+y+z=1,颜色的色度值为(x, y, z),但色度坐标通常指(x, y),因为z=1-x-y。

通过对所有可见颜色画出x和y,可以画出上图所示的CIE色度图。该马蹄形区域的内部和边界表示所有可见的色度。边界弯曲部分的每一点,都对应在光谱中纯度为百分之百的纯度的色光,图中线上标明的数字为该位置对应色光的主波长。图中央一点C对应于用来近似太阳光的标准白光,它被定义为一种标准光源。

利用CIE色度图,可以把3个CIE原色混合在一起以匹配某一种颜色,从而使人们能够实际测量任何一种颜色的主波长和纯度。对于图b中的某一点M,可以把颜色M看作是C和N点上纯净谱光的一种混合体。这样,N就规定了主波长。MC与NC长度的比值就是M点的纯度Q,即Q=MC/NC。M越靠近C,M含有的光就越多,因而其纯度就越低。如果某点与C的连线交于底边紫色线上,则在可见光谱中找不到此颜色相应的主波长。这时,主波长可用其补色的光谱值附以后缀C表示。这一光谱可以通过反向延伸直线与对测光谱边界线相交而得。如图b中A1的主波长为500nm。

欲得到一种光谱色的补色,只需从这一点通过C点作一条直线,求出其与对侧光谱边界线的交点,即可求得补色的波长。例如,红橙色A1(λ=610nm)的被色为蓝色A2(λ=491nm)。这两种被色按一定比例相加得白色。

RGB和CMY色彩模型

3333.png

在计算机图形学中有两种重要的原色混合系统:红、绿、蓝(RGB)加色系统和青、品红、黄(CMY)减色系统。

此两种系统中的颜色互为补色,即青色是红色的补色,品红是绿色的补色,黄色是蓝色的补色。所谓某颜色的补色是从白色中减去这种颜色后所得的颜色。

这两种系统适合于不同的情况。在彩色印刷、胶卷等非发光显示体中采用CMY减色系统;对于发光体,常用RGB加色系统。

在RGB系统中,颜色是由3个分量的不同数值组合来决定的。RGB彩色空间可以被表示成一个立方体空间,如下图:

5555.png

从黑点到白点的连线,是彩色空间中灰色的分布。这个彩色空间表示了显示器中的所有颜色。

RGB与CMY系统的关系可以由下式给出:

777.png


HSV颜色六棱锥

66666.png

RGB和CMY颜色模型是面向硬件的,而HSV(Hue, Saturation, Value)模型是面向用户的,它对应于三维空间中的一个正六面锥体,这个六面锥体的顶面与V=1相对应,包含着具有最大亮度值的各种颜色。色彩H由绕V轴的旋转角给定的,红色对应于角度0,绿色对应于角度120,蓝色对应于角度240。每一种颜色和它的补色相差180,饱和度S取值为0~1。饱和度是以相对于模型所表示的颜色范围来量度的,并非相对于CIE色度图来量度的,因而与纯度不相同。

六面锥体顶点位于原点,V=0时,代表黑色;V=1,S=0的点为白色;S=0而V值为中间值时都是灰色。S=0时,H值是无意义的;当S≠0时,H是有意义的。

HSV模型与画家配色的方式相对应。纯色颜料对应V=1,S=1,添加白色获得的色泽相当于减少S,不同的色深可由减少V值即添加黑色实现。形成不同的色调需同时减少S和V值。


HLS双六棱锥颜色模型

11111.png

六棱锥模型可以推广为双六棱锥HLS(色彩Hue、亮度Lightness、色饱和度Saturation)模型。HLS模型主要用于描述发光体的颜色。在HLS模型中,RGB颜色立方体投影在平面的两侧形成一双六棱锥,亮度值沿轴线方向逐渐变化,对应黑色的顶点处L=0。另一对白色的顶点处L=1,与单六棱锥的模型一样,任何一个色彩的互补都位于绕该六面锥轴再往前转过180度的位置上。同时,从该竖直轴线开始,可以辐射形地度量饱和度。取值范围从轴线上的0到表面上的1.

HLS与RGB模型之间的转换也可参照HSV与RGB模型之间的转换。


以下示例演示了RGB与HSV颜色之间的转换 

参考 https://baike.baidu.com/item/HSV/547122?fr=aladdin&fromid=12630604&fromtitle=HSV%E9%A2%9C%E8%89%B2%E7%A9%BA%E9%97%B4

示例: C#

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using System.Threading.Tasks;
  6.  
  7. namespace HSVTest
  8. {
  9. class Program
  10. {
  11. static void Main(string[] args)
  12. {
  13. RGB rgb = new RGB(0.7f, 0.3f, 0.9f);
  14. Console.WriteLine("输入测试数据: "+rgb.ToString());
  15.  
  16. HSV hsv = RGB2HSV(rgb);
  17. Console.WriteLine("RGB->HSV: "+hsv.ToString());
  18.  
  19. rgb = HSV2RGB(hsv);
  20. Console.WriteLine("HSV->RGB: " + rgb.ToString());
  21.  
  22. Console.Read();
  23. }
  24.  
  25. public static HSV RGB2HSV(RGB rgb)
  26. {
  27. float R = rgb.r;
  28. float G = rgb.g;
  29. float B = rgb.b;
  30.  
  31. float max = Math.Max(Math.Max(R, G), B);
  32. float min = Math.Min(Math.Min(R, G), B);
  33. float V = max;
  34. float S = (max - min) / max;
  35. float H = 0;
  36.  
  37. if (R == max) H =(G-B)/(max-min)*60;
  38. if (G == max) H = 120+(B-R)/(max-min)*60;
  39. if (B == max) H = 240 +(R-G)/(max-min)*60;
  40. if (H < 0) H = H + 360;
  41.  
  42. HSV hsv = new HSV(H, S, V);
  43. return hsv;
  44. }
  45.  
  46. public static RGB HSV2RGB(HSV hsv)
  47. {
  48. float H = hsv.h;
  49. float S = hsv.s;
  50. float V = hsv.v;
  51.  
  52. float R=0, G=0, B=0;
  53. if (S == 0){
  54. R = G = B = V;
  55. //返回灰度
  56. return new RGB(R,G,B);
  57. }
  58.  
  59. if (H % 360 == 0)
  60. H = 0;
  61. H /= 60;
  62.  
  63. int i = (int)H;
  64. float f = H - i;
  65. float M = V * (1 - S);
  66. float N = V * (1 - S * f);
  67. float K = V * (1 - S * (1 - f));
  68.  
  69. switch (i)
  70. {
  71. case 0: R = V; G = K; B = M; break;
  72. case 1: R = N; G = V; B = M; break;
  73. case 2: R = M; G = V; B = K; break;
  74. case 3: R = M; G = N; B = V; break;
  75. case 4: R = K; G = M; B = V; break;
  76. case 5: R = V; G = M; B = N; break;
  77. }
  78.  
  79. return new RGB(R, G, B);
  80. }
  81. }
  82.  
  83. public struct RGB
  84. {
  85. public float r;
  86. public float g;
  87. public float b;
  88.  
  89. public RGB(float r, float g, float b)
  90. {
  91. this.r = r;
  92. this.g = g;
  93. this.b = b;
  94. }
  95.  
  96. public string ToString()
  97. {
  98. return string.Format("RGB({0}, {1}, {2})", r, g, b);
  99. }
  100. }
  101.  
  102. public struct HSV
  103. {
  104. public float h;
  105. public float s;
  106. public float v;
  107.  
  108.  
  109. public HSV(float h, float s, float v)
  110. {
  111. this.h = h;
  112. this.s = s;
  113. this.v = v;
  114. }
  115.  
  116. public string ToString()
  117. {
  118. return string.Format("HSV({0}, {1}, {2})", h, s, v);
  119. }
  120. }
  121. }

运行测试

111111.png

标签: 计算机图形学

Powered by emlog  蜀ICP备18021003号-1   sitemap

川公网安备 51019002001593号