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