色彩培训

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