色彩的运用

种颜色不是由其他颜色混合而成。三原色在色环中的位置是平 均分布的，如图所示。
1/光的三原色 2/美术三原色 红 蓝 黄 3/印刷三原色
RGB（红 绿 蓝） RYB（红 黄 蓝） CMY（青 洋红 黄）
色相环——二次色
二次色所处的位置是位于两种三原色一半的地方。每一种 二次色都是由离它最近的两种原色等量混合而成的颜色， 如图所示。
野性、有毒、灾祸、自私
纯色加灰（浊色）的心理特性
灰心、嫉恨、堕落、不新鲜、忧虑
无论是自然界还是社会生活中，紫色都较为稀少。因 此紫色有神秘、高贵、优雅、华丽等感觉优雅、浪漫、 高贵、神秘、魅力、自傲、轻率神奇，神秘，灵性， 潜意识，创造力，尊严，皇室，悲哀，残酷，自大， 自负
无光对人们的心理影响有两种： 一是积极类：黑夜使人得到休息、安静、 深思，黑色有坚持、准备、严肃、庄重、 坚毅之感。 二是消极类：例如漆黑的地方，会让人失 去方向，具有阴森、恐怖、忧伤、消极、 沉睡等印象
色彩关系
贰 对比色
指在24色相环上相距120度到180 度之间的两种颜色， 称为对比色。
色彩关系
叁 类比色
相邻的颜色我们称为类比色。类比色都拥有共同的颜 色。这种颜色搭配产生了一种令人悦目、低对比度的 和谐美感。这种搭配让你轻易产生不错的视觉效果。
2
色彩的情感
各种色彩都有独特的性格， 它们与人类的色彩生理、心理体验相联系， 从而使客观存在的色彩仿佛有了复杂的性格。
安稳、自私、沉默、刻苦
纯色加灰（浊色wenku.baidu.com的心理特性
湿气、倒霉、腐朽、不放心
植物的绿、不但给视觉以休息，还给人以清新的感 觉，有益于镇定、疗养、休息与健康。 黄绿、嫩绿、淡绿，给人以大自然活跃的青春感； 如浓绿有盛夏印象，表现成熟、健康； 灰绿、土绿、褐茶色意味着秋季，反映了收获； 灰蓝绿、灰土绿、灰白绿、灰褐绿等色有冬季印象， 反映了衰老和终结。
2.1-5 雅白色调
柔和的调子使页面显得明快温暖，就算 色彩很多也不会造成视觉负重。页面的 同色调搭配，颜色作为不同模块的信息 分类，不抢主体的重点，还能衬托不同 类型载体的内容信息。
观点：同色调不同色彩的模块， 就算承载着不同的信息内容也能 表现很和谐。
2.2 同色调配色
这是由同一或类似色调中的色相变化 构成的配色类型，与主导色调配色中 的属于同类技法。区别在于色调分布 平均，没有过深或过浅的模块，色调 范围更为严格。
配色那点事
？？
主讲：赵新
目录contents
1
• • • •
色彩 概念
2
• • • • • • • •
色彩 情感
红色 橙色 黄色 绿色 蓝色 紫色 黑色 白色
3
• • •
色彩 搭配
4
• • • • •
经验 分享
色相环 色彩三要素 色彩冷暖 色彩关系
色相差配色 色调调和配色 对比配色方式
配色选择 给颜色加上特效 颜色的黄金法则 勿忘黑色 自然中提取颜色
橙
绿
紫
色相环——三次色
三次色即是由原色和二次色混合而成的颜色，在色相环中处 于原色和二次色之间，如图所示。
黄橙 红橙 红紫 蓝紫 蓝绿 黄绿
色彩三要素
壹色
相
是指色彩的相貌，用来区分不同的颜色。
贰 饱和度
饱和度是指色彩的鲜艳程度。也成色彩的纯度。
叁明
度
是指色彩的明暗程度，即深浅，色彩越接近黑色明度越低， 越接近白色明度越高。
纯色加灰（浊色）的心理特性
粗俗、可怜、笨拙、压力、贫困、沮 丧、抑郁、冷漠
紫是表示虔诚的颜色，明亮的紫色，表示理 解、优雅、美好的情绪；其暗色阴郁，暗示 迷信或潜伏灾难，容易造成心理上的忧郁、 痛苦和不安。
纯色加白（明清色）的心理特性
文雅、轻浮、秀气、细嫩、柔情、美 丽、美梦、甜美、温柔、娇柔
纯色加黑（暗清色）的心理特性
1
色彩的概念
• • • • 色相环 色彩三要素 色彩冷暖 色彩关系
色相环——构成
色相环由12种基本的颜色组成。首先包含的是色彩三原色，即红、黄、蓝。原色混 合产生了二次色，用二次色和原色混合，产生了三次色。
色相环——三原色
这里所说的三原色是指美术三原色，RYB（红、黄、蓝）
原色是色相环中所有颜色的“父母”。在色相环中，只有这三
观点：同色深浅配色有着极 高的统一性，但有点枯燥。
三、对比配色而形成的配色方式
一般说来，颜色从纯度，明度，色相 上进行对比，明暗对比，深浅对比， • • • • • • 3.1 色相对比 3.1-1 双色对比 3.1-2 三色对比 3.1-3 多色对比 3.2 纯度对比 3.3 明度对比
观点：谷歌设置了四种品 牌色，通过主次、合理的 比例应用在界面中，并通 过组控件不同的交互状态 合理分配功能任务。
二、色调调和而形成的配色方式
2.1 有主导色调配色
•
这是由同一色调构成的统一性配色。深 色调和暗色调等类似色调搭配也可以形 成同样的配色效果。即使出现多种色相， 只要保持色调一致，画面也能呈现整体 统一性。根据色彩的情感，不同的调子 会给人不同的感受： • •
没希望、多变、贫穷、粗俗、 秘密
纯色加灰（浊色）的心理特性
不健康、没精神、低贱、肮 脏、陈旧
某些情况下它是一种友好的色彩，表示健康 与活力。绿色通常用在农业领域、卫生环保 等领域，但在很多人内心深处，它常被比作 成嫉妒、卑鄙。
纯色加白（明清色）的心理特性
爽快、清淡、宁静、舒畅、轻浮
纯色加黑（暗清色）的心理特性
3
色彩搭配
• • • 色相差而形成的配色方式 色调调和而形成的配色方式 对比配色而形成的配色方式
一、色相差而形成的配色方式
1.1 有主导色彩配色
• 1.1-1 同色系主导 1.1-2 邻近色主导
这是由一种色相构成的统一性配色。即由某
一种色相支配、统一画面的配色，如果不是 同一种色相，色环上相邻的类似色也可以形 成相近的配色效果。
2.1-1 清澈的色调
2.1-2 阴暗的色调 2.1-3 明亮色调
•
•
2.1-4 深暗色调
2.1-5 雅白色调
2.1-1 清澈色调
清澈调子使页面非常和谐， 即使是不同色相，相同色调 的配色能让页面保持较高的 协调度。
观点：互补的色相搭配在一起， 通过统一色调的手法，可以缓 和色彩之间的对比效果。
2.1-2 阴暗色调
1.1-6 中性色配色
用一些中性的色彩作为基调搭配， 常应用在信息量大的网站，突出内 容，不会受不必要的色彩干扰。这 种过配色比较通用，非常经典。
观点：利用大面积中性色作为主 导色，品牌色在这里起到画龙点 睛的作用，用于一些需要重点突 出的场景，强调交互的状态等。
1.1-7 多色搭配下的主导
主色和其他搭配色之间 的关系会更丰富，可能 有类似色、中差色、对 比色等搭配方式，但其 中某种色彩会占主导。
给人以灰心的感觉
黄色是阳光的颜色，黄色光的光感最强、明 度最高，给人以光明、乐观、迅速、活泼、 轻快的感觉。象征着光明、辉煌、灿烂和充 满希望、发展、注意、法律，教育
纯色加白（明清色）的心理特性
单薄、娇嫩、可爱、幼稚不 高尚、无诚意
纯色加黑（暗清色）的心理特性
黄色除了有积极意义外，有时也代表轻薄、软弱、 背叛等，黄色物体在黄色光照下常有失色的现象， 植物呈灰黄色，是衰败腐烂的征兆。人面呈灰黄 色，被看成病态；天空昏黄，意味着黑暗降临
1.1-4 中差色配色
中差色对比相对突出，色彩对比 明快，容易呈现饱和度高的色彩。
观点：利用色彩对比突出按钮 任务优先级，增加页面气氛。
1.1-5 对比色配色
主导的对比配色需要精准地控制 色彩搭配和面积，其中主导色会 带动页面气氛，产生激烈的心理 感受。
观点：红蓝色反应不同交互和信 息的可操作性，针对系统操作和 用户操作的区分。
红色纯度高，刺激性大，注目性高，常作为最有 力的宣传色、讯号色，竞争与进攻都可以用红色 体现，由于红色刺激性强，很容易使人疲劳，烦 躁不安，危险，邪恶，愤怒
纯色加灰（浊色）的心理特性
烦闷、哀伤、忧郁、阴森、寂寞
一般火的温度较高、传热较大时，呈现出的 不是红色，而是橙色，所以橙色较红色更暖， 更鲜艳，是所有颜色中感觉最暖的色，是人 们普遍喜爱的色彩
•
•
• • • •
1.1-3 类似色主导
1.1-4 中差色主导 1.1-5 对比色主导 1.1-6 中性色主导 1.1-7 多色搭配下的主导
1.1-1 同色系配色
同色系配色是指主色和辅色都在统 一色相上，这种配色方法往往会给 人页面很一致化的感受。
观点：颜色差分割页面层次和模块， 并代表不同功能任务属性。
色彩三要素
PS拾色器中
右上角的颜色饱和度最高。 向左：饱和度降低，明度增加。 向下：饱和度和明度同时降低。 向左下方：饱和度和明度也同时降低。
色彩冷暖
右上角的颜色饱和度最高。 向左：饱和度降低，明度增加。 向下：饱和度和明度同时降低。 向左下方：饱和度和明度也同时降低。
色彩关系
壹 互补色
色环上直线相对的两种颜色称为互补色，互补 色形成强烈的对比效果，传达出活力、能量、 兴奋等意义。
黑色的心理特性: 黑夜、葬仪、黑暗、罪恶、坚硬、沉默、绝望、 悲哀、严肃、死亡、恐怖、刚正、铁面无私、忠 诚、忠毅、粗莽等
白色为不含纯度的色，除因明度高而 感觉冷外基本为中性色，明视度及注 目度都相当高，由于白色为全色相， 能满足视觉的生理要求，与其他色彩 混合均能取得很好的效果
白色的心理特性： 洁白、明快、清白、纯粹、真理、朴 素、神圣、正义感、光明、失败等
观点：综合运用的情况，整体界 面是有主导色调，在布局例如重 点图标等是同色调配色灵活运用。
2.3 同色深浅搭配
这是由同一色相的色调差构成的 配色类型，属于单一色彩配色的 一种。 与主导色调配色中的同色 系配色属于同类技法。从理论上 来讲，在同一色相下的色调不存 在色相差异，而是通过不同的色 调阶层搭配形成，可以理解为色 调配色的一种。
1.1-2 邻近色配色
近邻色配色方法比较常见， 搭配比同色系稍微丰富，色 相柔和过渡看起来也很和谐。 观点：基于品牌色的邻近 色运用，灵活运用到各类 控件中。
1.1-3 类似色配色
类似色配色也是常用的配 色方法，对比不强给人色 感平静、调和的感觉。
观点：基于品牌色的类 似色运用，有主次地用 到页面各类控件和主体 内容中。
纯色加白（明清色）的心理特性
细嫩、温馨、暖和、柔润、细心、轻 巧、慈祥
纯色加黑（暗清色）的心理特性
沉着、安定、茶香、古色古香、深情、 老朽、悲观
橙色在空气中的穿透力仅次于红色，注目性也 性当高，具有明快的特点。因而橙色也被用为 讯号色、标志色和宣传色。它同样容易造成视 觉疲劳。
纯色加灰（浊色）的心理特性
观点：饱和度与纯度特性 明显的搭配，在达到视觉 冲击力的同时，可适当采 用对比色或降低明度等方 法调和视觉表现。
2.1-4 深暗色调
页面以深暗偏灰色调为主，不同的色彩搭配， 像在叙述着不同的故事，白色文字的排版， 整个页面显得厚重精致，小区域微渐变增加 版面质感。
观点：以低暗色调构成整体画面氛围， 小面积明亮部分不会影响整体感觉。
色彩的情感
• 选择颜色之前，一定要先综合考量对象的特性，例如：科技类的印象中都 是充满神秘的，可以考虑黑色，蓝色是比较容易接受的网站风格，再如， 生态环保类大家可能首先想到的是绿色，那就不能选择出入太大的颜色作 为主色调。 • 选择对的颜色搭配或许是成功的一半，它能抓住用户对网站的第一感觉， 传递信任感，让用户更容易记住。
阴暗的色调渲染场景氛围，通过不 同色相的色彩变化丰富信息分类， 降低色彩饱和度使各色块协调并融 入场景，白色和明亮的青绿色作为 信息载体呈现。
观点：多色彩经过统一色调处理， 区域间非常协调，也不影响整体 页面阴暗气氛表现。
2.1-3 明亮色调
明亮的颜色活泼清晰，热 闹的气氛和醒目的卡通形 像叙述着一场庆典，但铺 满高纯度的色彩，过于刺 激，不适宜长时间游览。
红色
橙色
黄色
绿色
蓝色
紫色
黑色
白色
鲜红色表示生命、热情、活力、喜庆、警告、 能量、力量、热闹、领导地位、革命、温暖、 勇气，快乐， 红橙色浓而不透明，具有纯厚、温暖感等
纯色加白（明清色）的心理特性
圆满、健康、温和、愉快、甜蜜、优 美、幼稚、娇嫩、柔媚
纯色加黑（暗清色）的心理特性
枯萎、固执、孤僻、憔悴、烦恼、不 安、独断
如果说红色是积极的、热烈的，那么蓝色则 是消极的、静的、内省的、含蓄的、暗示着 智力，给人以冷静、智慧、理智、深远、永 恒、信任、安全的感觉
纯色加白（明清色）的心理特性
清淡、聪明、伶俐、高雅、轻柔
纯色加黑（暗清色）的心理特性
奥秘、沉重、大风浪、悲观、幽深、 孤僻、
在商业美术中，蓝与白一样不能引起食欲， 但常用来表示寒冷，成为冷冻食品的标志色。 蓝色可作食与色的陪衬色