GUI原理1 - 色彩王国----转贴

asmcos

我们所看到的色彩世界，在计算机里，通常用以下三种颜色格式进行描述——RGB、HSL和CMYK。这也是设计师接触最多的，当然还有其他的颜色格式，不过详细的我也忘了。

    先来说RGB吧，这也是我们接触最多的格式。要说RGB，要先得说一下LCD显示器的原理。我直接跳过了CRT的原理，因为LCD与RGB联系也更为紧密，当然CRT也是基于RGB色彩理论的。

    LCD俗称液晶显示器，每一个点都是正方形的，由3个长方形的颜色区域组成，颜色分别是Red、Green、Blue。这都很简单了，大家都知道。通过控制不同液晶的偏转角度，达到控制白光通过液晶后到达人眼的亮度，从而控制颜色的饱和度。这里用的是折射原理，实际上LCD背光只有白光，透过不同的颜色棱镜，就会得到红绿蓝3色。

    为什么photoshop在控制RGB色彩的时候，取值范围是0～255呢？这就要涉及到计算机的最小单位了——字节（其实最小应该是Bit），一个字节由8个bit组成，这里是2进制，也就是2的8次方＝256。256肯定是不能要的，这已经超出了8个bit所能够表达的范围，所以，颜色值从0到 255。

    那为什么不是7个或者6个bit呢？理论上来说，这都是可行的，但实际人眼的分辨能力在7个bit以上，甚至于8bit，所以这也要满足人眼的可视需求。

    一个单独的颜色量由1个字节表示，那一个点就由3个字节表示，也就是2的24次方，就是我们通常所说的24位色。

    RGB是最为通用的一种格式，实际上以后的显示器可能会扩展到7原色或者更多，而不是现在的3原色，毕竟3原色24bit是不能够表达人眼所能看见的任何颜色的。

    再说说HSL，有的也叫做HSB，L表示lightness，B表示Brightness，都是一个意思。通常，根据人的习惯，我们将棱镜分出来的颜色看作是Hue色调，将颜色的Saturation饱和度和Lightness亮度作为调节色调的基本手段，于是就有了HSL。Windows的调色板，包括 Photoshop的调色板，使用的就是HSL方式，可以更直观的选择适合的颜色。

    RGB和HSL的世界是不同的，必须通过一系列复杂的算法才能够互换。如果将RGB看作是一个球体，那HSL就是一个梭体，也就是两个圆锥组成的形体。这两个颜色之间的互转目前也有近似的算法，但也要经过非常复杂的公式才能完成，不过已经避免了平方和开发的麻烦。

    这里顺代将一下Photoshop中HSL调节滤镜的原理。一个RGB格式的图片，通过HSL颜色格式，可以将图片的整体色调进行调节。比如我们要调节 Hue色调值，增加50。首先，取出每个点的RGB颜色值，转换为HSL，将得到的Hue值加上50，然后转换到RGB颜色，覆盖原来点的颜色。就这样，将所有的点都做一回合的互转，就能够将整个图片的色调进行调整。

    很多平面设计师并不知道Photoshop中为什么有CMYK色，如果你是做印刷设计的，那就必须用CMYK色，因为印刷色不是基于RGB格式的。 Cyan 青, Magenta 品红, Yellow 黄, blacK 黑，共同组成CMYK色。我们可以设想一个印刷机是由4种色带组成的，通过4次印刷，将4种不同的颜色叠加在一起，从而形成彩色的封面。在印刷上，或者水墨画上，颜色叠加是在做减法，也就是叠加的越多，颜色越黑。我们小时候都用过水彩笔，如果使用不同的画笔在某一个地方不停的涂抹，最后就得到黑黑的一片。其实，从原理上使用CMY色，就能够得到黑色，而CMY也是RGB的近亲。基于两点原因要添加K，也就是Black。第一，CMY组成的黑色不够黑，纯度不够；第二，由3种颜色叠加成黑色的成本太高，需要反复印刷3次，而黑色是报纸杂志最常用的颜色，也是最便宜的色带。我们通常在报纸的一个角上会发现一个彩色的十字，也就是用于颜色叠加校准用的。通常为了节约成本，尽量的少用CMYK的某一种颜色。比如，在印刷报纸的时候，一个单独黑色的版面只需要印刷一遍，而彩色的版面要印刷4遍。我们在做名片的时候，都需要尽量的少用颜色，达到节约成本的目的。

    CMYK和RGB的互转比较麻烦，主要是CMYK所能够表达的颜色范围更小，而且某些稍微亮点的颜色都不能正确显示。如果看到Photoshop上的某个 RGB色，旁边的CMYK色有一个感叹号，那就表明这种颜色印刷不出来，我们就需要修改之。Photoshop的颜色告警也是基于这个原理，因此在印刷的时候更多的要考虑CMYK色。CMYK转换到RGB一般是通过数组来实现的，不同的显示器应该提供不同的颜色表，以适应CMYK色的互换。

    设计领域有一个行规，那就是设计师必须使用CRT显示器，这有两点原因。一，CRT显示器所能够表达的颜色更多，达到32Bit，而LCD原理上只能实现 18Bit，现在经过优化后可以实现伪24Bit。二，CRT的颜色更接近于CMYK色，而LCD的颜色太亮了，也就是饱和度太高。

    先来讲一下图片格式，从BMP说起。BMP文件是Windows最基本的文件格式，比如一张未压缩的真彩色图片，文件的大小通常等于56＋宽度＊高度＊3。前54个字节是文件描述，通常称为文件头，中间的是颜色，每个点占用3个字节，遵循从左到右，从上到下的方向。不过，有的BMP格式在存放颜色时，恰好是相反的，先放最后一个点的颜色。BMP文件的结尾以两个0x00，0x00组成。

    不压缩的BMP文件显然是很大的。有两种压缩方式，一，使用256色调色板，二，使用RLE连续压缩算法。调色板最多只能有256种颜色，也就是1个字节，这个调色板放在BMP文件头的位置，颜色可以是任意的真彩色。如果超过256色，系统就会选取使用频度最高的颜色，而忽略掉使用比较少的颜色，将其近似为调色板中的某个颜色。因此，在调色板的BMP文件中，除了256个真彩色之外，就是单个字节的颜色索引值了，就好像一个数组。RLE算法是一种简单有效的方式，能够将水平方向连续的颜色进行压缩，这也是Gif的原理，这在Gif文件里讲。

    Gif文件也是应运而生的，当时还处在Win31的时代，BMP是主角，但是BMP太占空间了，必须有一种高效的压缩算法来取代BMP。Gif文件必须是索引色，带一个不超过256色的调色板。通常，这个调色板的尺寸是2的最多8次方，比如一张图只用了14种颜色，但调色板只能是16色的。调色板里存放的是真彩色，而索引值和BMP的不同，根据用到的颜色多少来决定。比如我们只用了16种颜色的调色板，那索引色就是4Bit，描述了0～15的索引值，也就是说，一个字节可以放下2个点的颜色。当然，Gif格式并不是如此简单，也包含了RLE算法。通过一系列连续的颜色，将颜色做一个压缩。一个字节的高 4Bit存放索引值，低4Bit存放连续的个数，也就是说，连续数最多16个，以0～15来计算，0表示这个点之后的点不使用该颜色索引。即使连续的颜色超过16个，比如160个，那也必须拆分开来，由10组颜色索引＋颜色连续个数的字节来组成。

    说到这里，就提醒各位设计师，在使用gif图的使用注意以下两点。一，尽量少的使用颜色，不要使用太多的过渡色；二，颜色一定要水平连续存放，比如，我们可以做垂直方向的渐变色，但如果是水平方向的渐变色，那颜色连续性就消失了，压缩比就不高了。

    gif还支持0、1模式的透明色，指定某种调色板的颜色为透明色，则该色在图片上不显示，达到齿条剪裁的目的。因为要牺牲掉一个颜色，所以透明gif的最多颜色为255色，有一个作为透明色用了，但不显示。通常我们使用大红色作为透明色，因为这种颜色过艳，不是很常用，当然也可以使用其他的颜色。

    Gif文件也是应运而生的，当时还处在Win31的时代，BMP是主角，但是BMP太占空间了，必须有一种高效的压缩算法来取代BMP。Gif文件必须是索引色，带一个不超过256色的调色板。通常，这个调色板的尺寸是2的最多8次方，比如一张图只用了14种颜色，但调色板只能是16色的。调色板里存放的是真彩色，而索引值和BMP的不同，根据用到的颜色多少来决定。比如我们只用了16种颜色的调色板，那索引色就是4Bit，描述了0～15的索引值，也就是说，一个字节可以放下2个点的颜色。当然，Gif格式并不是如此简单，也包含了RLE算法。通过一系列连续的颜色，将颜色做一个压缩。一个字节的高 4Bit存放索引值，低4Bit存放连续的个数，也就是说，连续数最多16个，以0～15来计算，0表示这个点之后的点不使用该颜色索引。即使连续的颜色超过16个，比如160个，那也必须拆分开来，由10组颜色索引＋颜色连续个数的字节来组成。

    说到这里，就提醒各位设计师，在使用gif图的使用注意以下两点。一，尽量少的使用颜色，不要使用太多的过渡色；二，颜色一定要水平连续存放，比如，我们可以做垂直方向的渐变色，但如果是水平方向的渐变色，那颜色连续性就消失了，压缩比就不高了。

    gif还支持0、1模式的透明色，指定某种调色板的颜色为透明色，则该色在图片上不显示，达到齿条剪裁的目的。因为要牺牲掉一个颜色，所以透明gif的最多颜色为255色，有一个作为透明色用了，但不显示。通常我们使用大红色作为透明色，因为这种颜色过艳，不是很常用，当然也可以使用其他的颜色。

    cursor和icon文件，也跟着RGB发展到ARGB。在windows95及之前的时代，icon都是锯齿的，其图片结构和gif的类似，也支持透明gif方式，所以是齿条透明的。而到了windowsxp时代，icon可以像png那样，拥有每个点的透明度了，不过icon并不是一种压缩格式，所以ARGB的icon文件非常大。icon文件可以在单一文件内存放不同尺寸的图标，cursor文件则可以存放相同尺寸的帧。windowsxp有一点落后于mac，那就是没有支持ARGB的动画指针格式的cursor，我们只能通过第三方的软件，才能实现透明有着阴影的动画鼠标。

    说了alpha通道，不得不说一下layer。

    layer是photoshop的基本组成单位，layer其实简单的说，就是一个双向链表。什么是链表？链表是计算机数据结构的最简单概念，就好像一串珍珠项链，每颗珠子就是一个图层。链表的头是最下面的图层，链表的尾是最上面的图层，通过链表的位置来描述Z轴的上下方向。

    每个layer都会带一个不同尺寸的ARGB格式的图片，所以我们将layer翻译成“图”层。根据我们的需求，图层可大可小，这都是photoshop 内部动态调整的，设计师感觉不出来图层的大小。由于每个图层都要带一张尺寸不小的图片，所以photoshop非常消耗内存，而在设计阶段，这些消耗还不能节省，也就是不能压缩。不过在保存为psd文件后，根据png格式的算法，可以将图层进行压缩，也就得到了压缩后的psd文件。我们可以将psd理解为多个png的合集。

    每个图层除了能够控制单个点的透明度，还能够拥有一个整体透明度，我叫做MasterAlpha，Photoshop称之为Opacity。MA的取值范围也是0～255，Opacity取值0～100，每个点不仅要受到其Alpha通道的影响，还要受到图层整体透明度的影响。通过调节整体透明度，来达到单个图层的调节。

    在photoshop6之后，引入了包bag的概念，每个bag就是多个图层链表，所有的bag组合成一个bag链表。这就好像XY的二维坐标一样，只是 bag更容易管理。这个不用我费口舌了，相信各位从photoshop的使用中能够理解包的具体作用。如果从计算机数据结构的角度理解，包和图层共同组成了一个“树”，是一颗多叉树。包也可以有整体透明度，直接影响包内的所有图层的透明度。因此，就一个点的显示程度而言，受到三方面的控制，点的透明度、图层的透明度和包的透明度。

    在全色盲的眼里，世界是灰色的，树木、房屋、草地、连同阳光，都是灰色的。这就好像将一幅图片去色了，只显示256级灰度一样。最简单的去色，就是R＋G ＋B／3，这是简单的平均，不过连同Photoshop都使用这一平均公式，因为他来的快。还有一种，称为视觉灰度intensity，这是使用测光仪测试红绿蓝三种基色的亮度值，单位是流明。测试方法非常简单，全屏显示一种颜色，测光仪就可以得到不同的流民值。就好像我们的经验一样，蓝色是三种基色中最暗的一种颜色，而绿色则是最亮的颜色，红色处于中间，他们的具体比例是Red0.21 Green0.70 Blue0.09。所以，又产生了另一种去色的方式，R*0.21+Green*0.70+Blue*0.09，这是一种加权平均的算法，某些图形处理软件使用这一算法，而这也更接近于我们想要的真实灰色。根据这一原理，我们可以得知由红色和绿色合成的黄色为什么这么亮了，因为他的亮度值是0.91，已经很接近白色了。根据视觉灰度的原理，我们联系Windows通常使用的颜色，就知道为什么WindowsXP的蓝色看起来总是那么舒服。原因很简单，蓝色的亮度最低，不刺眼，同时，在蓝色上显示白字的对比度最高。而如果换成绿色的风格，则白色的文字不容易识别，也就是这个道理。所以，我们通常说的颜色对比，不仅包含了同色系的颜色取值，也包含了不同色系的亮度差别。这对于我们平面设计师而言，有很多好处，合理的使用不同的颜色，造成视觉上的亮度差异，更加符合人机工效学的原理。

druggo

好文章啊！

rushrush

>WindowsXP的蓝色看起来总是那么舒服
我觉得很丑....

fdkun

请教LZ，纯平显示器的RGB颜色分别设为多少比较好 ？