认识了色彩，并不表示你就能(néng)对颜色运用(yòng)自如。配色有(yǒu)理(lǐ)性的层面，也有(yǒu)感性的层面。配色也需要依循一定的节奏。有(yǒu)的配色跳跃明快，有(yǒu)的又(yòu)显得舒缓柔和。我们从理(lǐ)性出发的同时，也要把自己的触角深入到感性的层面去理(lǐ)解色彩。

配色秩序

每一种色彩都有(yǒu)其自身的特质，而这一特性的发挥，还需要依赖于色彩在整个配色时所处的位置、面积等，也即色彩与其他(tā)色彩所形成的秩序。

主色

主色是指在配色中处于支配地位的色彩。在配色前，主色是最先确定的颜色，例如，当我们想要设计一个珠宝展示的页面，这个页面所需要什么色彩时，我们决定采用(yòng)紫色，而紫色就是主色。主色的确定看起来并不困难，因為(wèi)一开始被确定下主色只是定出一个宏观方向，并没有(yǒu)细化成具體(tǐ)的色调。主色的选择也非常自由，因為(wèi)并没有(yǒu)完全正确的“公式”，每种颜色都有(yǒu)它的特性和优劣，没有(yǒu)最好的颜色或最差的颜色。

最终确定对主色色调的选择则需要感性的参与，你希望你的网站看上去“沉稳典雅”还是“清新(xīn)明快”？这些不同的感受都来自色调的制约平衡。

一般情况下，主色是配色中使用(yòng)面积最多(duō)的色彩。用(yòng)于主要的组件、组件的背景、大面积色块等。

页面中的主色是清爽的蓝色。尽管背景也运用(yòng)了大面积的白色，但是黑白灰属于无彩色，无彩色并不参与到配色过程中。红色是作為(wèi)衬托色而出现的：

衬托色

衬托色是主色以外，為(wèi)了衬托主色而出现的另一种色彩。衬托色通常為(wèi)主色的互补色或对比色。衬托色所使用(yòng)的面积可(kě)大可(kě)小(xiǎo)，只要达到衬托的目的即可(kě)。

黄色是主色，蓝色衬托色。蓝黄两色互為(wèi)对比色：

衬托色也可(kě)用(yòng)在面积较大的地方，和主色平分(fēn)秋色，彼此呼应。

页面的主色為(wèi)橙色，而衬托色為(wèi)浅色粉，这两种色彩為(wèi)邻近色，彼此饱和度上有(yǒu)非常明显的对比，也能(néng)很(hěn)好的衬托出主色，為(wèi)页面的氛围增加温度：

一组配色中一定会有(yǒu)一个主色，而衬托色并非必不可(kě)少。是否采用(yòng)衬托色，取决于你的配色计划。通常单一的色彩会比较单调，而利用(yòng)衬托色来强化主色的丰富变化是解决这一问题的方案之一。

背景色

背景色经常表现為(wèi)无彩色（黑、白、灰）或者低饱和度的色彩。背景色主要是作為(wèi)背景而存在，它最好不要以非常强烈的姿态出现。背景色并非具有(yǒu)某种功能(néng)，它是一个页面的基础底色。

页面的背景色為(wèi)蓝绿色到蓝紫色的渐变色，因此配图时就应该考虑与背景色的搭配协调：

黑色作為(wèi)背景色时，浅米色作為(wèi)主色，主色和背景色之间的相得益彰，这时的背景色也可(kě)看作衬托色：

强调色

强调色是在主色以外起强调作用(yòng)的色彩，可(kě)以说它是非常重要的视觉焦点。它本身具有(yǒu)一种独立性，因此在配色上要与形成与主色的强烈对比。它可(kě)以是主色的对比色、互补色等，使其能(néng)跳脱于主色的色彩。

页面的主色為(wèi)蓝色，红色则作為(wèi)强调色，在进入另一个页面时，红色又(yòu)作為(wèi)了主色，而紫色作為(wèi)了强调色：

强调色所用(yòng)的面积比较小(xiǎo)，只要在焦点领域运用(yòng)上强调色，其本身就有(yǒu)着聚焦的作用(yòng)。有(yǒu)时候强调色还扮演着衬托色的角色。

单色配色法：同色同源

单色系配色是指网站的页面主色只使用(yòng)一种颜色，需要注意的是，所谓的单色并不“单”，往往运用(yòng)单色系配色方案的是配图较多(duō)的网站，这些配图自身已经包含着丰富的色彩，从整个页面来看，色彩就并不只有(yǒu)主色一种了。当配图的色彩也参与到了页面整體(tǐ)的配色體(tǐ)系中，只需要寻找到一种与配图都能(néng)协调的色彩作為(wèi)主色，就能(néng)轻松掌握单色配色法的技巧。

页面的主色為(wèi)清爽的蓝绿色，这时选择的背景配图是人脸眼睛的部分(fēn)，摄影作品本身带有(yǒu)柔和的肉色，与蓝绿色相得益彰：

单色扮演主色的同时也扮演着强调色，在配色运用(yòng)中，重要的组件、焦点的部分(fēn)都可(kě)以运用(yòng)这一色彩，形成明显的视觉重点框架。而与此同时，背景色应该尽量保持黑白灰，不对主色造成干扰。如果想要形成一定的层次，也可(kě)以在主色调之外通过降低其色彩饱和度或明度等方式，形成单色配色中色彩的空间视觉深度。

在单色系配色法中，即使属于同一色系，色调也会有(yǒu)所差异，因此这也是另一种配色方式，运用(yòng)在配图较少，且配图色彩也并不多(duō)变的情况下。

页面主色為(wèi)橙色，也在细微的地方展示出不同调性的橙色，当鼠标Hover按钮变為(wèi)更為(wèi)偏红的橙。背景色则用(yòng)了浅橙色作為(wèi)底色。这三种色彩都是橙色，而表现了不同的色彩空间层次：

当网站的配图较多(duō)，往往既要考虑配图本身的配色、配图与配图间的配色、配图色彩与单一主色间的搭配。

想要将页面变得干净清爽除了产品缩略图本身要维持简洁干净的背景、产品拍摄的统一协调，同时也需要考虑产品彼此的色彩呼应：

主色的单一色调不一定用(yòng)在组件上，有(yǒu)时也采用(yòng)“反白”的处理(lǐ)，尤其是主色本身比较强烈时，填充主色作為(wèi)背景，传递出主色强烈的表现效果。

页面中的蓝色作為(wèi)背景色的同时阴影部分(fēn)显出了图片内容轮廓，制造出朦胧的视感，反白的文(wén)字更易于阅读：

还有(yǒu)一种更加纯粹的单色调配色方式，将整个网站的配图设定為(wèi)灰度图案，让主色在整个黑白灰的氛围中显得格外醒目，从而突出主题。这样做的好处是让画面更加简约、克制，当然也就失去了缤纷华丽的氛围。

配图為(wèi)黑白灰，作為(wèi)主色的橙红色就能(néng)从中脱颖而出。这让每个橙红色的细节元素都格外分(fēn)明：

将配图的颜色“拿(ná)掉”是相对冒险的做法，只在一些强调图片的个性与质感并不急于展示产品所有(yǒu)细节给用(yòng)户的网站中所用(yòng)较多(duō)，品牌站里可(kě)以采用(yòng)这类方式来加强品牌的感染力和形象特征。

渐变配色法：梦幻滑翔

渐变可(kě)以视為(wèi)一种效果，也可(kě)以当做一个手段。渐变中使用(yòng)的多(duō)种色彩，将它们的分(fēn)布呈现柔和过渡，展示出梦幻之感。一般来说，我们安排的渐变色往往是以两种色彩為(wèi)端点，中间过渡為(wèi)两种色彩的滑翔地带，其覆盖的色彩范围较广，因此，我们很(hěn)难判断其主色是哪一固定的色值。从色温的角度為(wèi)考虑，渐变可(kě)以有(yǒu)暖色渐变、冷色渐变，也有(yǒu)冷暖过渡的渐变，而从两端的色彩之间的关系，又(yòu)分(fēn)為(wèi)邻近色渐变、对比色渐变等。不同的色调渐变所呈现出的品牌氛围各有(yǒu)千秋。不管怎样，在轻设计中，渐变的色彩通常集中在高明度的色调范围，让画面显得更為(wèi)通透柔和。渐变的色彩范围也不宜太广，色彩分(fēn)布太大让画面本身容易陷入于混沌中。

渐变常以背景的形式出现，或运用(yòng)于较大的元素之上。根据渐变色的不同，所展示的配图以及其他(tā)组件也要根据这一渐变色而协调。

蓝与紫、紫与粉色的邻近色渐变过渡有(yǒu)一种梦幻般的感受，白色文(wén)字以及配图甄选也都考虑到与渐变色彩的协调感。色彩丰富饱满，页面则简洁明快：

浮动于渐变背景上方的元素色彩也可(kě)以与背景形成对比，这时，渐变色的范围就要更為(wèi)精准清晰，以免让色彩变“浑浊”。毕竟在轻设计中，维持画面的“澄清”是很(hěn)重要的。

利用(yòng)渐变色系配色法的灵活多(duō)变，在一张大型配图上方叠加一层透明渐变，也同样是非常流行的做法。这样作出的效果也相当炫目耀眼，能(néng)瞬间提升摄影本身的感染力。

為(wèi)了让页面变得更為(wèi)“清澈”，可(kě)以采用(yòng)渐变映射的方式，即只对核心焦点运用(yòng)蓝绿渐变，而背景色依然维持简洁的白底，这样的做法更巧妙地收住了渐变大面积铺开所形成的华丽感，而像為(wèi)主角打开了特殊的镁光灯：

利用(yòng)渐变色的变化，通过切换图片，渐变色也随即改变。由于渐变的饱和度较高，因此其上方的元素运用(yòng)白色展示，使文(wén)字清晰可(kě)辨：

渐变色铺排整个背景，让页面展示出流光溢彩的氛围：

现实世界中，我们很(hěn)难发现有(yǒu)一块完全凝固不变的色彩，比如云彩虽说是白色，但总是又(yòu)隐隐透出蓝色、橙色等不同的渐变色，天空也并不尽然是全然相同的蓝，而表现出了深浅不一的色调。我们在设计中运用(yòng)到渐变色，也就是让画面还原更多(duō)的真实。

被北极光渲染的星空本身就带着色彩的渐变流淌，照片本身的色彩渐变已表现出了动态的美轮美奂。

有(yǒu)时候背景运用(yòng)渐变的同时，前景对象也运用(yòng)渐变色，利用(yòng)渐变色进行填充后，整个画面充满了未来感：

还可(kě)以将渐变色运用(yòng)到元素上，这时渐变色就需要更加浓烈鲜明，从背景凸显出来，形成视觉强调。

在需要被注意的大型文(wén)字中运用(yòng)鲜艳度都非常高的大红到紫色的渐变，背景采用(yòng)接近无彩的暗调，让文(wén)字更加璀璨夺目：

渐变不仅是色彩上的变化，还有(yǒu)更多(duō)是属于时间的变化。开发网页设计中渐变色的运用(yòng)绝不仅仅止步于此。

运用(yòng)渐变色增加色彩的丰富感，同时又(yòu)让画面不至于凌乱。这在很(hěn)多(duō)品牌站中所用(yòng)较多(duō)。如果希望页面显得严肃，可(kě)以限制渐变所用(yòng)的范围。总之，渐变是一种“梦幻”的手段，而绝对非目的。

多(duō)色配色法：颜色的加减乘除

色彩不仅有(yǒu)色相，还包括饱和度、明度、色温等特质，与此同时，从心理(lǐ)层面上还会衍生出色彩的重量感、遠(yuǎn)近距离等心理(lǐ)感受，两种不同的色彩相互搭配，通过彼此的比例大小(xiǎo)关系会衍生出更多(duō)复杂的影响。

双色互补

将色环上处于180°相对而存在的色彩进行搭配，这两种色彩在视觉上形成互补关系。我们知道色彩并不能(néng)简单陈述為(wèi)红色、蓝色，因此在相对的关系上也不能(néng)简单就概括红与蓝是互补这样笼统的结论，因為(wèi)实际上红色和蓝色的色调都高低明暗种类繁多(duō)。而我们知道处于相对180°位置的一组色彩其本身相互补充又(yòu)相互制衡的关系，在实际运用(yòng)中会催生一种平衡的视觉满足感。我们要做的依然是从情感上而非理(lǐ)性层面打开视觉的脉轮。

互补色处于色环上两两相对的位置，网页设计中通常使用(yòng)其中一个色彩作為(wèi)主色或背景色，另一个作為(wèi)强调色或衬托色而加以运用(yòng)：

当背景色為(wèi)蓝色的同时，以橙色作為(wèi)强调色，蓝色和橙色為(wèi)一组互补色：

双色互补在运用(yòng)面上并非对半平分(fēn)，而是有(yǒu)选择的采取一主一辅有(yǒu)机结合的方式，这样有(yǒu)利于突出色彩的性格主题。

三色对比

处于色环上距离彼此120°位置的三种色彩，两两之间彼此為(wèi)对比色，而这三种色彩的搭配也会形成非常和谐的组合。

此外，另有(yǒu)一类三色组合，是以其中两种色彩彼此距离60°，第三种色位于它们相对180°位置上。利用(yòng)前两种色彩共同的力量而和另一个色彩形成相互制衡的关系，同样能(néng)催生出另一种和谐。

三色对比有(yǒu)两种情况，一种是在色环上选取彼此间隔120°的色彩，另一种是有(yǒu)某个色彩与其他(tā)两个色彩保持180°相对的关系：

当然，在网页设计中，挑选三种色彩运用(yòng)到页面中，要主要对配图本身色彩加以控制，否则容易让页面显得凌乱。尤其是轻质风格的设计中，色彩尽量予以控制在三种以内，如果要选择这类配色法，应该尽量选择明度较高、饱和度较低的色彩，冲淡色彩彼此的强烈冲击。最好的办法仍然是以某一个色彩作為(wèi)主色，其他(tā)两种色彩起强调、对比的作用(yòng)。

网页设计选用(yòng)蓝色、紫红和粉红的三色搭配，运用(yòng)了三色对比，看上去色彩协调、活泼。网页所采用(yòng)的插画配图也遵循总的配色规律，保持了页面配色风格的统一性：

没有(yǒu)运用(yòng)配图的时候，整个页面回归到极简的状态，这时运用(yòng)纯色对比，就是运用(yòng)色彩本身的魅力来感染用(yòng)户。可(kě)以说，这样的配色方式比较安全，让审美变得更加纯粹。

页面被三种色彩均等分(fēn)布，呈现出非常严格的平衡感：

就像我们曾经说过，对单个页面来说，网页设计会有(yǒu)个全局的概念。有(yǒu)时候，网页中一个页面，或者一屏就可(kě)以被看作一件平面作品。所谓“三色”可(kě)以是从整个网页出发，也可(kě)以是从一个屏幕上来看。即使我们发现有(yǒu)的网页运用(yòng)了不止三种颜色，但在一个屏幕中所出现色彩仍然控制在了三色对比的状态。网页的动态效果更是為(wèi)配色的多(duō)变性增加了更多(duō)的灵动空间。

為(wèi)了體(tǐ)现出婴儿系列产品品牌的活泼童趣，运用(yòng)多(duō)种色彩可(kě)以表现出五彩缤纷，而选用(yòng)粉嫩的色调则强调了初生婴儿的柔和感。页面选用(yòng)了蓝色、紫色、绿色等色彩作三色调和，往下拖动时，粉红色的出现让页面转向了更加温柔的氛围，却又(yòu)与原有(yǒu)色彩无冲突：

一屏一色

我们从一个屏幕的视觉出发，而非从全局来看，一个屏幕运用(yòng)一个单色进行搭配，是行之有(yǒu)效的极简风格配色法。它很(hěn)好的解决了色彩单一的问题，与此同时，整个网页依然保有(yǒu)丰富多(duō)彩的色彩印象。这类配色技巧在许多(duō)展示类的网页中常见。

每一个页面只运用(yòng)一种主色，虽然整个页面由多(duō)色组成，但色彩与色彩之间呈现出了丰富的动态的和谐关系：

每一屏运用(yòng)不同的背景色，配图以及网页元素的色彩，比如橙色的按钮和配图与背景色相协调：

网页中的页面切换也非常灵活，可(kě)以通过鼠标滚动实现，还能(néng)通过切换按钮切换主题画面，也能(néng)达到一屏一色的目的。

EXTET.R的首页设计非常巧妙地安排了一个类似时钟一样的圆形滚动播放主屏画面，画面采用(yòng)不同的背景色和不同的展示主题。造型别致新(xīn)颖：

大多(duō)时候，多(duō)色配色时所选用(yòng)的配图应该尽量保持不惊扰原有(yǒu)配色的氛围，或根据配图来决定网页的配色方案。

颜色与颜色搭配绝不是简单相加，而是运用(yòng)色彩的特性，作出更加丰富的加减乘除，其结果不是得到另一个单一的色彩感受，而是综合其上的视觉效果和情感體(tǐ)验。与其说色彩像幻术一样无法抓取，不如说对于配色，忘掉条条框框的理(lǐ)性分(fēn)析，或许能(néng)得到更多(duō)。

版权说明：本文(wén)节选自《轻设计——网页设计中的轻奢主义与禅意思维》