平面与网页设计中关于颜色搭配的问题

有位网友问我：色彩调整需要一定的色彩知识，但在讲解ps的有关书籍中都不讲解色彩知识（只有简单的概念介绍），在网上也很难找到这方面的资料，因此不少人只有一个色彩方面的基本概念，真要运用起来，总是感到无从下手，比方说：1、色相、饱合度、亮度与R、G、B值存在什么关系？换句话说就是R、G 、B值是如何决定色相饱合度与亮度的？2、色轮上的红、黄、绿、青、蓝、品各自的60度范围是的R、G 、B有什么特征？如果是在30、60、90、120度等一些特殊的角度是R、G、B的关系又是怎样？3、如果可能的话，请版主多讲一些色彩方面的知识。　
　
　　【一】造成这种现象教材有一定责任，但也不能全怪教材。通常教材在讲到 RGB 颜色的阶段，匠术的内容还比较浅显，而 RGB 颜色空间在这时除了讲三基色以外，还没有什么很具体的内容适合继续深入，再要讲下去就是基色通道，但讲解通道还不是时候。于是教材就采取了“偷奸耍滑”的办法，趁着读者对于颜色空间还没有完整的概念，带着你不知不觉中偷偷转向，把 RGB 空间“类比”到 HSB 颜色空间，转来讲述颜色的色相、饱和度和亮度属性。

　　从教学意义上可以说这个偷换概念的做法是成功的，有效的，在学习的初期用糊弄的办法避开难点，但也让你不知道受到了糊弄，以为一切顺理成章而且严谨周密（其实我们的小学课本、中学课本也都是这么编的）。这是“教学技巧”，无可厚非。但是如果教材能够在完成自己这一阶段后，把真相如实的告诉你，说清楚什么地方避重就轻的采取了愚民政策，并且指出存在问题那就更好了。如果能再对这些问题回过头来加以重新认识和讲述，那真是比好还好，功德圆满了。可惜好事难以成双，或许这种教学方法成了套路，传统教学培养的后代作者本身在这些地方也比较薄弱，所以就习惯性的回避这些难点。此外越难的东西感兴趣的读者越少，也是原因之一。

　　不过当我们学过了基础理论之后，就有了条件把以前被糊弄的地方搞清楚。当初是不得已，但现在有了适当的基础，如果愿意是不难做到的。那就言归正传从颜色空间说起。
　
　
　　【二】颜色通常用三个相对独立的属性来描述，三个独立变量综合作用，自然就构成一个空间坐标，这就是颜色空间。而颜色可以由不同的角度，用三个一组的不同属性加以描述，就产生了不同的颜色空间。但被描述的颜色对象本身是客观的，不同颜色空间只是从不同的角度去衡量同一个对象。

　　颜色空间按照基本结构可以分两大类，基色颜色空间和色、亮分离颜色空间。前者的典型是 RGB，还包括 CMY、CMYK、CIE XYZ 等。后者包括 YCC/YUV、Lab、以及一批“色相类颜色空间”。CIE XYZ 是定义一切颜色空间的基准，很奇妙的是，它即属于基色颜色空间，也属于色、亮分离颜色空间，是贯穿两者的枢纽。我们主要要讨论的是色、亮分离颜色空间中的子类型“色相类颜色空间”，它是把颜色分成一个表亮属性，和两个表色属性，其中有一个表色属性是色相。而色相以外的两个属性可以选用不同的变量来定义，而色相的概念不变，因此就构成一族共同使用色相属性，另加表亮属性和表色属性各一个组成的颜色空间。它们是颜色空间中的一个家族。暂且统称为 HSB 颜色空间（但后面要详细划分）。

　　因为不同颜色空间描述的相同的客观对象，所以它们之间必然存在数量的相互转换关系，但是需要十分明确，RGB 和 HSV 空间，虽然在教材中狐狸糊涂的把他们纠缠在一起，但它们实质上是概念完全不同的颜色空间，它们的共同点是比较常用，也比较容易直观理解，但这是表面的联系。

　　只有以 R、G、B 为变量的直角坐标空间才称为 RGB 颜色空间，在 RGB 空间中，三个独立属性变量性质对等，相互加减运算有意义，任何涉及色相、饱和度等等为基本颜色属性的，还有跟“色轮”一类概念直接关联的、用角度表示颜色的等等，都是 HSB 颜色空间，绝没有混淆的余地。在 HSB 颜色空间中，三个颜色属性性质不同，你不可能把色相和饱和度加在一起，就好比时间不能与面积相加，恐龙不能与蚂蚁杂交。

　　我们还记得传统教材是通过色轮上几个基色和二级色与色轮角度位置的对应关系在两个颜色空间之间偷换概念的，但存在对应关系与两者相等是完全不同的概念。有常识的人都知道，人民币和美圆有兑换关系，但人民币是中国人民银行发祥的，美刀是美国联邦储备银行发行的，各属各自的金融体系。能兑换并不等于人民币就是美刀。RGB 与 HSB 颜色空间与此同理。

　　 zhangwei5009 朋友提的是个好问题，说明已经清楚的意识到 RGB 与 HSB 颜色空间实质上的区别，也明确了两者之间必然存在客观的转换规律，并思考和探询两者之间的定量转换关系。提出这样问题的学习者不太多（我记得 zhangwei5009 很早就在短消息里提过类似问题），传统 PhotoShop 教材中除了千篇一律的重复六个基色、补色点以外，很少有教材在这个问题上有明确说法。

　　【三】颜色空间中没一个坐标点对应一种颜色，颜色空间要求颜色与空间坐标一一对应，即不能某一个点对应多种颜色，也不应该一种颜色对应多个坐标点。不过在 PhotoShop 这样一个实用工具中，在特殊情况下存在多个坐标点对应实质上相同颜色的现象，这是因为某些颜色空间的形状十分离奇古怪，为使用方便性考虑，做了一些权宜让步，把奇异的颜色空间形状虚拟为规矩的形状。这是一种程序设计技巧，因为这里主要偏重颜色理论讨论，这种应用技巧搁置不谈（但我们点明有此一说，而不是假装它不存在）。

　　关于颜色空间的宏观概念暂且打住，还是具体来看主要讨论的“色相类颜色空间”。前面已经概述过，色相类颜色空间由色相属性、另一个表色属性（通常称为“饱和度”即颜色纯度）和一个表亮属性构成，基本上它的三个属性是通过 RGB 空间的属性，即三个基色色阶值来定义的。色相的定义总是恒定，而另两个属性则有多种定义方式。

　　也就是说，把颜色这样一个综合概念拆分成色相和非色相两部分独立属性，这是固定的步骤，再把非色相属性拆分成另外两个独立属性，——有各种各样的拆分方式，因此构成一个家族，每种方式都是这个家族中的一个成员。那么具体到 PhotoShop 中的 HSB 颜色模式，使用是色相和哪两种属性呢，如果问题能这么问，那就谢天谢地了。PhotoShop 中对于饱和度属性与表亮属性的使用，与“色相类颜色空间”家族的庞杂关系同样混乱不堪，涉及 PhotoShop 中表示饱和度的有三种（或者说“两种半”）不同的“饱和度”属性，而表亮属性则有至少有六种，其中一部分相互结合并与色相属性组合，——据我目前所知——构成了至少三种实质上不同的“HSB 模式”也就是“HSB 颜色空间”。

　　具体说，取色器和“信息”调板上的“HSB”属于理论上“色相类颜色空间”中称为“HSB/HSV”的颜色空间；
　　 “色相／饱和度”命令中的，是另外一种通常称为“HSL/HLS”的颜色空间，它的饱和度与“亮”属性的定义与上面差别颇大；“色相”、“饱和度”等图层混合模式中涉及的，又是另一种“色相类颜色空间”，这种组合没有通用名字，可能是 Adobe 系列软件自行定义和专用的颜色空间。

　　因为“HSB”这个名称已经给了第一种专用，为区别期间，以后统称“色相类颜色空间”我们改用“HS*”来表示。理论上的 HS* 颜色空间还有更多种变化，比较大的差别产生在表亮属性的定义，这不仅是 PhotoShop 中令人头疼的概念，也是整个颜色理论中乱如一团麻的概念。不仅六种以上的“亮”概念没有固定的术语将它们严格区分，而且它们表示发亮的数值也相互出入很大，例如两种颜色在某种“亮度”意义下认为亮度相等，而换一种“亮度”概念来看，他们的亮度可能相差九倍。　
【四】所以表面看 PhotoShop 的颜色概念精密和谐，实际上，在 PhotoShop 内部它们比迷宫还乱。但是 Adobe 根本就不希望你知道这些，同时也没有提供适合精确描述这些空间特性的基本概念。

　　我们说“PhotoShop 是根据精密的光学理论设计的”，这话没错，这些东西也不是 PhotoShop 搞怪而是“精密的光学理论”就是如此，它的确有精密的部分，但我们也不要隐瞒它糟糕的、令人无所适从的部分。那么是科学有问题么？科学家是糊涂蛋、睁眼瞎么？也不是。关键的原因是颜色这种东西太紧密的涉及到人的主观感觉，如果不是为了将就我们的感官和心理，那么光的强度用能流密度表示，颜色用光谱成分表示，这种客观的光学理论完美无缺。就是因为要适应人类视觉这种特性古怪、翻覆无常、莫名其妙的感光设备，并且以人为本为人服务，颜色理论才搞得一塌糊涂。

　　人类心理对于颜色感知的主观影响不说了，就说眼睛这种感光器官，它有非常非常宽广的感光范围，可感受的光能强度跨越十四个数量级以上，远远大于任何人造的感光设备，但是在不同的亮度范围，感受的敏感度却相差悬殊，而且它由两个部分衔接起来的（明视视觉和暗视视觉），由两种不同感光细胞分别负责（视网膜上的锥状细胞和杆状细胞），两种细胞的特性相差很大，同时人眼对于颜色的感知相对迟钝得多，它不能分辨三色混合与太阳光全光谱混色的区别，所以我们才能用三基色的混合来冒充自然光谱，不然的话（如果我们的眼睛足够“精密”和“敏锐”），无论是彩色印刷，彩色摄影，彩色电视和显示器……一切现有的人造彩色图象，就都不是这么简单了，就会比现在困难很多，成本也会高昂得多。

　　所以有一个戏谑的说法，三基色技术是人类是借用自身的“缺陷”自己占自己便宜。
　
　　【五】权当是枯燥话题之前的一点娱乐，下面的东西就慢慢的晦涩了。上文说到，PhotoShop 中涉及的 HS* 类颜色空间实际上有三种，其实细心的使用者可能早已感到了。例如前几天举的一个最简单不过的例子来批驳 PhotoShop 手册中关于“色相”，“饱和度”一类混合模式的定义，PhotoShop 中自相矛盾的根源，就是因为所谓“色相”，“饱和度”的概念在不同工具和命令中是彼此不同的，此“饱和度”非彼“饱和度”，正如清人对属所云，“蔺相如司马相如，名相如实不相如”。

　　还有“色相／饱和度”命令中，我们单独调整“饱和度”或“明度”滑标同时查看信息调板，S 和 B 属性的变化规律完全不是按照正常概念所预期的那样变化，以至于对于最普通的“色相／饱和度”命令我们很长时间都难以找到它的确切规律。这些还只是表面现象，理论的分析能彻底找到它们在基本概念上到底差别在什么地方。

　　幸好我们主要关心的概念是色相，在各种不同的 HS* 空间中，色相的概念是不变的，而“色相／饱和度”命令加上“信息”调板，恰好是分析色相与 RGB 颜色空间属性的最好工具。在实际观察分析前需要指出一个分析 HS* 颜色空间概念的关键点，在我们熟悉的 RGB 颜色空间中，颜色决定于三个通道的色阶值组合，我们关心的是三个通道色阶值的[b]实际数值[/b]或[b]绝对数值[/b]，红多少绿多少蓝多少，但是，在探索 HS* 空间基本颜色属性时，分析它们与 RGB 属性之间的关系时，要把注意的重点放到 RGB 颜色色阶的[b]相对数值[/b]上，也就是 R、G、B 三者谁大、谁中、谁小，这是理解 HS* 空间属性与 RGB 关系的顶尖机密。

　　只要把脑筋换到大中小关系上，那么色相与 RGB 之间的对应关系不攻自破。我们首先简要复习一下中学中的排列组合，三个数值按照大中小顺序排列，可能的结果有六种，就不一一列举了。而颜色的色相属性恰恰是由这六种排列决定的，R、G、B 三者中最大的那个决定色相的主要基调，中间的和最小的决定实际颜色与主要基调的偏离程度，中间的和最小的两个对于色相有相互“抵消”作用，即两者相等时对色相的影响正好抵消，色相就等于主要色调的色相。

　　我们说的“主要色调”，就是色轮上间隔 60°分布的红黄绿青蓝品——基色和其补色。60°，一种六种基色和补色，还有大中小关系的六种可能，这些六六大顺的组合是碰巧得来的吗，其实不是，实际上色相概念本来就是照着这种规律来定义的，种瓜得瓜，求仁得仁，一点也不奇怪（我知道你还是感觉有点奇妙）。

平面与网页设计中关于颜色搭配的问题相关推荐

网页设计中的颜色应用
用户界面的构建过程中,比较耗时的事情是色彩的选择.真正能够和整个设计项目贴合.能够覆盖整个设计中所有元素需求的配色,需要在设计中不断的调整和验证.一套强大而有效的配色方案,可能需要好几个小时来回的打磨 ...
neo4j图形算法综合指南_网页设计中色彩使用的综合指南
neo4j图形算法综合指南 There is a lot of material about color to be found online. But none of us has the time ...
html颜色渐变讲解,20个网页设计中渐变色运用实例欣赏
原标题:20个网页设计中渐变色运用实例欣赏出处:设计之家链接:http://www.sj33.cn/digital/wysj/201608/46001.htmlWP Crew https://wp ...
计算机在网站设计中的应用,网页设计中平面设计的应用及其作用
摘要:目前中国经济不断发展, 计算机如今也发展成为了人们生活水平所离不开的一项应用.在这种情况下平面设计出现在了人们的视野中.网页设计在现代生活水平的影响下产生.它既是现代生活中平面设计的延伸和发展, ...
网页设计中的灰色调配色技巧
网页设计中的灰色调配色技巧灰色介于黑色和白色之间,中性色.中等明度.无色彩.极低色彩的颜色.灰色能够吸收其他色彩的活力,削弱色彩的对立面,而制造出融合的作用. 灰色是一种中立色,具有中庸.平凡. ...
网页设计中透明效果的使用技巧
运用好透明效果是提高网页设计水准的重要方法之一.如同使用其他方法一样,设计师们有很多种手段将透明效果运用到网页中,今天这篇文章就来好好和您分享一下关于"透明"的实用小技巧哟:) 在 ...
浅谈网页设计中的构图
网页给人最直观的感受就是它的页面框架与构造,就像一座大楼的主体框架与形态,你可能记不起东方明珠塔和艾菲尔铁塔是用什么颜色或什么材料涂的外墙,但我想你一定记得起它们的什么样的形状.同样,网页设计中的构 ...
ps在html中的应用程序,Photoshop在网页设计中的应用
[关键词] Photoshop:网页:实例:布局 [中图分类号] G623.9 [文献标识码] C [文章编号] 1004―0463(2016)23―0120―01 随着信息技术的发展,网页制作成为时 ...
ps在html中的应用程序,Photoshop在网页设计中的应用与方法
现在已经进入数字化信息时代,随着网络的飞速发展,人们的生活逐渐迈向了新时代,无法想象,哪天没有了网络会怎样,呵呵,开个玩笑了,网络只会一天比一天精进,所以网络知识的普及是必须的! 1.图像局部截取和图 ...
转: 网页设计中的一些色彩搭配技巧
在网页设计中色彩搭配是一件很重要的事情,要是色彩搭配好了,能让整个网站看起来清新悦目,眼前一亮的感觉.要是色彩搭配混乱,会让人看着很吃力或者整个网站没有亮点.不吸引人.下面我说说自己在网页设计中积 ...

平面与网页设计中关于颜色搭配的问题

平面与网页设计中关于颜色搭配的问题相关推荐

最新文章

热门文章