《视觉营销》课件-第三节 视觉色彩

第三讲视觉色彩重难点分析APARTONE重难点：色彩基础知识色彩是什么、光学原理、三原色、色彩三要素、色彩分类、常用颜色模式、孟塞儿颜色系统、色彩涵义。色彩搭配1、单色搭配、近似色搭配、互补色搭配、原色搭配、分裂互补色搭配。2、色彩在整个图中的使用比例，如何准确定位你的色彩。案例分析课程讲解BPARTTWO色彩常识色彩是什么

色彩是可见光的作用所导致的视觉现象。光是一种电磁波，不同波长的可见光投射到物体上，一部分被吸收，一部分被反射进入人眼，大脑再把这种刺激反映称色彩信息。所以说，没有光，就没有色彩可言。

美术上的三原色美术色彩三原色：红、黄、蓝红、黄、蓝为人们加入了感觉实际，是实际上的三原色。美术教科书讲的是绘画颜料的使用，色彩调色是红、黄、蓝为三原色。美术色彩色光三原色——加色法原理橙绿紫美术色彩颜料三原色——减色法原理红黄蓝美术色彩三原色组成的六色体系红黄蓝橙绿紫给人以实际色彩感受，符合客观实际，黄、品红、青是科学上精确的三原色。不符合人的实际色彩感受，太吹毛求疵，不符合实际使用，如品红，先辈都没有给她以一个字的名字命名。综上所述，无论是从原色的定义出发，还是以实际应用的结果验证都足以说明，黄、品红、青是科学上精确的三原色。红、绿、蓝、黄、品红、青是科学上精确的六色组合。不符合人的实际色彩感受，不符合实际使用。色彩的三元素色彩的三元素是指色彩的色相、明度和纯度（饱和度）色彩的三要素色彩三要素是指色彩的色相、明度和纯度①色相色相是色彩的“相貌”，一般根据其特征命名，如黄、绿、红等。当黄色加入白色之后，显出不同的奶黄、麦芽黄等，但它的黄色性质不变，依然保持黄色的色相。最初的基本色相为：红、橙、黄、绿、蓝、紫。在各色中间加插一两个中间色，其头尾色相，按光谱顺序为：红、橙红、黄橙、黄、黄绿、绿、绿蓝、蓝绿、蓝、蓝紫、紫、红紫——十二基本色相。色彩的三要素②明度色彩的明暗程度，可以用黑、白、灰的关系来表述。一个色彩加入白色越多，明度也就越高，加入黑色越多，明度就越低。明度就是色彩的明暗差别、光亮程度，所有色彩都有自己的光亮。其中，暗色被称为低明度，亮色被称为高明度。对于有色彩的明度差别包括两个方面，一是指某一色相在混入黑或者白色后，产生的深浅变化。色彩的三要素③纯度纯度是色彩的饱和鲜艳度。光色中的红、橙、黄、绿、青、蓝、紫都是高纯度的。一个色彩只要不加入其他色彩，就是高纯度，其他色彩且加得越多，纯度就越低。黑、白、灰是无彩色，其纯度等于零。色彩的三要素由于颜料三原色，红、黄、蓝比较符合客观实际。所以以下配色方案都是根据美术上的来三原色做的配色方案。色彩分类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）：在0-360的标准色轮上，色相是按位置度量的。在通常的使用中，是由颜色名称标识的，比如红、绿或橙色。黑色和白色无色相。饱和度：标识色彩的纯度，为0时为灰色。白、黑和其他灰色色彩都没有饱和度的。在最大饱和度时，每一色相具有最纯的色光。取值范围0—100%。亮度：是色彩的明亮度。为0时即为黑色。最大亮度是色彩最鲜明的状态。取值范围0—100%。常用颜色模式孟塞尔颜色系统孟塞儿颜色系统是色度学（或比色法）里透过明度、色相及色度三个维度来描述颜色的方法。这个颜色描述系统是由美国艺术家阿尔伯特.孟塞尔在1898年创制的，在1930年代为USDA采纳为泥土研究的官方颜色描述系统。至今仍是比较色法的标准。色彩涵义其实色彩本身是没有意义的，但色彩可以使我们联想到某种事物，或某段记忆，进而影响我们的情绪。人其实是靠经验与习惯生活的，而色彩能够使我们联想到曾经的经验与习惯，于是色彩也就有了意义，这意义不是色彩本身的，而是色彩背后所代表的事物带给我们的。色彩是很难被理性衡量的，不同的人看到色彩有各自不同的感受。色彩的对比调和色彩的对比调和是一种色彩使用的基本技能。其中，我们需要掌握以下几个概念。1、暖色系暖色系是指色相环中包括黄、红、褐、赭等色彩在内的色彩系列。暖色系给人以热烈、欢快、温暖、奔放的感觉。色彩的对比调和2、冷色系冷色系是包括绿色、蓝色、紫色等色相在内的色彩系列，它给人以清冷、宁静、凉爽的感觉。冷色和暖色并非是绝对的，一些冷色在它所属的冷色系中通过对比，会具有偏暖的倾向；暖色则有可能通过与更暖色的对比而取得偏冷的倾向。色彩的对比调和2、冷色系冷色系是包括绿色、蓝色、紫色等色相在内的色彩系列，它给人以清冷、宁静、凉爽的感觉。冷色和暖色并非是绝对的，一些冷色在它所属的冷色系中通过对比，会具有偏暖的倾向；暖色则有可能通过与更暖色的对比而取得偏冷的倾向。由于补色对比的作用，橙色和绿色相互强调这幅作品有多少颜色？事实上只有三种：橙色、绿色和深蓝色色彩的对比调和4、同类色相同类别的色彩称为同类色，如柠檬黄、淡黄、中黄、土黄，就属于同类色。5、近似色同类别色彩或相近的不同类别色彩称为近似色，如桔黄与桔红、朱红与大红就是近似色，而桔红与朱红、中黄与桔黄也是近似色。不同类别但明度相近的冷暖色彩也是近似色，如淡绿与湖蓝、群青与紫、曙红与紫罗兰等。6、协调色协调色是指所使用的的色彩在形式、内容、表现、手段上，都处于相互衬托、相互制约、协同一致的搭配关系，如原色与间色、间色与复合色、复合色与灰色的协调等。色彩搭配搭配方式常见的搭配方式有同类色搭配，近似色搭配，补色搭配，分裂补色搭配，三角色搭配。如右图。色彩搭配单色搭配由一种色相的不同明度组成的搭配，这种搭配很好的体验了明暗的层次感。色彩搭配近似色（60°）：色环上距离相距非常近的色彩近似色搭配：相邻的两到三个颜色称为近似色。如下图（蓝色/明蓝色）这种搭配比较让人赏心悦目，低对比度，较和谐。近似色色彩搭配互补色（180°）：（对比色），色轮上距离最远相对的色彩。色环中相对的两个色相搭配。颜色对比强烈，传达能量、活力、兴奋等意思，补色中最好让一个颜色多，一个颜色少。如下图（紫色和黄色）。色彩搭配原色的搭配（120°）：大部分是在儿童产品上，色彩明快，这样的搭配在欧美也非常流行，如蓝红搭配，frickr的logo以及麦当劳的logo色与主色调红黄色搭配等。原色搭配色彩使用比例色彩的搭配方法有很多，这里介绍一种我个人比较认同的方式。日本设计师提出70%，25%，5%的配色比例原则，画面中70%为底色，面积最大的一块，往往画面的色调是有底色决定的。25%面积的为主色，画面的核心区域多使用主色区。5%为强调色，强调色在画面中起到画龙点睛的作用，强调色多使用与主色对比度较大的色彩，也可以尝试利用色彩的互补关系来突出。底色70%主色25%强调色5%色彩使用比例当然，在实际工作中，很多时候画面不会只有三种颜色。遇到这种情况时，在现有的配色方案中进行切割，从而不影响配色比例。如何准确定位你的色彩前面分析的是通过颜色去感受情绪。这里简单写，如何根据产品去捕捉色彩，也就是所谓的MOODBOARD（情绪版）。情绪版是指对要设计的产品以及相关主题方向的色彩，影像，图片等其他材料的收集，从而引起某些情绪反应，以此作为设计方向或者是形式的参考。（具体请参考情绪版（moodboard）操作流程的新思考——晓干）1.原生关键词选择首先，通过对产品的理解和认识，以及用户调研等得出体验关键词。如何准确定位你的色彩2.衍生关键词针对所得到的关键词，扩容信息，通过头脑风暴画出关键词的思维导图，寻找扩展关键词。3.收集相关图片，提取图片生成情绪版通过“原生关键词”和“衍生关键词”，通过网络渠道，收集了大量的对应的素材图并配合定性访谈。4.衍生关键词的分析——分维诠释如何准确定位你的色彩5.对情绪版进行“色彩分析”和“质感分析”网页案例剖析“网页配色不宜超过三种。”真理，这没错，但更多是从色相（赤橙黄绿青蓝紫等不同颜色）上来说的。色相差异明显，主要色彩的选取就比较好办，常见的有对比色、临近色、冷暖色调互补等方式，可以简单设定，或直接从成功作品中借鉴主辅色配比都可以，比如常见的朱红点缀深蓝、明黄点缀深绿等。但通常，我们需要面对的设计需求在色彩分析上会有更多的问题出现......网页案例剖析网页案例剖析如上所示，根据网页信息的多寡，会有更多色彩区域的层级划分和文字信息层级区分需求，那么在守住“网页色彩（相）不超过三种”的原则下，只能寻找更多同色系的色彩来完善设计，也就是在“饱和度”和“明度”上做文章。这也就是本文为解决这一问题所要分享的“天然”配色技巧：叠柔配色法。叠柔配色技巧分享这个方法非常简单，无需知道三角函数、四则运算，无需理解色彩指数和直方图，甚至不用了解色阶曲线和亮度强弱......甚至，你可以对色彩毫无知觉。★只需要明白三个关键词：叠加、柔光和透明度（填充）。如果连这三个关键词都不甚明了，那就记住他们所在的位置（如下图）：网页案例剖析注意：透明度与填充略有不同，填充不会影响到“混合选项”的效果，而透明度则是作用于整个图层。配色技巧的原理：即：用纯白色（#ffffff）和纯黑色（#000000）通过“叠加”和“柔光”的混合模式（效果类似调整饱和度和明度），在任意一个色彩上得到最匹配的颜色（然后通过调整明度选取最合适的辅色）。（上图示例中，调整叠/柔模式的黑白色块的不同透明度（取10%到100%整数值为例）就可以得到差异较明显的40种配色，通过这种技巧，理论上每一种颜色都可以轻易获得无穷尽的“天然配色”，并且是“0失误”！）★由于叠加和柔光模式对图像内的最高亮部分和最阴影部分无调整，因此该配色方法对纯黑色和纯白色不起作用。设计实战演示：要不要像上面图示看起来的那样复杂？不用，只需要理解了上面的方法，就可以忘记图示，在你的设计工作中自由发挥！简单三步：①一个黑或白色，或黑白渐变（可以是点、线、面...甚至字体）②混合模式选择叠加或柔光③调整透明度（1%-100%随意，省心的做法是直接键入一个整数值，比如：轻质感类页面可以选择20%-40%，重质感感类可以键入60%或以上）网页案例剖析网页案例剖析（无论你采用何种主色，用黑白色彩叠加或柔光，你都可以轻松自如的获