色彩基础知识及案例分析.ppt

色彩基础知识、案例分析,色彩基础知识： 色彩是什么？、 色彩光学原理、三原色、色彩的三要素、色彩分类、常用颜色模式 孟塞尔颜色系统 色彩涵义 色彩搭配： 单色搭配、近似色搭配、互补色搭配、原色搭配、分裂互补色搭配。 色彩在整个图中的使用比例，如何准确定位你的色彩。 案例分析： 什么样的投影色显得更真实？ 什么样的渐变色看起来更舒适？,色彩常识,色彩是什么 色彩是可见光的作用所导致的 视觉现象。光是一种电磁波， 不同波长的可见光投射到物体上， 一部分被吸收，一部分被反射进入人眼，大脑再把这种刺激反映成色彩信息。所以说，没有光，就没有色彩可言。 在一般情况下，入射光都是由光源发出的包含各种颜色的自然光，当这些光射到不同的物体上，物体对光的吸收和反射情况并不都相同，于是出现了颜色的差异。我们看到物体呈现白色，是因为物体将射到它上面的所有光都反射了，这些光叠加在一起是白色的，又射到我们眼睛里，所以我们说，这个物体是白色的。而看到物体呈现黑色也是一样的道理，只是黑色正好相反，物体将射到它上的所有光都吸收了，我们看不到从它上发出的任何反射光，所以认为它是黑色。,色彩光学原理,1665年，牛顿(IsaacNewton)进行了太阳光实验， 让太阳光通过窗板的小圆孔照射在玻璃三角棱镜上，光 束在棱镜中折射后，扩散为一个连续的彩虹颜色带，牛 顿称之为光谱，表示连续的可见光谱。而可见光谱只是 所有电磁波谱中的一小部分。 牛顿认为白光(太阳光)使复杂的，由无数种不同的 光线混合，各种光线在玻璃中受到不同程度的折射。 棱镜没有改变白光而只是将它分解为简单的组成部分， 把这些组成部分混合，能够重新恢复原来的白色。利 用第二块棱镜可以将扩散的光再次合成为白光。,三原色,三原色应用领域的三原色三基色是指红,绿,蓝三色,各自对应的波长分别为700nm,546.1nm,435.8nm; 三原色原色，又称为基色，即用以调配其他色彩的基本色。 三原色通常分为两类， 一类是色光三原色，另一类是颜料三原色。但在美术上又把红，黄，蓝定义为色彩三原色。 配图中左图是光的三原色，右图是颜料的三原色。 原色的加减性质原色以不同比例混合时，会产生其他颜色。在不同的色彩空间系统中，有不同的原色组合。可以分为“叠加型”和“消减型”两种系统。,色光三原色,人的眼睛是根据所看见的光的波长来识别颜色的。 可见光谱中的大部分颜色可以由三种基本色光按不同的比例混合而成， 这三种基本色光的颜色就是红（Red）、绿（Green）、 蓝（Blue）三原色光。这三种光以相同的比例混合、且达到一定的强度， 就呈现白色（白光）；若三种光的强度均为零， 就是黑色（黑暗）。这就是加色法原理，加色法原理被广泛应用于电视机、监视器等主动发光的产品中。 使用色光三原色并不足以重现所有的色彩，准确地说法应该是“将三原色光以不同的比例复合后，对人的眼睛可以形成与各种频率的可见光等效的色觉。”只有那些在三原色的色度所定义的颜色三角内的颜色，才可以利用三原色的光以非负量相加混合得到。,颜料三原色,而在打印、印刷、油漆、绘画等靠介质表面的反射被动发光的场合， 物体所呈现的颜色是光源中被颜料吸收后所剩余的部分， 所以其成色的原理叫做减色法原理。 减色法原理被广泛应用于各种被动发光的场合。 在减色法原理中的三原色颜料分别是青（Cyan）、品红（Magenta）和黄（Yellow）。 例如黄色与青色混合可以产生绿色，黄色与品红色混合可以产生红色，品红色与青色混合可以产生蓝色。当这三种原色以等比例叠加在一起时，会变成灰色；若将此三原色的饱和度均调至最大并且等量混合时，理论上会呈现黑色，但实际上由于颜料的原因呈现的是浊褐色。 正因如此，在印刷技术上，人们采用了第四种“原色”黑色，以弥补三原色之不足。这套原色系统常被称为“CMYK色彩空间”，亦即由青(C)品红(M)黄(Y)以及黑(K)所组合出的色彩系统。,美术色彩三原色：红，黄，蓝 红、黄、蓝 为人们加入了感觉实际，是实际上的三原色。 美术教科书讲的是绘画颜料的使用，色彩调色是 红、黄、蓝为三原色。 美术色彩色光三原色加色法原理 橙绿紫 美术色彩颜料三原色减色法原理 红黄蓝 美术色彩三原色组成的六色体系 红黄蓝 橙绿紫 给人以实际色彩感受，符合客观实际，黄、品红、青是科学上精确的三原色。不符合人的实际色彩感受，太吹毛求疵，不符合实际使用，如品红，先辈都没有给她以一个字的名字命名。 综上所述，无论是从原色的定义出发，还是以实际应用的结果验证都足以说明，黄、品红、青是科学上精确的三原色。红、绿、蓝 黄、品红、青是科学上精确的六色组合。不符合人的实际色彩感受，不符合实际使用。,美术上的三原色,色彩的三要素,色彩的三要素是指色彩的色相、明度和纯度（饱和度）。,色彩的三要素,色彩的三要素是指色彩的色相、明度和纯度。 色相 色相是色彩的“相貌”，一般根据其特征命名，如黄、绿、红等。当黄色加入白色之后，显出不同的奶黄、麦芽黄等，但它的黄色性质不变，依然保持黄色的色相。 最初的基本色相为：红、橙、黄、绿、蓝、紫。在各色中间加插一两个中间色，其头尾色相，按光谱顺序为：红、橙红、黄橙、黄、黄绿、绿、绿蓝、蓝绿、蓝、蓝紫、紫、红紫十二基本色相。,色彩的三要素,明度 色彩的明暗程度，可以用黑、白、灰的关系来表述。一个色彩加入白色越多，明度也就越高，加入黑色越多，明度就越低。 明度就是色彩的明暗差别、光亮程度，所有色彩都有自己的光亮。其中，暗色被称为低明度，亮色被称为高明度。 对于有彩色的明度差别包括两个方面，一是指某一色相在混入黑或者白色后，产 生的深浅变化。,纯度是色彩的饱和鲜艳度。光色中的红、橙、黄、绿、青、蓝、紫都是高纯度的。 一个色彩只要不加入其他色彩，就是高纯度，其他色彩且加得越多，纯度就越低。 黑、白、灰是无彩色，其纯度等于零。,色彩的三要素,由于颜料三原色,红、黄、蓝比较符合客观实际。所以以下配色方案都根据美术上的来三原色做的配色方案。,色彩的三要素,色彩分类,1.原色：三原色由三种基本原色构成。原色是指不能透过其他颜色的混合调配而得出的“基本色”。通原色能合成出其它色，而其他色不能还原出原色。 2.间色：由两个原色混合得间色。 3.复色：由原色与间色混合，或间色与间色混合而成的色彩。复色中包涵全部三原色，只是三原色的比例不同。,常用颜色模式,常见的色彩模式有RGB，CMYK，HSB几种。 1加色法三原色（RGB）色彩模式 加色法又称为RGB颜色模型，也是绝大多数电子显示频运用的模式。 RGB是从颜色发光的原理来设计定的，通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯，当它们的光相互叠合的时候，色彩相混，而亮度却等于两者亮度之总和，越混合亮度越高，即加法混合。 蓝（B）+ 绿（G）= 青（C） 绿（G）+ 红（R）= 黄（Y） 红（R）+ 蓝（B）+ 品（M）（又称：洋红） 蓝（B）+ 绿（G）+ 红（R）= 白色,常用颜色模式,2减色法(CMYK)色彩模式 CMYK通常指的是印刷色彩系统，颜料的特性与色光相反，越叠加越黑，所以颜料的三原色必须是可以吸收R,G,B的色彩，也就是RGB的补色：青，洋红，黄色，由于不存在完美的颜料，所以完美的黑色是无法通过叠加调和的，所以在这三色基础上加入了黑色。RGB与CMYK虽然是不同的色彩系统，但通常情况下，他们是可以互相转化的。 蓝（B）+ 青（C）= 绿（G） 青（C）+ 品（M）= 蓝（B） 品（M）+ 蓝（B）= 红（R） 蓝（B）+ 青（C）+ 品（M）= 黑色 所以减色法也称色彩重叠。也可理解为：凡两种颜料叠加，色光减少者为减色法。,常用颜色模式,HSB模式的色彩原理更符合色彩属性原则即色相，明度与饱和度。这也更符合人眼的判断原理。H代表色相Hue,S代表饱和度Saturation,B代表亮度Brightness。在实际使用的时候较RGB与CMYK模式都要方便一些，在此推荐设计师在调色的时候可以尝试这用一下。绘图软件通常都装有这个色彩模式。,常用颜色模式,色相（H,hue）：在0360°的标准色轮上，色相是按位置度量的。在通常的使用中，色相是由颜色名称标识的，比如红、绿或橙色。黑色和白色无色相。 饱和度（S,saturation）：表示色彩的纯度，为0时为灰色。白、黑和其他灰色色彩都没有饱和度的。在最大饱和度时，每一色相具有最纯的色光。取值范围0100%。 亮度（B,brightness或V,value）：是色彩的明亮度。为0时即为黑色。最大亮度是色彩最鲜明的状态。取值范围0100%。,孟塞尔颜色系统,孟塞尔颜色系统（Munsell Color System）是色度学（或比色法）里透过明度（value）、色相（hue）及色度（chroma）三个维度来描述颜色的方法。这个颜色描述系统是由美国艺术家阿尔伯特孟塞尔（Albert H. Munsell，18581918）在1898年创制的，在1930年代为USDA采纳为泥土研究的官方颜色描述系统。至今仍是比较色法的标准。,孟塞尔颜色系统,经度=色相（hue）。 南北轴=明度（value），从全黑（N0）到全白（N10）。 距轴的距离=色度（chroma），表示色调的纯度。,孟塞尔颜色系统,具体颜色的标识形式为：色相+明度+色度。例如5B 5/10是中等明度（5），高色度（10）的正蓝色（5B）。,色彩涵义,其实色彩本身是没有意义的，但色彩可以使我们联想到某种事物，或某段回忆，进而影响我们的情绪。人其实是靠着经验与习惯生活的，而色彩能够使我们联想到曾经的经验与习惯，于是色彩也就有了意义，这意义不是色彩本身的，而是色彩背后所代表的事物带给我们的。色彩是很难被理性衡量的，不同的人看到色彩有各自不同的感受。,色彩的对比调和,色彩的对比调和是一种色彩使用的基本技能。其中，我们需要掌握以下几个概念。 暖色系 暖色系是指色相环中包括黄、红、褐、赭等色彩在内的色彩系列。暖色系给人以热烈、欢快、温暖、奔放的感觉。,色彩的对比调和,冷色系 冷色系是包括绿色、蓝色、紫色等色相在内的色彩系列，它给人以清冷、宁静、凉爽的感觉。冷色和暖色并非是绝对的，一些冷色在它所属的冷色系中通过对比，会具有偏暖的倾向；暖色则有可能通过与更暖颜色的对比而取得偏冷的倾向。,色彩的对比调和,补色对比 冷色系是包括绿色、蓝色、紫色等色相在内的色彩系列，它给人以清冷、宁静、凉爽的感觉。冷色和暖色并非是绝对的，一些冷色在它所属的冷色系中通过对比，会具有偏暖的倾向；暖色则有可能通过与更暖颜色的对比而取得偏冷的倾向。 由于补色对比的作用，橙色和绿色互相强调这幅作品有多少颜色？事实上只有三种：橙色、绿色和深蓝色,色彩的对比调和,同类色 相同类别的色彩称为同类色，如柠檬黄、淡黄、中黄、土黄，就属于同类色。 近似色 同类别色彩或相近的不同类别色彩称为近似色，如桔黄与桔红、朱红与大红就是近似色，而桔红与朱红、中黄与桔黄也是近似色。不同类别但明度相近的冷暖色彩也是近似色，如淡绿与湖蓝、群青与紫、曙红与紫罗兰等。 协调色 协调色是指所使用的色彩在形式、内容、表现、手段上，都处于相互衬托、相互制约、协同一致的搭配关系，如原色与间色、间色与复合色、复合色与灰色的协调等。,色彩搭配,搭配方式 常见的搭配方式有同类色搭配，近似色搭配，补色搭配，分裂补色搭配，三角色搭配。如下图。,色彩搭配,单色搭配(0°): 由一种色相的不同明度组成的搭配，这种搭配很好的体验了明暗的层次感。,2019/9/2,色彩搭配,近似色（60°)：色环上距离相距非常近的色彩。 近似色搭配：相邻的两到三个颜色称职为近似色。如下图（橙色/褐色/黄色），这种搭配比较让人赏心悦目，低对比度，较和谐。,色彩搭配,互补色（180°)：（对比色），色轮上距离最远相对的色彩。 色环中相对的两个色相搭配。颜色对比强烈，传达能量、活力、兴奋等意思，补色中最好让一个颜色多，一个颜色少。如下图（紫色和黄色）。,色彩搭配,.原色的搭配（120°)：大部分是在儿童产品上，色彩明快，这样的搭配在欧美也非常流行，如蓝红搭配，frickr的logo以及 麦当劳的logo色与主色调红黄色搭配等。,色彩搭配,分裂互补色（120180°)：分裂补色搭配：同时用补色及类比色的方法确定颜色关系，就称为分裂补色。这种搭配，既有类比色的低对比度，又有补色的力量感，形成一种即和谐又有重点的颜色关系，如下图，红色文字就显得特别的铿锵有力，特别突出。,色彩使用比例,色彩的搭配方法有很多种，这里介绍一种我个人比较认同的方式。日本设计师提出70%，25%，5%的配色比例原则，画面中70%为底色，面积最大的一块，往往画面的色调是有底色决定的。25%面积的为主色，画面的核心区域多使用主色区。5%为强调色，强调色在画面中起到华龙点睛的作用，强调色多使用与主色对比度较大的颜色，也可以尝试利用色彩的互补关系来突出。,色彩使用比例,当然，在实际工作中，很多时候画面不会只有3中颜色。遇到这种情况时，主张在现有的配色方案中进行切割，从而不影响配色比例。,2019/9/2,如何准确定位你的色彩,前面分析的是通过颜色去感觉情绪。这里简单写，如何根据产品去捕捉色彩，也就是所谓的MOOD BOARD(情绪版)。 情绪版是指对要设计的产品以及相关主题方向的的色彩，影像，图片等其他材料的收集，从而引起某些情绪反应， 以此作为设计方向或者是形式的参考。（具体请参考情绪版(Mood board)操作流程的新思考晓千） 1.原生关键词选择 首先，通过对产品的理解与认识，以及用户调研等得出体验关键词。,2019/9/2,如何准确定位你的色彩,2.衍生关键词 针对所得到的关键词，扩容信息，通过头脑风暴画出关键词的思维导图，寻找扩展关键词。 3. 收集相关图片，提取图片生成情绪版 通过“原生关键词”和“衍生关键词”，通过网络渠道，收集了大量的对应的素材图并配合定性访谈。 4. 衍生关键词的分析分维诠释,2019/9/2,如何准确定位你的色彩,5. 对情绪版进行“色彩分析”和“质感分析”,2019/9/2,网页案例剖析,“网页配色不宜超过三种。” 真理，这没错，但更多是从色相（赤橙黄绿青蓝紫等不同颜色）上来说的。 色相差异明显，主要色彩的选取就比较好办，常见的有对比色、临近色、冷暖色调互补等方式，可以简单设定，或直接从成功作品中借鉴主辅色配比都可以，比如常见的朱红点缀深蓝、明黄点缀深绿等。 但通常，我们需要面对的设计需求在色彩分配上会有更多的问题出现：,2019/9/2,网页案例剖析,2019/9/2,网页案例剖析,如上所示，根据网页信息的多寡，会有更多色彩区域的层级划分和文字信息层级区分需求，那么在守住“网页色彩（相）不超过三种”的原则下，只能寻找更多同色系的色彩来完善设计，也就是在“饱和度”和“明度”上做文章。 这也就是本文为解决这一问题所要分享的“天然”配色技巧：叠柔配色法。 叠柔配色技巧分享 这个方法非常简单，无需知道三角函数、四则运算，无需理解色彩指数和直方图，甚至不用了解色阶曲线和亮度强弱甚至，你可以对色彩毫无知觉。 只需要明白三个关键词：叠加、柔光和透明度（填充）。 如果连这三个关键词都不甚明了，那就记住他们所在的位置（下图）：,2019/9/2,网页案例剖析,2019/9/2,网页案例剖析,注意：透明度与填充略有不同，填充不会影响到“混合选项”的效果，而透明度则是作用于整个图层。 配色技巧的原理： 即：用纯白色（#ffffff）和纯黑色（#000000）通过“叠加”和“柔光”的混合模式（效果类似调整饱和度和明度），在任意一个色彩上得到最匹配的颜色（然后通过调整透明度选取最适合的辅色）。,2019/9/2,2019/9/2,网页案例剖析,（上图示例中，调整叠/柔模式的黑白色块的不同透明度（取10%到100%整数值为例）就可以得到差异较明显的40种配色，通过这种技巧，理论上每一种颜色都可以轻易获得无穷尽的“天然配色”，并且是“0失误”！） 由于叠加和柔光模式对图像内的最高亮部分和最阴影部分无调整，因此该配色方法对纯黑色和纯白色不起作用。 设计实战演示： 要不要像上面图示看起来的那样复杂？ 不用，只需要理解了上面的方法，就可以忘记图示，在你的设计工作中自由发挥！ 简单三步： 一个黑或白色，或黑白渐变（可以是点、线、面甚至字体） 混合模式选择叠加或柔光 调整透明度（1%-100%随意，省心的做法是直接键入一个整数值，比如：轻质感类页面可以选择20%-40%，重质感感类可以键入60%或以上）,2019/9/2,网页案例剖析,（无论你采用何种主色，用黑白色彩叠加或柔光，你都可以轻松自如的获得完美匹配的整套色系）,2019/9/2,网页案例剖析,这并不仅仅适用于色域划分或提取几个辅色，如下图：字体颜色、细节线条、按钮渐变、边角高光、描边阴影都可以用黑白色肆意挥洒！,2019/9/2,网页案例剖析,方法延伸（细节篇） 假如将该方法运用到一个按钮上 通过混合选项中的“阴影、外发光、描边（不适用叠柔法）、内阴影、内发光”可以自由的刻画5层像素级细节（当然，通常在实际的使用中刻画1到3层即可）。,2019/9/2,2019/9/2,网页案例剖析,且无论形状、色彩如何变化，这些细节都如影随形、色彩都随变而变可节省大量重调细节或盲目选取配色的时间！ 细节、品质和效率，一石三鸟，兼而得之！ （看到设计圈有讨论“网页雕花不可取”的课题，假如让细节成为习惯，让美感成为直觉，雕花也便只是普通设计行为而已。）,