引擎系列学习【一】Color Model（颜色模型）

RGB

RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

应用

目前的显示器大都是采用了RGB颜色标准，

在显示器上，是通过电子枪打在屏幕的红、绿、蓝三色发光极上来产生色彩的，目前的电脑一般都能显示32位颜色，有一千万种以上的颜色。

电脑屏幕上的所有颜色，都由这红色绿色蓝色三种色光按照不同的比例混合而成的。一组红色绿色蓝色就是一个最小的显示单位。屏幕上的任何一个颜色都可以由一组RGB值来记录和表达。

因此这红色绿色蓝色又称为三原色光，用英文表示就是R(red)、G(green)、B(blue)。

在电脑中，RGB的所谓“多少”就是指亮度，并使用整数来表示。通常情况下，RGB各有256级亮度，用数字表示为从0、1、2...直到255。注意虽然数字最高是255，但0也是数值之一，因此共256级。如同2000年到2010年共是11年一样。

按照计算，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256=16777216。通常也被简称为1600万色或千万色。也称为24位色(2的24次方)。

在led领域利用三合一点阵全彩技术， 即在一个发光单元里由RGB三色晶片组成全彩像素。随着这一技术的不断成熟，led显示技术会给人们带来更加丰富真实的色彩感受。

原理

RGB是从颜色发光的原理来设计定的，通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯，当它们的光相互叠合的时候，色彩相混，而亮度却等于两者亮度之总和，越混合亮度越高，即加法混合。

有色光可被无色光冲淡并变亮。如蓝色光与白光相遇，结果是产生更加明亮的浅蓝色光。知道它的混合原理后，在软件中设定颜色就容易理解了。

红、绿、蓝三盏灯的叠加情况，中心三色最亮的叠加区为白色，加法混合的特点：越叠加越明亮。

红、绿、蓝三个颜色通道每种色各分为255阶亮度，在0时“灯”最弱——是关掉的，而在255时“灯”最亮。当三色灰度数值相同时，产生不同灰度值的灰色调，即三色灰度都为0时，是最暗的黑色调；三色灰度都为255时，是最亮的白色调。

RGB 颜色称为加成色，因为您通过将 R、G 和 B 添加在一起（即所有光线反射回眼睛）可产生白色。加成色用于照明光、电视和计算机显示器。例如，显示器通过红色、绿色和蓝色荧光粉发射光线产生颜色。绝大多数可视光谱都可表示为红、绿、蓝 (RGB) 三色光在不同比例和强度上的混合。这些颜色若发生重叠，则产生青、洋红和黄。

RGB格式

对一种颜色进行编码的方法统称为“颜色空间”或“色域”。用最简单的话说，世界上任何一种颜色的“颜色空间”都可定义成一个固定的数字或变量。RGB（红、绿、蓝）只是众多颜色空间的一种。采用这种编码方法，每种颜色都可用三个变量来表示-红色绿色以及蓝色的强度。记录及显示彩色图像时，RGB是最常见的一种方案。但是，它缺乏与早期黑白显示系统的良好兼容性。因此，许多电子电器厂商普遍采用的做法是，将RGB转换成YUV颜色空间，以维持兼容，再根据需要换回RGB格式，以便在电脑显示器上显示彩色图形。

网页格式

由于网页(WEB)是基于计算机浏览器开发的媒体，所以颜色以光学颜色RGB（红、绿、蓝）为主。网页颜色是以16进制代码表示，一般格式为#DEFABC （字母范围从A-F,数字从0-9 ）；如黑色，在网页代码中便是：#000000(在css编写中可简写为#000)。当颜色代码为#AABB11时，可以简写为#AB1表示，如#135与#113355表示同样的颜色。

RGB1、RGB4、RGB8都是调色板类型的RGB格式，在描述这些媒体类型的格式细节时，通常会在BITMAPINFOHEADER数据结构后面跟着一个调色板（定义一系列颜色）。它们的图像数据并不是真正的颜色值，而是当前像素颜色值在调色板中的索引。以RGB1（2色位图）为例，比如它的调色板中定义的两种颜色值依次为0x000000（黑色）和0xFFFFFF（白色）…（每个像素用1位表示）表示对应各像素的颜色为：黑黑白白黑白黑白黑白白白…。

RGB555

RGB555是另一种16位的RGB格式，RGB分量都用5位表示（剩下的1位不用）。使用一个字读出一个像素后，这个字的各个位意义如下：

高字节 低字节

X R R R R R G G G G G B B B B B （X表示不用，可以忽略）

可以组合使用屏蔽字和移位操作来得到RGB各分量的值：

#define RGB555_MASK_RED 0x7C00

#define RGB555_MASK_GREEN 0x03E0

#define RGB555_MASK_BLUE 0x001F

R = (wPixel & RGB555_MASK_RED) >> 10; // 取值范围0-31

G = (wPixel & RGB555_MASK_GREEN) >> 5; // 取值范围0-31

B = wPixel & RGB555_MASK_BLUE; // 取值范围0-31

RGB565

RGB565使用16位表示一个像素，这16位中的5位用于R，6位用于G，5位用于B。程序中通常使用一个字（WORD，一个字等于两个字节）来操作一个像素。当读出一个像素后，这个字的各个位意义如下：

高字节 低字节

R R R R R G G G G G G B B B B B

可以组合使用屏蔽字和移位操作来得到RGB各分量的值：

#define RGB565_MASK_RED 0xF800

#define RGB565_MASK_GREEN 0x07E0

#define RGB565_MASK_BLUE 0x001F

R = (wPixel & RGB565_MASK_RED) >> 11; // 取值范围0-31

G = (wPixel & RGB565_MASK_GREEN) >> 5; // 取值范围0-63

B = wPixel & RGB565_MASK_BLUE; // 取值范围0-31

#define RGB(r,g,b) (unsigned int)( (r|0x08 << 11) | (g|0x08 << 6) | b|0x08 )

#define RGB(r,g,b) (unsigned int)( (r|0x08 << 10) | (g|0x08 << 5) | b|0x08 )

该代码可以解决24位与16位相互转换的问题

RGB24

RGB24使用24位来表示一个像素，RGB分量都用8位表示，取值范围为0-255。注意在内存中RGB各分量的排列顺序为：BGR BGR BGR…。通常可以使用RGBTRIPLE数据结构来操作一个像素，它的定义为：

typedef struct tagRGBTRIPLE {

BYTE rgbtBlue; // 蓝色分量

BYTE rgbtGreen; // 绿色分量

BYTE rgbtRed; // 红色分量

} RGBTRIPLE;

RGB32

RGB32使用32位来表示一个像素，RGB分量各用去8位，剩下的8位用作Alpha通道或者不用。（ARGB32就是带Alpha通道的RGB24。）注意在内存中RGB各分量的排列顺序为：BGRA BGRA BGRA…。通常可以使用RGBQUAD数据结构来操作一个像素，它的定义为：

typedef struct tagRGBQUAD {

BYTE rgbBlue; // 蓝色分量

BYTE rgbGreen; // 绿色分量

BYTE rgbRed; // 红色分量

BYTE rgbReserved; // 保留字节（用作Alpha通道或忽略）

} RGBQUAD。

RGBA

RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的色彩空间。虽然它有的时候被描述为一个颜色空间，但是它其实仅仅是RGB模型的附加了额外的信息。

采用的颜色是RGB，可以属于任何一种RGB颜色空间，但是Catmull和Smith在1971至1972年间提出了这个不可或缺的alpha数值，使得alpha渲染和alpha合成变得可能。提出者以alpha来命名是源于经典的线性插值方程αA + (1-α)B所用的就是这个希腊字母。

alpha通道一般用作不透明度参数。如果一个像素的alpha通道数值为0%，那它就是完全透明的（也就是看不见的），而数值为100%则意味着一个完全不透明的像素（传统的数字图像）。在0%和100%之间的值则使得像素可以透过背景显示出来，就像透过玻璃（半透明性），这种效果是简单的二元透明性（透明或不透明）做不到的。它使数码合成变得容易。alpha通道值可以用百分比、整数或者像RGB参数那样用0到1的实数表示。

有时它也被写成ARGB（像RGBA一样，但是第一个数据是alpha），是Macromedia的产品使用的术语。比如，0x80FFFF00是50%透明的黄色，因为所有的参数都在0到255的范围内表示。0x80是128，大约是255的一半。

PNG是一种使用RGBA的图像格式。

CMY模型

CMY模式是指采用青色（Cyan）、品红色（Magenta）、黄色（Yellow）3种基本颜色按一定比例合成颜色的方法，是一种依靠反光显色的色彩模式。在CMY模型中，显示的色彩不是直接来自于光线的色彩，而是光线被物体吸收掉一部分之后反射回来的剩余光线所产生的。因此，光线都被吸收时显示为黑色（减色法），当光线完全被反射时显示为白色(加色法)。

CMYK

从理论上来说，只需要CMY三种油墨等比例混合在一起就会得到黑色，但是因为目前制造工艺水平的限制，制造出来的油墨纯度都不够高，CMY相加的结果实际只是一种暗红色。又因为在印刷业中黑色的使用频率非常高，所以往往还会加入黑色（black）油墨，这就是CMYK色彩混合模式的由来。

CMYK又称为印刷色彩模式。

CMY(K)模式与RGB模式的区别

RGB模式是一种发光的色彩模式。比如在一间黑暗的房间里，你可以看到投射在墙壁上的光斑；

CMY(K)是一种依靠反光的色彩模式。在黑暗房间里你是无法阅读报纸的，我们之所以能够看到报纸上的内容是因为有光照射到报纸上，再反射到我们的眼中。

总而言之，只要在屏幕上显示的图像，就是RGB模式表现的；只要是在印刷品上看到的图像，就是CMYK模式表现的。例如显示器、投影仪、扫描仪、数码相机等属于RGB模式；期刊、杂志、报纸、宣传画等，都是印刷出来的，那么就是属于CMYK模式了。

HSV

 

（HSV颜色模型）：

HSV(Hue, Saturation, Value)是根据颜色的直观特性由A. R. Smith在1978年创建的一种颜色空间, 也称六角锥体模型(Hexcone Model)。

这个模型中颜色的参数分别是：色调（H），饱和度（S），明度（V）。

颜色模型

色调H

用角度度量，取值范围为0°～360°，从红色开始按逆时针方向计算，红色为0°，绿色为120°,蓝色为240°。它们的补色是：黄色为60°，青色为180°,品红为300°；

饱和度S

饱和度S表示颜色接近光谱色的程度。一种颜色，可以看成是某种光谱色与白色混合的结果。其中光谱色所占的比例愈大，颜色接近光谱色的程度就愈高，颜色的饱和度也就愈高。饱和度高，颜色则深而艳。光谱色的白光成分为0，饱和度达到最高。通常取值范围为0%～100%，值越大，颜色越饱和。

明度V

明度表示颜色明亮的程度，对于光源色，明度值与发光体的光亮度有关；对于物体色，此值和物体的透射比或反射比有关。通常取值范围为0%（黑）到100%（白）。

RGB和CMY颜色模型都是面向硬件的，而HSV（Hue Saturation Value）颜色模型是面向用户的。

HSV模型的三维表示从RGB立方体演化而来。设想从RGB沿立方体对角线的白色顶点向黑色顶点观察，就可以看到立方体的六边形外形。六边形边界表示色彩，水平轴表示纯度，明度沿垂直轴测量。

六棱锥

H参数表示色彩信息，即所处的光谱颜色的位置。该参数用一

HSV颜色空间模型

角度量来表示，红、绿、蓝分别相隔120度。互补色分别相差180度。

纯度S为一比例值，范围从0到1，它表示成所选颜色的纯度和该颜色最大的纯度之间的比率。S=0时，只有灰度。

V表示色彩的明亮程度，范围从0到1。有一点要注意：它和光强度之间并没有直接的联系。

算法

RGB转化到HSV的算法:

max=max(R,G,B)；

min=min(R,G,B)；

V=max(R,G,B)/255；

S=(max-min)/max；

HSV颜色空间模型（圆锥模型）

if (R = max) H =(G-B)/(max-min)* 60；

if (G = max) H = 120+(B-R)/(max-min)* 60；

if (B = max) H = 240 +(R-G)/(max-min)* 60；

if (H < 0) H = H+ 360；

HSV转化到RGB的算法:

if (s = 0)

R=G=B=V;

else

H /= 60;

i = INTEGER(H);

f = H - i;

a = V * ( 1 - s );

b = V * ( 1 - s * f );

c = V * ( 1 - s * (1 - f ) );

switch(i)

case 0: R = V; G = c; B = a;

case 1: R = b; G = v; B = a;

case 2: R = a; G = v; B = c;

case 3: R = a; G = b; B = v;

case 4: R = c; G = a; B = v;

case 5: R = v; G = a; B = b;

HSV对用户来说是一种直观的颜色模型。我们可以从一种纯色彩开始，即指定色彩角H，并让V=S=1，然后我们可以通过向其中加入黑色和白色来得到我们需要的颜色。增加黑色可以减小V而S不变，同样增加白色可以减小S而V不变。例如，要得到深蓝色，V=0.4 S=1 H=240度。要得到淡蓝色，V=1 S=0.4 H=240度。

一般说来，人眼最大能区分128种不同的色彩，130种色饱和度，23种明暗度。如果我们用16Bit表示HSV的话，可以用7位存放H，4位存放S，5位存放V，即745或者655就可以满足我们的需要了。

由于HSV是一种比较直观的颜色模型，所以在许多图像编辑工具中应用比较广泛，如Photoshop（在Photoshop中叫HSB）等等，但这也决定了它不适合使用在光照模型中，许多光线混合运算、光强运算等都无法直接使用HSV来实现。

HSL：

HSL色彩模式是工业界的一种颜色标准，是通过对色相(H)、饱和度(S)、明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色相，饱和度，明度三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

颜色模型

H: Hue 色相

S：Saturation 饱和度

L Lightness 明度

概述

HSL色彩模式使用HSL模型为图像中每一个像素的HSL分量分配一个0~255范围内的强度值。HSL图像只使用三种通道，就可以使它们按照不同的比例混合，在屏幕上重现16777216种颜色。

在 HSL 模式下，每种 HSL 成分都可使用从 0到 255的值。（其中L是从黑（0）到白（255）渐变）

Windows自带画图程序中菜单栏->颜色->编辑颜色->规定自定义颜色 中可以通过修改E(H)SL的值（0～240）以得到对应RGU(B)的值

模型解释

H(hue)色相

HSL的H(hue)分量，代表的是人眼所能感知的颜色范围，这些颜色分布在一个平面的色相环上，取值范围是0°到360°的圆心角，每个角度可以代表一种颜色。色相值的意义在于，我们可以在不改变光感的情况下，通过旋转色相环来改变颜色。在实际应用中，我们需要记住色相环上的六大主色，用作基本参照：360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红，它们在色相环上按照60°圆心角的间隔排列。

HSL的S(saturation)分量，指的是色彩的饱和度，它用0%至100%的值描述了相同色相、明度下色彩纯度的变化。数值越大，颜色中的灰色越少，颜色越鲜艳，呈现一种从理性(灰度)到感性(纯色)的变化。

S(saturation)饱和度

HSL的L(lightness)分量，指的是色彩的明度，作用是控制色彩的明暗变化。它同样使用了0%至100%的取值范围。数值越小，色彩越暗，越接近于黑色；数值越大，色彩越亮，越接近于白色。

L(lightness)亮度

算法

HSL与RGB转换

a) RGB→HSL的算法描述。

步骤1：把RGB值转成【0，1】中数值。

步骤2：找出R,G和B中的最大值。

步骤3：计算明度：L=(maxcolor + mincolor)/2

步骤4：如果最大和最小的颜色值相同，即表示灰色，那么S定义为0，而H未定义并在程序中通常写成0。

步骤5：否则，根据明度L计算饱和度S：

If L<0.5, S=(maxcolor-mincolor)/(maxcolor + mincolor)

If L>=0.5, S=(maxcolor-mincolor)/(2.0-maxcolor-mincolor)

步骤6:计算色调H：

If R=maxcolor, H=(G-B)/(maxcolor-mincolor)

If G=maxcolor, H=2.0+(B-R)/(maxcolor-mincolor)

If B=maxcolor, H=4.0+(R-G)/(maxcolor-mincolor)

H=H*60.0,如果H为负值，则加360。

说明：1，由步骤3的式子可以看出明度仅与图像的最多颜色成分和最少的颜色成分的总量有关。明度越小，图像越趋于黑色。亮度越高图像越趋于明亮的白色。
　　2，由步骤5的式子可以看出饱和度与图像的最多颜色成分和最少的颜色成分的差量有关。饱和度越小，图像越趋于灰度图像。饱和度越大，图像越鲜艳，给人的感觉是彩色的，而不是黑白灰的图像。
　　3，色调决定了人对图像的不同的颜色感受。
　　4，从第6步的计算看，H分成0～6区域。RGB颜,色空间是一个立方体而HSL颜色空间是两个六角形锥体，其中的L是RGB立方体的主对角线。因此，RGB立方体的顶点：红、黄、绿、青、蓝和品红就成为HSL六角形的顶点，而数值0～6就告诉我们H在哪个部分。

b) HSL→RGB的算法描述。

步骤1：If S=0,表示灰色，定义R,G和B都为L.

步骤2：否则，测试L:

If L<0.5,temp2=L*(1.0+S)

If L>=0.5,temp2=L+S-L*S

步骤3：temp1=2.0*L-temp2

步骤4：把H转换到0～1。

步骤5：对于R,G,B，计算另外的临时值temp3。方法如下：

for R, temp3=H+1.0/3.0

for G, temp3=H

for B, temp3=H-1.0/3.0

if temp3<0, temp3=temp3+1.0

if temp3>1, temp3=temp3-1.0

步骤6：对于R,G,B做如下测试：

If 6.0*temp3<1,color=temp1+(temp2-temp1)*6.0*temp3

Else if 2.0*temp3<1,color=temp2

Else if 3.0*temp3<2,

color=temp1+(temp2-temp1)*((2.0/3.0)-temp3)*6.0

Else color=temp1