让我带着你一起色

让我带你一起“色”关于色彩全栈工程师教研组@优才学院主讲：色彩原理色彩分类色彩三要素要素应用色彩情感色彩综合课程副标题色彩1色彩原理色彩原理色彩1色彩原理色彩1色彩原理没有光源便没有色彩感觉，人们凭借光才能看见物体的形状、色彩，从而认识客观世界。自然光：太阳、月亮人工光：主光、辅助光色彩1色彩原理光在物理学上是一种电磁波。电磁波包括宇宙射线、X射线、紫外线、可见光、红外线和无线电波等。只有波长在380纳米至780纳米之间的电磁波才能引起人的色知觉。即可见光。色彩1色彩原理任何物体对光都会具有一定的吸收、透射、反射、折射的作用。在可见光谱中，红色光的波长最长，它的穿透性也最强。色彩1色彩原理在卫星上看天空与在地球上看天空的区别色彩1色彩原理天山的现象：近景山是绿色的，中景山是青蓝色的，而远景山则是蓝紫色的。色彩1色彩原理由此，在设计中有“色彩的透视”概念（即：近暖、远冷，近实、远虚，近纯、远灰）色彩1色彩原理色彩有两大类无彩色有彩色色彩2色彩分类黑白灰在色彩分类中被归为无彩色系，除无彩色系以外都被称为有彩色。色彩2色彩分类色彩2色彩分类色彩2色彩分类色彩2色彩分类色彩2色彩分类色彩2色彩分类无彩色常用来表现厚重历史的新闻类图片和严肃的公益类图片，传承感较强，经久不衰。色彩2色彩分类色彩2色彩分类色彩2色彩分类色彩2色彩分类色彩2色彩分类色彩2色彩分类色彩2色彩分类色彩2色彩分类黑与白颜色互补可以在画面中形成强烈的对比，也由于这两种颜色简单不论是制作任何形式的广告都较容易上手。色彩2色彩分类?无彩色心理效应色彩2色彩分类黑色：时髦、正式、艺术、简单、权威、有力，但也表示死亡、惊恐、丢失、麻烦、悼念等负面意义。黑色：是无色相无纯度的颜色。往往给人的感觉是沉静，神秘，严肃，庄重，含蓄，另类，也让人有恐怖，不详，悲哀，消亡，罪恶，等消极印象。----极端颜色白色：纯洁、天真、干净、崭新、简单、空阔、凉爽、但也表示平淡、普通、无菌。在某些文化里代表死亡。白色：给人一种洁净，光明，纯真，清白，朴素，卫生，恬静，等----极端颜色灰色：中立、尊敬、人性、稳重、智慧、简单，但也表示沉闷、压抑。色彩2色彩分类?无彩色如何配色色彩2色彩分类无彩色+1色彩2色彩分类色彩2色彩分类色彩2色彩分类色彩2色彩分类色彩2色彩分类色彩2色彩分类色彩三要素

视觉所感知的一切色彩现象，都具有色相、明度和纯度三种性质。色彩3色彩要素色相，即各类色彩的相貌称谓，如大红、普蓝、柠檬黄等。色相是色彩的首要特征，是区别各种不同色彩的最准确的标准。事实上任何黑白灰以外的颜色都有色相的属性，而色相也就是由原(元)色、间色和复色来构成的。色相色彩3色彩要素色相加色原理三原色（美术学）红

黄

蓝减色原理三原色（物理光学）红

绿

蓝色彩3色彩要素十二色相环是由三原色之间进行混合产生了间色（二次色），用间色与原色进行混合，又产生了复色（三次色）所构成的。色彩3色彩要素原色是色相环中所有的颜色之母。只有这三种颜色不是由其它颜色调合而成。三原色在色相环中的位置是平均分布的。色彩3色彩要素间色（二次色）所处的位置是位于两种三原色中间的地方，每一种间色都是由离它最近的两种原色等量调合而成的颜色。色彩3色彩要素复色（三次色）是由相邻的间色（二次色）和原色调合而成。色彩3色彩要素

每一部分相邻的颜色都拥有一种共同的颜色，在下图这七种颜色中，都共同拥有蓝色。色彩3色彩要素

在下图七种颜色中，都拥有黄色。色彩3色彩要素

在下图七种颜色中，都拥有红色。色彩的明暗程度，亦称“亮度”。明度对纯度产生影响。

明度不仅决定物体照明程度，而且决定物体表面的反射系数。如果我们看到的光线来源于光源，那么明度决定于光源的强度。如果我们看到的是来源于物体表面反射的光线，那么明度决定于照明的光源的强度和物体表面的反射系数。简单说，明度可以简单理解为颜色的亮度，不同的颜色具有不同的明度，其中黄色明度最高，紫色明度最低，绿、红、蓝、橙的明度相近，为中间明度。另外在同一色相的明度中还存在深浅的变化。如绿色中由浅到深有粉绿、淡绿、翠绿等明度变化。明度色彩3色彩要素明度对比图色彩的饱和程度，亦称“鲜艳度”、“纯净度”。纯度不够时，色相区分不明显从科学的角度看，一种颜色的鲜艳度取决于这一色相发射光的单一程度。人眼能辨别的有单色光特征的色，都具有一定的鲜艳度。不同的色相不仅明度不同，纯度也不相同。纯度（饱和度）色彩3色彩要素纯度（饱和度）对比图色彩3色彩要素对色相组合-体现欢乐活泼气氛色彩3三要素应用色彩在WEB设计中的实际应用案例单色相组合-简洁明了色彩3三要素应用色彩在WEB设计中的实际应用案例低明度组合-炫酷夺目色彩在WEB设计中的实际应用案例低纯度组合-经典耐看、男性化、沉稳色彩3三要素应用色彩在WEB设计中的实际应用案例高纯度组合-视觉冲击力强，偏年轻化色彩3三要素应用色彩情感色彩4色彩情感色彩正负联想人们用自己的眼睛和头脑去感受色彩。当在看色彩时常常想起以前与该颜色相互联系的感受或事物，这种因某种色彩而出现的感受，称之为色彩的联想。色彩的联想是与年龄、个人偏好、受教育层次、环境背景等有关。色彩4色彩情感最具视觉冲击力；暗示速度和动态；能刺激心跳速度、刺激食欲；红色的衣服使人身形显大色彩4色彩情感色彩4色彩情感促进食欲、代表友善，愉快，能促使人谈话和思考；用来强化视觉，是救生员服装采用橙色的原因色彩4色彩情感最容易注意到的色；亮度高；最容易让人产生疲劳感；暗淡的黄可加强注意力，多用于提示牌色彩4色彩情感色彩4色彩情感最能让人眼放松的色；对精神有镇静和恢复功效；有秩序的意义；可促进消化色彩4色彩情感色彩4色彩情感抑制食欲，让人没有胃口；能让人的身体分泌安定素，放松身体；蓝色的环境中工作效率较高；色彩4色彩情感色彩4色彩情感娇柔、浪漫的品性；能够激发人们的想像力，常用来装饰儿童的房间，色彩4色彩情感色彩4色彩情感黑色服装能使人显瘦；能让和它相配的颜色看上去更明亮；可以激发自信和力量色彩4色彩情感色彩4色彩情感一些文化认为身着白色服装结婚会有好运；是表达到最完美平衡的颜色；同上帝、天使联系起来色彩4色彩情感色彩4色彩情感灰色通常不能引起人们比较强烈的情感变化；是白色和黑色平衡的结果；灰色的补色也是其本身色彩4色彩情感色彩4色彩情感暖色：人们见到红、红橙、橙、黄橙、红紫等颜色后就联想到太阳、火焰、热血等物像，产生温暖、热烈、危险等感觉，使人产生冲动情绪。冷色：见到蓝、蓝紫、蓝绿等色后，则容易联想到太空、冰雪、海洋等物像，就会产生寒冷、理智、平静等感觉。色彩的冷暖感色彩4色彩情感其感觉主要也来自色彩的明度，但与纯度亦有一定的关系。明度越高感觉越软，明度越低则感觉越硬，但白色反而软感略改。明度高、纯底低的色彩有软感，中纯度的色也呈柔感，因为它们易使人联想起骆驼、狐狸、猫、狗等好多动物的皮毛，还有毛呢，绒织物等。高纯度和低纯度的色彩都呈硬感，如它们明度又低则硬感更明显。色相与色彩的软、硬感几乎无关。色彩的软硬感（轻重感）色彩4色彩情感由各种不同波长的色彩在人眼视网膜上的成像有前后，红、橙等光波长的色在后面成像，感觉比较迫近，蓝、紫等光波短的色则在外侧成像，在同样距离内感觉就比较后退。实际上这是视错觉的一种现象，一般暖色、纯色、高明度色、强烈对比色、大面积色、集中色等有前进感觉，相反，冷色、浊色、低明度色、弱对比色、小面积色、分散色等有后退感觉。色彩的前后感色彩4色彩情感色彩的三要素对华丽及质朴感都有影响，其中纯度关系最大。明度高、纯度高的色彩，丰富、强对比色彩感觉华丽、辉煌。明度低、纯度低的色彩，单纯、弱对比的色彩感觉质朴、古雅。但无化何种色彩，如果带上光泽，都能获得华丽的效果。色彩的华丽质朴感色彩4色彩情感冷色系色彩4色彩情感暖色系色彩4色彩情感坚硬色彩4色彩情感柔软色彩4色彩情感华丽色彩4色彩情感色彩体系综合应用色彩5色彩综合色彩体系综合应用初步的了解了色彩的感情因素，但是我们会发觉其实很多时候，色彩运用其实也是有他的规律的，就好比我们在看到蓝色的广告的时候，就会联想到冷饮，冰棒，或者游泳池。楼盘站一般会使用金色搭配咖啡色，或是采用大量的绿色素材进行装点。女性站点会用上红色搭配紫色，或者采用粉红色，娱乐站点一般是采用黑色搭配夸张的红色，浅灰，或者是质感出众的金属色等。其实色彩的搭配也是有他一定的规律的，规律一般可以从色彩的情感方面取得，也可以从经验取得，也可以从客户自己的VI中取得。色彩体系概述色彩5色彩综合色彩体系综合应用色彩搭配案例色彩5色彩综合色彩体系综合应用同种色彩搭配是指首先选定一种色彩，然后调整其透明度和饱和度，将色彩变淡或加深，而产生新的色彩，这样的页面看起来色彩统一，具有层次感。特点：色相相同、明度或纯度不同优劣：对比效果统一、文静、雅致、含蓄、稳重，但易产生单调、呆板的弊病单色搭配色彩5色彩综合色彩体系综合应用色彩5色彩综合色彩体系综合应用特点：色相环上相邻二至三色对比，距离大约30度左右，为弱对比类型优劣：效果感觉柔和、和谐、雅致、文静，但感觉单调、模糊、乏味、无力，必须调节差来加强效果近似色搭配色彩5色彩综合色彩体系综合应用邻近色是指在色环上相邻的颜色，如绿色和蓝色、红色和黄色即互为邻近色。采用邻近色搭配可以里是网页避免色彩杂乱，易于达到页面和谐统一的效果。特点：色相距离约60度左右，为较弱对比类型。优劣：效果丰富活泼，但又不失统一雅致、和谐的感觉。分裂色搭配色彩5色彩综合色彩体系综合应用色彩5色彩综合色彩体系综合应用是广义上的对比色。在色环上划直径，正好相对（即距离最远）的两种色彩互为补色。特点：色相对比距离180度左右优劣：两种颜色互为补色的时候，一种颜色占的面积远大于另一种颜色的面积的时候，就可以增强画面的对比，使画面能够很显眼。一般情况下，补色运用有得有失。补色搭配色彩5色彩综合色彩体系综合应用色彩5色彩综合色彩体系综合应用所谓的消色，就是指黑白灰，这类颜色由于本身没有色性，所以可以说是万用搭配色。当然，说是说万用搭配色，但是也是有一些需要注意的地方：首先，由于本身没有色性，他们必须和色性比较强的颜色搭配会比较出效果；其次，消色与其他颜色搭配的时候，比例一定要控制好，尤其是灰色，灰色是一种很“高档”的颜色，但是问题是使用的过多，会使得页面灰蒙蒙没有质感。搭配消色（黑白灰）色彩5色彩综合色彩体系综合应用1．不要将所有颜色都用到，尽量控制在三种色系以内。

2．背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。忌脏——背景与文字内容对比不强烈，灰暗的背景令人沮丧！忌纯——艳丽的纯色对人的刺激太强烈抗议，缺乏内涵。忌跳——再好看的颜色，也不能脱离整体。脱离群众是自取其辱！忌花——要有一种主色贯穿其中，主色并不是面积最大的颜色，而是最重要，最能揭示和反映主题的颜色，就象领导者一样，虽然在人数上居少数，但起决定作用。忌粉——颜色浅固然显的干净，但如果对比过弱，整得苍白无力了，就象病夫一样无可救药。配色误区色彩5色彩综合色彩体系综合应用色彩5色彩综合色彩体系综合应用色彩5色彩综合配色规律色彩5色彩综合配色法则色彩5色彩综合色彩体系综合应用网站背景尽可能的选择一些低纯度的颜色。网页元素根据主次关系一次排列纯度关系。LOGO→导航→按钮WEB设计中颜色用得最多的是蓝色与灰色比较好搭配其他色系，蓝色系比较经典耐看，纯度与明度的变化对颜色本身无太大影响，都