色彩培训.ppt

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