学会这3个方法，零基础也能做出好看的配色

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

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

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

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

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

渐变不仅是色彩上的变化，还有更多是属于时间的变化。开发网页设计中渐变色的运用绝不仅仅止步于此。

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

多色配色法：颜色的加减乘除

色彩不仅有色相，还包括饱和度、明度、色温等特质，与此同时，从心理层面上还会衍生出色彩的重量感、远近距离等心理感受，两种不同的色彩相互搭配，通过彼此的比例大小关系会衍生出更多复杂的影响。

双色互补

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

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

当背景色为蓝色的同时，以橙色作为强调色，蓝色和橙色为一组互补色：

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

三色对比

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

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

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

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

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

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

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

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

为了体现出婴儿系列产品品牌的活泼童趣，运用多种色彩可以表现出五彩缤纷，而选用粉嫩的色调则强调了初生婴儿的柔和感。页面选用了蓝色、紫色、绿色等色彩作三色调和，往下拖动时，粉红色的出现让页面转向了更加温柔的氛围，却又与原有色彩无冲突：

一屏一色

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

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

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

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

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

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

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

版权说明：本文节选自《轻设计——网页设计中的轻奢主义与禅意思维》，购买地址：https://item.jd.com/12087863.html