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