色彩培训PPT.ppt

单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2,*,Web,色彩原理与搭配,生产系统产品部,周一平,1,2,前言,Web,信息系统的配色一直是个难题，尤其是对于颜色的作用以及如何选取一个具有逻辑意义而且美观的颜色往往对于开发设计人员是个难题,这个,PPT,面向于从原理上学习理解颜色，而且提出若干设计原则和配色建议。,WEB,色彩研究,2,2025/4/20 周日,WEB,色彩研究,3,2025/4/20 周日,配色,简单来说就是将颜色摆在适当的位置，做一个最好的安排。,配色时，建议按以下三点来考虑（重要程度从高到低）,配色是企业,VI,（视觉识别系统）的重要体现,配色影响阅读性和交互性,配色营造心理氛围，将直接影响用户的使用心情,色彩的目的,南方电网和麦当劳的网站配色都是紧密贴近各自的,VI,系统,4,2025/4/20 周日,色彩的属性,色相,明度,饱和度,色调,色彩的模式,RGB,颜色,R,红,G,绿,B,蓝,网页安全色,HSB,（,HSL,）颜色,Hue,色相,Saturation,饱和度,Brightness,亮度,CMYKC,青,M,洋红,Y,黄,K,黑,色彩的原理,5,2025/4/20 周日,色相,可见光是波长,380nm-780nm,的电磁波。,色相是色彩的首要特征，黑白灰以外的颜色都有色相的属性。,色相环,RGB,、原色、二次色、三次色,色彩的属性,-,色相,6,2025/4/20 周日,明度,明度指的是色彩的明亮程度,色彩中最亮的颜色是“白”，最暗的颜色是“黑”,色彩的属性,-,明度,7,2025/4/20 周日,饱和度,饱和度指的是色彩的鲜艳程度,饱和度最低的颜色是“黑白”，饱和度最高的颜色是纯色,色彩的属性,-,饱和度,8,2025/4/20 周日,色调,色调是将“明度”“饱和度”结合一起的表述方式。,“色调”更容易表现色彩的感情。不同色相的相同色调具有相似的感情,色调,9,2025/4/20 周日,RGB,RGB,色彩模式,是工业界的一种颜色标准，红,(R),、绿,(G),、蓝,(B),三个颜色叠加来得到各式各样的颜色的（光的叠加）,RGB,三种原色的分别从,0255,级（级别表示颜色的亮度）叠加。,Rgb(255,255,255)/#FFFFFF,为白色，,rgb(0,0,0)/#000000,为黑色,256,级的,RGB,色彩组合出,1678,万种色彩，,256256256=16777216,。简称,1600,万色。也称为,24,位色,(2,的,24,次方,),色彩的模式,Rgb(255,0,0),Rgb(0,255,255),Rgb(0,0,255),Rgb(0,255,0),10,2025/4/20 周日,RGB,色彩的模式,11,2025/4/20 周日,HSLHSB,颜色,从心理学的角度来看，颜色有三个要素：色泽,(Hue),、饱和度,(Saturation),和亮度,(Brightness),。,HSB,颜色模式便是基于人对颜色的心理感受的一种颜色模式。,HSB,色相,0360,度 饱和度,0100%,明度,0100%,HSB(xxx,xx%,xx%);,色彩的模式,12,2025/4/20 周日,CMYK,CMYK,也称作印刷色彩模式（传统彩色喷墨打印机的,4,个墨盒）,色彩的模式,13,2025/4/20 周日,网页安全色,以,RGB,颜色为基准，能被所有浏览器支持的,216,种颜色（因为有的系统只支持,256,色）。,目前主流电脑、手机的颜色已经普遍,24,位真彩色，因此网络安全色的概念也渐渐淡化。,GIF,图片的颜色使用,256,索引色，因此转换时应该注意色彩转变。,色彩的模式,14,2025/4/20 周日,色彩的模式,-,拾色器,饱和度,明度,色相,15,2025/4/20 周日,配色,按照色彩三属性：色相、明度、饱和度的不同程度进行颜色搭配。,难题：整洁的页面不宜出现过多不同颜色，怎么在那么多种颜色中选取有限的数种颜色进行搭配呢？,不同色相的搭配,色相对比,不同明度的搭配,明度对比,不同饱和度的搭配,饱和度对比,（色调）,配色,16,2025/4/20 周日,色相环作用,色相对比,配色,-,色相对比,17,2025/4/20 周日,色相环作用,色彩的原理,-,色相,同类色相对比,单纯、柔和、谐调，容易统一调和。比较容易为初学者掌握。单调、平淡。,临近色相对比,比同类色明显些、丰富些活泼些，可稍稍弥补同类色相对比的不足，可不能保持统一、谐调、单纯、雅致、柔和、耐看等优点。,对比色相对比,鲜明、强烈、饱满。丰富，容易使人兴奋激动和造成视觉以及精神的疲劳。这类瞩子的组织比较复杂，统一的工作也比较难做。它不容易单调，而容易产生杂乱和过分刺激。,互补色相对比,更丰富、更强烈，更富有刺激性对比色相对比也会觉得单调、短处是不安定、不协调、过分刺激，有一种幼稚、原始的和粗俗的感觉。要想把互补色相对比组织得倾向鲜明、统一与调和。,18,2025/4/20 周日,配色,-,明度对比,高长调：刺激、明快、积极、活泼、强烈,高中调：明亮、愉快、清晰、鲜明、安定,高短调：不分辩，感觉优雅、少淡、柔和、高贵、软弱、朦胧、女性化,低长调：对比强烈，感觉雄伟、深沉、警惕、有爆发力,19,2025/4/20 周日,配色,-,明度对比,明度,20%70%80%,饱和度,100%,20,2025/4/20 周日,配色,-,明度对比,21,2025/4/20 周日,配色,-,明度对比,22,2025/4/20 周日,配色,-,明度对比,23,2025/4/20 周日,配色,-,明度对比,24,2025/4/20 周日,配色,-,饱和度对比,饱和度,100%50%20%,明度,100%,25,2025/4/20 周日,配色,-,同色调 色相搭配,26,2025/4/20 周日,配色,-,色相对比,27,2025/4/20 周日,如何配色,色彩的目的,色彩风格,根据情感选择色调，鲜明的、还是柔和的还是低沉的。,融合、协调,尽量使用同类色、渐近色、使用明度对比或者饱和度对比，使得颜色整体一致、协调,强调,可以考虑使用互补色、分离补色，或者使用使用长调的明度对比，饱和度对比比较难产生对比度，鲜艳程度可能影响配色。,注目度,高饱和度的颜色注目度高、暖色系注目度高,28,2025/4/20 周日,如何配色,色彩的印象,29,2025/4/20 周日,如何配色,辨识度,大红大紫的下场,30,2025/4/20 周日,如何配色,辨识度,色彩不在于亮度，而在于对比,31,2025/4/20 周日,如何配色,#252525,#323232,#888888,#2992de,#d5d5d5,32,2025/4/20 周日,如何配色,#c9dfaf,#f4f3f0,#fffea9,#f4d446,#4543f3,颜色特点：,背景颜色的亮度都在,90%,左右,背景饱和度在,5%,以下,线路饱和度,30%,高亮色饱和度,70%,文字采用低亮度,33,2025/4/20 周日,Web,配色原则,配色步骤,确定整体色彩风格（贴近,VI,系统）,配色的目的性（应用、宣传效果、展示效果）。,统一颜色使用搭配,34,2025/4/20 周日,Web,配色原则,配色原则（转自腾讯的一个,PPT,）,灰黑色,当使用灰色为文字颜色时，正灰色的明度数值（,B）,不大于,30%。,当使用带有色彩倾向的灰色时，根据色相不同，应对明度值（,B）,作相应调整。,因为不同纯色亮度不同，黄色亮度最高，蓝色,/,紫色亮度最底，其他色相则属中间亮度。因此使用亮度越高的色彩，其明度值（,B）,应该越低。,建议使用：,35,2025/4/20 周日,Web,配色原则,深蓝色,当使用纯蓝色为文字颜色时，明度数值（,B）,不大于,60%。,当蓝色介于纯蓝往天蓝之间的时候，根据色相不同，应对明度值（,B）,作相应调整。,当色相越接近天蓝时，（,B）,值应该越低。,很多门户网站使用蓝色为文字颜色，常用的有,建议使用天蓝色的：纯蓝色：,36,2025/4/20 周日,配色原则,对比大于亮度（利用好颜色的对比，而不是强调颜色的亮度）。,对比意思在于背景与前景的对比，主要内容和次要内容的对比,对比要有度（邻近的色相、不要同时存在巨大的饱和度亮度差异）,对比要有目的性（高长调、高短调等等之间的差异，强烈与温和）,同类色使用不同饱和度或者明度，渐近色都是比较保险的做法。,颜色的种类不宜太多，同一界面上最多不能超过,5,种不同色相的颜色，主色不宜超过,3,种不同色相的颜色。,Web,配色原则,37,2025/4/20 周日,配色建议,文字,通常采用浅色或白色背景，因此正文饱和度、亮度不宜太高（否则看不清），一般不使用纯色（尤其是背景亮度也很高的情况下）。,正文一般采用灰度颜色，颜色也不宜太深，亮度在,10%60%,的灰度，,RGB,颜色则是,#111111#999999,。,推荐使用,#333333#666666#888888,作为不同程度的字体灰度颜色，字体越大的情况下，需要考虑把大字体颜色调淡。,文字取色建议取图中框内的颜色,Web,配色原则,38,2025/4/20 周日,配色建议,背景色,只能存在两种前后景配色，“白纸黑字”，“黑纸白字”，而大多数情况下是“白纸黑字”。,大多数情况下我们的背景色是取得过深的。,适宜作为背景的颜色只有图中两个红框内的颜色。（饱和度小于,20%,，明度大于,80%,），在反色系情况下，背景采用亮度,30%,以下的颜色。,Web,配色原则,39,2025/4/20 周日,配色建议,高亮部分,再一次强调，,不需要高亮度高饱和度,，只需要与背景有足够的对比即可。,Web,配色原则,40,2025/4/20 周日,配色技巧,善用,HSLHSB,Web,配色技巧,i=010,hsl(i*10,70%,50%),i=010,hsl(i*10+40,70%,50%),i=010,hsl(i*10+100,70%,50%),i=010,hsl(30,70%,(i*5+40)%),i=010,hsl(100,70%,(i*5+40)%),i=010,hsl(100,(i*5+20)%,50%),41,2025/4/20 周日,42,2025/4/20 周日,