红色在可见光谱中波长最长，穿透力最强，对视觉的影响力也最大，是最引人注目的色彩。在设计中，红色可以主导整体色调，也可以作为点缀出现，它的表现力极强，具有强烈的感染力。

很多著名的品牌都以红色为形象色，如可口可乐公司在百年历史发展中，他的标志、包装经历了数次更换，但它的标准色——红色一直延续下来。热情的“红色”象征着激情、快乐、活力，诠释出了可口可乐的品牌精神，向人们传达出强烈的品牌效应。

结语

红色是色彩设计中常用的颜色，它的注目性与美感，在设计用色中占了很重要的位置。红色与其它颜色搭配时，由于纯度高，往往成为瞩目的中心。将其巧妙地应用在设计作品之中，可以使设计作品产生许多意想不到的效果。

没有一个色彩是独立存在的，也没有哪一种颜色本身是好看的颜色或是不好看的颜色，相反地，只有当色彩成为一组颜色组成中的其中一个的时候，我们才会说这个颜色在这里是协调或是不协调，适合或不适合，不同比例的搭配更可能会产生出截然不同的结果。

红色在设计中恰倒好处的运用, 对于增强设计冲击力和表现力、体现设计主题、升华设计内涵有很大的帮助。这还要看设计师是否能在全面了解和研究“红色”特性，深刻理解和领悟“红色”内涵的基础上，灵活运用“红”色的巧变能力了。

参考资料：

《六个步骤细说电商banner图设计之色彩的奥秘》  作者：做设计的面条https://mp.weixin.qq.com/s/i-G_YVdcX7PWBWdj84I9Lw

《浅谈色彩学：以红色为主的色彩配色》 作者：优设网 kingtent

https://www.uisdc.com/color-red

素材来源于网络，如有侵权请联系作者删除。

原文地址：艺海拾贝Design（公众号）

作者：邓海贝

从色彩定义来看，黑色是亮度最低的非彩色,是经典的色彩，更是神秘的色彩。

黑色在设计运用过程中，经常给人传递的是一种庄重、神秘、稳重、冷酷高端等等的一系列视觉感受，我们在用黑色作为主色调的时候，一定要慎重，黑色属于消极色彩，从心理学角度来看，会使人联想到神秘、黑暗等，还象征着悲哀、沉默、恐怖、罪恶、消亡等。

黑色在使用中绝不可能是孤立单一的，不同的图案造型、不同的色彩搭配产生的对比效果，都会使这种消极性发生微妙变化，并使与之相配的色彩因此而赏心悦目。

有很多设计师将黑色用的出神入化的，今天我们一块来学习这些优秀的黑色系案例。

黑色作为一种百搭色，可以与任何色彩搭配，黑色的背景色是呈现鲜艳色彩的天然载体，通过这两个案例可以看到黑色作为背景时，强化了蓝色科技感属性，红色则显得更加热情。

方案汇总

结语

本期通过手表的广告为大家进行黑色配色的示范，希望你有所收获。正如任何事物都有利弊一样，黑色具有复杂而强烈的性格，使用得当给人高端大气的感觉，使用不当会给人以压抑、沉闷、悲伤的感受，这需要大家在今后不断练习，慢慢体会，不断创新。

原文地址：艺海拾贝Design（公众号）

作者：邓海贝

橙色是一种次级原色，是红色和黄色的混合色。橙色的情感是非常暧昧的，游离在红色和黄色之间，因此，它的性格中带着红色的热情和黄色的暖意。

不同的橙色表现出不同的调性，鲜明的橙色富于年轻感，温暖且充满活力。黯淡的橙色沉稳、含蓄，具有优雅复古感。

人们对色彩的联想，虽然会因为各种原因而存在差异，但是，却也有相当程度的共性。设计师在应用某种色彩之前，要充分理解和掌握这种色彩的情感意象以及它在特定环境下带给人们的联想与象征。

美味、食欲>

由于很多成熟的果实和蔬菜的颜色都是橙色 ：胡萝卜、橙子、芒果等等，于是人们会将橙色与美食联系在一起。橙色可以刺激味蕾，是最能激发食欲的颜色，所以考虑到色彩对顾客心理感受和生理感受的影响，橙色被大量运用在关于餐饮方面的设计中，让人胃口大开。

丰收、喜悦>

明媚积极的橙色可以让人联想到金色的秋天、丰硕的果实，而秋天所象征的积极意义就是丰收和富饶的季节， 所以橙色又被赋予了富足、喜悦、幸福的意义。

温暖、舒适>

相比热情四射的红色，橙色更加温和，是暖色中最温暖的颜色 ，既明朗又活力，使人如同沐浴在阳光中感觉温暖而美好，是精神和身体都能感觉到愉悦的理想颜色，所以常使用在要表现温馨场景设计中。

活泼、醒目>

橙色和黄色一样有着高明度的属性，鲜明的橙色总是给人以明快、活泼、令人振奋的感觉，有着引人注目的能量，显得生机勃勃。很多代表着“新生代”的机构 ，也大量的运用橙色，来表现它们的创造力和年轻活力 。

复古、典雅>

黯淡的橙色沉稳、含蓄，搭配一些淡雅的色彩，能营造出怀旧的氛围，具有优雅复古感，因此这一类橙色运用得当，可以演绎出雍容华贵、典雅感。

黑色的背景色是呈现鲜艳色彩的天然载体，黑色作为主色，运用橙色进行点缀，一暗一亮，表现出强烈的对比，碰撞出了巨大的活力，很好展示出了橙色的鲜明个性，富有活力和力量感。

整个画面以无彩色的黑白灰为主，橙色的出现，增加了画面的跳跃感，层次分明，醒目时尚，让人印象非常深刻。

纯净的白色与高饱和度的橙色相搭配，显得干净温暖，传递出简洁大气、明朗纯净的感受。

橙色与黄色是色相最接近的颜色，相配有一种很和谐的过渡感。由于橙色和黄色都非常明亮鲜艳，很容易营造出开心喜悦、活泼具有动感氛围 。

红色和橙色在色相环上相邻，色调和谐统一，是充满活力和激情的颜色，经常使用在促销等表现出热闹、愉快氛围的设计中。由于这些色彩的温度都比较高，因此画面中应该有一定的冷色来“降温”，从而实现画面的平衡。如下图中大量运用了橙色和红色，因此用紫色作为冷色进行平衡。

由于绿色和橙色为对比色，对比比较强烈，两色搭配让整个画面洋溢着一股春天的大自然的气息 ，给人自然清新、朝气活力的感觉。

橙色和紫色为对比色，对比比较强烈能相互突出各自色彩特性。明亮温暖的橙色搭配暗调偏冷的紫色可以很好的使画面达到平衡。

蓝色和橙色是互补色，温暖的橙色在与偏冷的蓝色搭配时，更加醒目，高亮的橙色可以很好的缓解深蓝色的沉闷，增加画面的愉悦气氛。

结语>

橙色是红色和黄色的混合色，因此，它的性格中带着红色的热情和黄色的暖意。不同的橙色表现出不同的调性，鲜明的橙色富于年轻感，温暖且充满活力；黯淡的橙色沉稳、含蓄，具有优雅复古感；明媚积极的橙色让人感到温暖舒适，富足幸福。

配色总的来说并没有定论，因为色彩包含的个人情感的层次太丰富，而这也是配色总是让人深究又始终没有定论。这需要不断的观察、练习和实践才能更好掌握配色规律，增强画面的表现力和提升设计内涵。

来源：艺海拾贝Design

其实无论是绘画、摄影还是我们的设计，都存在大量的焦点配色，只是我们平时没有特别去注意而已。比如莫奈的这幅《日出·印象》，我们来尝试分析一下焦点的设置和移动。

我想绝大多数人都应该是这种移动路线，也就是在大面积灰色调和冷色调中先被强暖色的太阳所吸引，然后是近景全黑色的船，接着顺延到另一条船上，当然每个人都会有所不同。

比如也可能是这种从远景到近景的顺序。

也可能有的人是从近到远的观看顺序，但是无论你是哪一种，都不重要，为什么？

因为无论你的视线是怎么移动的，都不会影响到我们最终焦点的归属。大家可以感受一下，当你看这幅画的时候，无论你先看哪后看哪，最终你的眼睛都会被这个橙红色的太阳所吸引，这就是色彩焦点的魅力。

我们再来看一个摄影作品，这个跟刚才那幅画来比，焦点就更加清晰了，而且这里也不需要焦点的移动，很明显焦点就是这个人物。

但是这个焦点是怎么通过色彩得到强化的呢？可能有的人会说这么明显的人物肯定是焦点啊，但是你可以尝试把人物后面的暖色光去掉看看，虽然人物同样是这个画面的焦点，但是一定没有现在这样抢眼，因为暖色和背景的冷色形成了强烈的对比。

所以无论是绘画、摄影还是我们接下来会看到的设计，其中都会包含一种故意的或者是有意识的色彩焦点的安排，而这种焦点的形成是怎么实现的呢？其实就是通过色彩对比，因为有色彩对比必定产生焦点，即使没有焦点我们也会努力去寻找焦点。我们联想下平时的生活就会发现，无论是我们看到一幅画面，或者是置身于一个真实的环境中，我们都会不自觉地去寻找色彩最突出或者最醒目的东西，这就是作为人的一种本能，也就是自然而然地去寻找焦点。

下面我们来看一些设计作品，我们看这三个界面，不能说没有焦点，有，就是图片，准确地说应该是没有色彩焦点，所以我们接收到的就是图片加上信息排在一起，我们很难在短时间内区分出哪些是重要信息哪些是次要信息。我们不知道视线应该落在哪里，因为没有突出的东西，这种不知所措会让看的人感到不舒服，这就是没有焦点会造成的一种情况。

同样这三个界面，我们什么都不变，只是在想强调的部分填充一个颜色，这样就会让看的人可以通过色彩毫不犹豫地感受到焦点，这种交互才是人性化的交互，而这个简单的过程其实就是色彩设计。

我们再来看一个更加简单易懂的，比如现在这个，就是在一个蓝色背景上编排纯白的文字，可能通过字号和距离的安排我们也知道孰轻孰重，但是如果从色彩的角度来看还不够，因为没有形成让人快速识别的焦点。

如果在想强调的地方，适当的填充一个颜色，那么瞬间就有了焦点，而这个颜色和背景色的对比越强，焦点就越明显。

我们看这个海报，当我们看到这个画面的时候首先注意到的是什么？

首先注意的肯定是上方的图片，其次会根据信息的层级大小去看主标题，然后是次要信息。这种没有设置色彩焦点的形式，虽然不太会影响信息的阅读，但我们不妨试试有色彩焦点的情况。

当原本就是画面中比较重要的标题信息和突出的英文被填充红色之后，焦点就产生了并且得到强化。

这时候当我们再看这个作品，就可以在短时间内迅速获得信息，如果想继续了解也可以继续阅读，这就是有焦点和没焦点或者焦点不突出的差别。

我们看这个 banner，这里我们不说它的版式怎么样，我们就看色彩和焦点，这个画面有什么问题呢？就是焦点设置错误，什么意思？

也就是大家看这个画面的时候，虽然都会先看月饼的图片，然后是标题到进入专场，但是大家发现没有，你的视线总会被中间这个粉色的花瓣吸引。

就是那种你不想看它，但是又不得不看的感觉，因为这个花瓣的颜色完全没必要出现在这里，因为它不是信息，为什么要充当焦点呢？这就是焦点错误。

我们把花瓣去掉试试，这样焦点就很清晰明确了。

现在我们知道了有焦点和没焦点的差别，那焦点的设置其实也是有多种情况的。我们就拿这个网页来举例，版式部分保持不变，你想突出哪里就在哪里设置焦点。我们来看看通过色彩把焦点安排在不同的地方，这个页面产生什么样的效果。

比如我们可以把焦点设置在上半部分，也就是顶部的品牌和导航区域。

也可以把焦点设置在主标题的文字信息上。

还可以设置在底部区域，形成色块。

当然也可以是自由式的焦点设置，强调你想强调的部分，这种情况下就有了焦点的移动。

通过之前的案例分析我们总结一下有焦点的好处：首先它满足了人的生理需求，其次满足了视觉传达的需求，最后满足了审美的需求。也就是说我们所要做的视觉设计是需要传达信息的，你得让受众看到你的信息才行，而要想有效的让人看到信息，焦点的设置就要满足前面三个需求，如果没有满足，一定程度上说明你的作品是失败的。实际人都是充满惰性的，也都不喜欢延迟，当人们看到所有的信息在它应该在的位置，不需要眼睛和大脑再去阅读，这时候就得到了一种观看和阅读的满足感。

说了这么多焦点的好处，下面我们就来看看如何通过配色形成或者强化焦点。首先我们要知道的就是焦点是通过对比实现的，而这里包括了色相对比形成焦点、冷暖对比形成焦点、深浅对比形成焦点、有彩色与无彩色对比形成焦点、花色与纯色对比形成焦点、色彩面积对比形成焦点。

首先我们来看色相对比形成焦点，这里的色相对比通常是指互补色或对比色之间的对比，因为色相差异越大越容易产生焦点。比如这个海报就是蓝色和黄色的互补色对比，当然需要注意的是，我们所列举出的这些对比并不是单独存在的，它们往往都是相互结合的，比如这个海报最明显的就是色相上的互补色对比，当然你也可以说是冷暖对比，同时也包括面积对比。

这个网页作品，蓝色与绿色形成了色相上的对比，同时它们二者又与背景形成了有彩色与无彩色的对比。

这个圣诞主题的 banner，整体是大面积的暗红色，这就让人物头顶的绿色圣诞树成为了焦点，也就是色相对比中通过对比色形成焦点。

然后是冷暖色对比产生焦点，这个版面很简单，就是文字编排加上背景，但是很明显，通过在强调的地方使用蓝色与背景的粉红色形成一种冷暖对比，让焦点一目了然。

这个同样也是红色与蓝色的冷暖对比强调焦点，让人一眼就能抓住重点。

这个同样也是通过冷暖对比形成焦点，只不过这个画面并不是单一焦点的形式，是多个焦点从大到小或从近到远的移动。

如果色相对比不够明显，那么通过单一色彩或近似色彩的深浅对比也可以很好的形成焦点，同样纯度和明度差异越大越容易产生焦点。比如这个画面中的焦点面包与背景形成的就是深浅对比。

这个画面整体是褐色的基调，但是杯子中的茶汤是比背景更亮一些的颜色，所以它自然而然地就成为了画面的焦点，而且这个焦点也是符合这个版面的设计逻辑的。

这个页面的背景是偏深一些的粉红色，当然图片肯定是这个画面的第一焦点，但除此之外，这个画面中还有另外两个焦点，就是比背景偏暗一些的嘴唇，这就是利用深浅色对比形成焦点。

焦点的作用以及如何强调焦点都很好理解和操作，但是设置焦点背后的原理是什么呢？就是我们之前讲过的色彩营销，因为设计的目的是通过视觉传达信息，而传递信息的目的是为了营销，所以答案也就很明了了。也就是如何设置焦点以及让谁成为焦点，这背后的逻辑要依据营销的目的，换句话说焦点的设置一定要满足以上的需求，假如设置了错误的焦点，就会适得其反，倒不如不设置焦点了，这个道理大家一定要明白。

我们接着往下看，下一个就是有彩色与无彩色对比产生焦点。比如我们看上面这个海报，图片整体是黑白的，只有雨伞的部分是红色，非常醒目的被凸显出来，当然就是第一焦点，其次就是红色的标题性文字。因为黑色与红色很好的对比效果，所以类似这种形式的摄影作品大家也一定见过很多，就是整体是黑白，个别地方用红色的形式。

虽然这个网页页面上的有彩色并不是单一色彩，但是与背景黑色的搭配，整体上依然是有彩色与无彩色搭配所产生的对比，从而产生焦点。

这个虽然也是有彩色与无彩色的对比，但是这个很巧妙，因为设计者并没有直接在主标题上填充有彩色，而是在标题下方使用了一个有彩色的色块，这也是一种变相突显焦点的方式。

接下来是花色与纯色对比产生焦点，这个算是很常见很通用的一种形式了，尤其是照片上编排文字的形式，如果图片本身的色彩就比较丰富，那么文字色必然要使用单一的色彩才能保证很好的识别。

这个杂志封面的背景是由多种色彩所形成的插画图形，而人物一身黑色位于中间形成了第一焦点，其次是位于人物上的绿色文字，可以说既是有彩色与无彩色的对比，又是有彩色与花色之间的对比。

这个海报上的图片虽然色彩并没有多纯，但是由于色彩比较分散，所以可想而知，在它上方编排文字难免会造成识别度很低的情况，所以设计师也很巧妙地使用了添加色块的方式，利用这种图片花色与色块纯色的对比来突出焦点。

最后就是通过色彩面积大小产生焦点，这种面积的对比可以说是非常常见的，可以说大部分有色彩焦点的画面都是之前的那几种形式与面积对比的一个结合，但是并没有谁重要谁不重要一说，就比如这个海报上的红色圆形，无论你是把它的面积放大，还是把它换成和蓝色相近的颜色，焦点的效果都没有现在的好。所以我们在具体设计配色的时候千万不要有强迫症，因为这些方法往往都是结合使用的。

这个也是面积对比产生的焦点，同时又有蓝色与红色的冷暖对比。

这个页面也是，通过在大面积绿色调中使用一个红色块，快速形成对比，从而确定焦点。

以上我们主要讲解了通过配色形成焦点的一些方法，但其实细心的同学就会发现，这里面还是有一些潜规则的，有的是和色彩有关，有的可能和色彩无关。比如说同样的色彩或同样大小的对象，具象的东西比抽象的东西容易形成焦点、人物比场景或风景容易形成焦点、图像比文字容易形成焦点、标题文字比内文容易形成焦点、暖色比冷色容易形成焦点、强对比比弱对比容易形成焦点，最后我们就分别来看一下。

具象的事物比抽象的事物容易形成焦点，这个似乎没什么可说的，大家应该都能明显的感觉到，就比如这个海报，即使人脸的周围有着密密麻麻的抽象图像，我们的注意力依然在人脸的部分。

人物要比场景更容易产生焦点，比如这个海报，同时存在两张图片，虽然上方的图片是一匹马不是人，但是道理是一样的，我们的视线总是想关注这个马的眼睛，而下方的海水我们可能只是一扫而过。

图片比文字更容易形成焦点，这个也是无需多说的一点，因为即使都是黑白的图片和文字，我们也会首先注意到图片，这是图片所具有的天然魅力。比如这个海报，假如我们把图片遮掉，那么红色的「魂」字毋庸置疑就是第一焦点，因为在一堆黑色文字中它实在太显眼了，但是加上人物图片的话，就没有多少人会去关注「魂」字了。

标题比内文更容易产生焦点，这是因为标题所具有的天然优势，也就是面积优势，比如我们看这个海报，其实它这里的标题使用与图片一样的蓝色并不是很突出，虽然日期和副标题使用了色相对比，也确实成为了焦点，但是对于主标题的影响并不是很大，我们依然不会忽略掉主标题，这就是面积原因所造成的，因为它足够大。

暖色比冷色更容易形成焦点，这个海报就是一个很好的说明，因为海报中两个图片大小相当，唯一的区别就是一个是暖色一个是冷色，那么哪个更吸引你呢？一定是暖色，如果你说你就是被冷色所吸引那也没关系，但是你自己保留意见，我不接受反驳。

最后就是强对比大于弱对比，比如我们看这个海报，其实本身背景色上有色相的对比，但是因为对比不够强，所以就让上方的红色成为了焦点，因为红色与整体背景形成了强烈的深浅对比。

本期教程到这里就结束了，简单总结一下，首先我们通过一些案例说明了色彩焦点的重要性，也就是满足了人的三种需求：生理需求、视觉传达的需求以及审美的需求。其次我们讲解了如何形成或强调焦点，也就是通过一些色彩对比来实现。最后补充了一些焦点配色中存在的潜规则，也就是哪些内容或形式具有形成焦点的天然优势。当然这一切的落脚点还要归到视觉传达以及色彩营销上。

原文作者：研习设

为什么要整理设计色彩方法？

在色彩设计应用中，我们对颜色不同程度的理解，影响到设计页面的表现，熟练地运用色彩搭配，设计时岂不事半功倍。一张优秀的设计作品，它的色彩搭配必定和谐得体，令人赏心悦目，反思我们在设计过程中，怎样的色彩搭配更容易达到设计目的，又是什么影响了我们的配色思维呢？

以下几点常会影响色彩搭配思维：

1.仅关注色彩表象

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 同色系配色

同色系配色是指主色和辅色都在统一色相上，这种配色方法往往会给人页面很一致化的感受。

twitter的案例：https://twitter.com/

整体蓝色设计带来统一印象，颜色的深浅分别承载不同类型的内容信息，比如信息内容模块，白色底代表用户内容，浅蓝色底代表回复内容，更深一点的蓝色底代表可回复操作，颜色主导着信息层次，也保持了twitter的品牌形象。

观点：颜色差分割页面层次和模块，并代表不同功能任务属性。

1.1-2 邻近色配色

近邻色配色方法比较常见，搭配比同色系稍微丰富，色相柔和过渡看起来也很和谐。

ALIDP的案例：https://alidp.org/

纯度高的色彩，基本用于组控件和文本标题颜色，各控件采用邻近色使页面不那么单调，再把色彩饱和度降低用于不同背景色和模块划分。

观点：基于品牌色的邻近色运用，灵活运用到各类控件中。

1.1-3 类似色配色

类似色配色也是常用的配色方法，对比不强给人色感平静、调和的感觉。

 BENMAPT的案例

红黄双色主导页面，色彩基本用于不同组控件表现，红色用于导航控件、按钮和图标，同时也作辅助元素的主色。利用偏橙的黄色代替品牌色，用于内容标签和背景搭配。

观点：基于品牌色的类似色运用，有主次地用到页面各类控件和主体内容中。
 

1.1-4 中差色配色

中差色对比相对突出，色彩对比明快，容易呈现饱和度高的色彩。

facebook的案例：http://www.facebook.com/

颜色深浅营造空间感，也辅助了内容模块层次之分，统一的深蓝色系运用，传播品牌形象。中间色绿色按钮起到丰富页面色彩的作用，同时也突出绿色按钮任务层级为最高。深蓝色吊顶导航打通整站路径，并有引导用户向下阅读之意。

观点：利用色彩对比突出按钮任务优先级，增加页面气氛。
 

1.1-5 对比色配色

主导的对比配色需要精准地控制色彩搭配和面积，其中主导色会带动页面气氛，产生激烈的心理感受。

YouTube的案例：https://www.youtube.com/

红色的热闹体现内容的丰富多彩，品牌红色赋予组控件色彩和可操作任务，贯穿整个站点的可操作提示，又能体现品牌形象。红色多代表导航指引和类目分类，蓝色代表登录按钮、默认用户头像和标题，展示用户所产生的内容信息。

观点：红蓝色反应不同交互和信息的可操作性，针对系统操作和用户操作的区分。
 

1.1-6 中性色配色

用一些中性的色彩作为基调搭配，常应用在信息量大的网站，突出内容，不会受不必要的色彩干扰。这种过配色比较通用，非常经典。

Bechan的案例：https://www.behance.net/

黑色突出网站导航和内容模块的区分，品牌蓝色主要用于可点击的操作控件，包括用户名称、内容标题。相较于大片使用品牌色的手法，更能突出内容和信息，适合以内容为王的通用化、平台类站点。

观点：利用大面积中性色作为主导色，品牌色在这里起到画龙点睛的作用，用于一些需要重点突出的场景，强调交互的状态等。
 

1.1-7 多色搭配下的主导

主色和其他搭配色之间的关系会更丰富，可能有类似色、中差色、对比色等搭配方式，但其中某种色彩会占主导。

Google的案例：www.google.com

对于具有丰富产品线的谷歌来说，通过4种品牌色按照一定的纯度比，再用无色彩黑白灰能搭配出千变万化的配色方案，让品牌极具统一感。在大部分页面，蓝色会充当主导色，其他3色作辅色并设定不同的任务属性，黑白灰多作为辅助色，对于平台类站点来说，多色主导有非常好的延展性。

观点：谷歌设置了四种品牌色，通过主次、合理的比例应用在界面中，并通过组控件不同的交互状态合理分配功能任务。

(二)色调调和而形成的配色方式

2.1 有主导色调配色

这是由同一色调构成的统一性配色。深色调和暗色调等类似色调搭配也可以形成同样的配色效果。即使出现多种色相，只要保持色调一致，画面也能呈现整体统一性。

根据色彩的情感，不同的调子会给人不同的感受

2.1-1  清澈的色调    

2.1-2  阴暗的色调

2.1-3  明亮色调

2.1-4  深暗色调

2.1-5  雅白色调

…

2.1-1 清澈色调

SHOTFOLIO的案例

清澈调子使页面非常和谐，即使是不同色相形同色调的配色能让页面保持较高的协调度。蓝色另页面产生安静冰冷的气氛，茶色让我们想起大地泥土的厚实，给页面增加了稳定踏实感觉，同时暖和蓝色的冰冷。

观点：互补的色相搭配在一起，通过统一色调的手法，可以缓和色彩之间的对比效果。

2.1-2 阴暗色调

概念应用的案例

阴暗的色调渲染场景氛围，通过不同色相的色彩变化丰富信息分类，降低色彩饱和度使各色块协调并融入场景，白色和明亮的青绿色作为信息载体呈现。

观点：多色彩经过统一色调处理，区域间非常协调，也不影响整体页面阴暗气氛表现。

2.1-3 明亮色调

Kids plus的案例

明亮的颜色活泼清晰，热闹的气氛和醒目的卡通形像叙述着一场庆典，但铺满高纯度的色彩，过于刺激，不适宜长时间游览。

观点：饱和度与纯度特性明显的搭配，在达到视觉冲击力的同时，可适当采用对比色或降低明度等方法调和视觉表现。

2.1-4 深暗色调

LEES FERRY的案例

页面以深暗偏灰色调为主，不同的色彩搭配，像在叙述着不同的故事，白色文字的排版，整个页面显得厚重精致，小区域微渐变增加版面质感。

观点：以低暗色调构成整体画面氛围，小面积明亮部分不会影响整体感觉。
 

2.1-5 雅白色调

Very的案例

柔和的调子使页面显得明快温暖，就算色彩很多也不会造成视觉负重。页面的同色调搭配，颜色作为不同模块的信息分类，不抢主体的重点，还能衬托不同类型载体的内容信息。

观点：同色调不同色彩的模块，就算承载着不同的信息内容也能表现很和谐。

2.2 同色调配色

这是由同一或类似色调中的色相变化构成的配色类型，与主导色调配色中的属于同类技法。区别在于色调分布平均，没有过深或过浅的模块，色调范围更为严格。

tumblr的案例：www.tumblr.com

在实际的设计运用中，常会用些更综合的手法，例如整体有主导色调，小范围布局会采用同色调搭配。拿tumblr的发布模块来说，虽然页面有自己的主色调，但小模块使用同色调不同色彩的功能按钮，结合色相变化和图形表达不同的功能点，众多的按钮放在一起，由于同色调原因模块非常稳定统一。

观点：综合运用的情况，整体界面是有主导色调，在布局例如重点图标等是同色调配色灵活运用。

2.3 同色深浅搭配

这是由同一色相的色调差构成的配色类型，属于单一色彩配色的一种。 与主导色调配色中的同色系配色属于同类技法。从理论上来讲，在同一色相下的色调不存在色相差异，而是通过不同的色调阶层搭配形成，可以理解为色调配色的一种。

Genrecolours的案例

拿紫色界面来说，利用同一色相通过色调深浅对比，营造页面空间层次。虽然色彩深浅搭配合理，但有些难以区分主次，由于是同一色相搭配，颜色的特性决定着心理感受。

观点：同色深浅配色有着极高的统一性，但有点枯燥。
 

(三)对比配色而形成的配色方式

由于对比色相互对比构成的配色，可以分为互补色或相反色搭配构成的色相对比效果，由白色、黑色等明度差异构成的明度对比效果，以及由纯度差异构成的纯度对比效果。

3.1 色相对比

3.1-1  双色对比 

3.1-2 三色对比

3.1-3 多色对比

3.2 纯度对比

3.3 明度对比

3.1-1 双色对比

色彩间对比视觉冲击强烈，容易吸引用户注意，使用时经常大范围搭配。

VISA的案例：http://www.visa.cn/

VISA是一个信用卡品牌，深蓝色传达和平安全的品牌形象，黄色能让用户产生兴奋幸福感。另外蓝色降低明度后再和黄色搭配，对比鲜明之余还能缓和视觉疲劳。

观点： 不管是整体对比还是局部对比，对比色给人强烈的视觉冲击，结合色彩心理学对品牌传达效果更佳。
 

3.1-2 三色对比

三色对比色相上更为丰富，通过加强色调重点突出某一种颜色，且在色彩面积更为讲究。

NAVER的案例：www.naver.com

大面积绿色作为站点主导航，形象鲜明突出。使用品牌色对应的两种中差色作二级导航，并降低其中一方蓝色系明度，再用同色调的西瓜红作为当前位置状态，二级导航内部对比非常强烈却不影响主导航效果。

观点： 三色对比中西瓜红作为强调色限定在小面积展现非常关键，面积大小直接影响画面平衡感。

3.1-3 多色对比

多色对比给人丰富饱满的感觉，色彩搭配协调会使页面会非常精致，模块感强烈。

Metro的案例：http://www.microsoft.com/

Metro风格采用大量色彩，分隔不同的信息模块。保持大模块区域面积相等，模块内部可以细分出不同内容层级，单色模块只承载一种信息内容，配上对应功能图标识别性高。

观点：色彩色相对比、色彩面积对比，只要保持一定的比例关系，页面也能整整有序。
 

3.2 纯度对比

相对与色相对比，纯度差对比，对比色彩的选择非常多，设计应用范围广泛，可用于一些突出品牌、营销类的场景。

PINTEREST的案例：http://www.pinterest.com/

页面中心登录模块，通过降低纯度处理制造无色相背景，再利用红色按钮的对比，形成纯度差关系。与色相对比相较，纯色对比冲突感刺激感相对小一些，非常容易突出主体内容的真实性。

观点： 运用对比重要的是对比例的把握，面积、构图、节奏、颜色、位置等一切可以发生变化的元素，形成视觉的强烈冲突。
 

3.3 明度对比

明度对比接近生活实际反映，通过环境远近、日照角度等明暗关系，设计趋于真实。

ARKTIS的案例

明度对比够构成画面的空间纵深层次，呈现远近的对比关系，高明度突出近景主体内容，低明度表现远景的距离。而明度差使人注意力集中在高亮区域，呈现出药瓶的真实写照。

观点： 明度对比使页面显得更单纯、统一，而高低明度差可产生距离关系。

总结：

色彩是最能引起心境共鸣和情绪认知的元素，三原色能调配出非常丰富的色彩，色彩搭配更是千变万化。设计配色时，我们可以摒弃一些传统的默认样式，了解设计背后的需求目的，思考色彩对页面场景表现、情感传达等作用，从而有依据、有条理、有方法地构建色彩搭配方案。

原文：mux.alimama