网页配色技巧图解（页面设计雷区配色黑名单）

说起配色你会想到什么？

像《布达佩斯大饭店》一样艳丽唯美的电影？颜值与设计感并存的单款配色数码产品？花样百出的化妆品？

学习正确的配色规则与方法不仅能让我们在做设计的时候更加得心应手，还能够提高审美。然而，错误的配色方式也不能被忽视。在避免犯错的同时，也让我们对色彩的掌握更加深入。

同一种配色，在电影或插画中或许是美丽的，但一旦呈现在了数码页面上，却会变得晃眼。因此，为了实现更为美观的设计，在进行页面设计时，记得把以下几项配色拉黑哦。

一、纯黑色（#000000）

黑色在绘画中被称为“颜色中的皇后”。关于色彩心理学的文章都强调黑色与魅力、精致、力量和权威的联系。因此，“纯黑色”被列入黑名单，可能会让人觉得有些困惑。

但如果仔细观察就会发现，优秀的作品使用的“黑”都不是纯黑（#000000），而是接近于纯黑的深灰色。

这是因为真正的纯黑色（#000000）实际上是一种不自然的颜色，它不存在于自然界中。纯黑色的产生意味着要吸收所有的光谱，而这在自然界中根本不可能发生。自然的色彩是混合且柔和的。因此，纯黑色不是我们眼睛习以为常的东西，我们的大脑不习惯看到它。

纯黑色（#000000）与鳕鱼灰（#1111111）的对比

在界面元素中使用霓虹色

霓虹色指的是发出强烈光芒感的明亮的颜色。霓虹色虽然引人注目，却会给眼睛和大脑带来不适感，尤其在电子显示屏中出现的霓虹色会更令人炫目。作为不会出现在自然界中的颜色，它们对于人的大脑来说是不熟悉的，因此大脑在处理这类信息的时候会很吃力。

在艺术作品或插画里，霓虹色是美丽、充满活力且吸引人的颜色，尤其用在复古主题的作品中有非常好的效果。但是在界面设计中，它作为背景色会过度抢眼；用在文字上会导致难以阅读，如果强行使用，就会因为过度刺激眼睛和大脑，而大大影响用户体验。如果一定要使用霓虹色，尽量避开需要被阅读的文字背景，比如主体文字，侧边栏导航栏和按钮的背景。

霓虹色海报

对比度过高的组合

任何的高对比度色彩带来的震撼效应都是让人觉得两个色彩之间会产生模糊、刺眼或者发出光晕的视觉效果。

“红配绿”就是一个典型的反面例子。作为圣诞节的主打色，红绿组合在页面设计中却很不适用。红色给人带来热烈和兴奋的感觉，而绿色作为冷色调，可以镇定大脑，将两者放在一起会使大脑在进行视觉信息处理时感到不舒服。

同样，作为典型冷色和暖色的代表，蓝色和红色搭配虽然没有红绿配那么激烈﹐但也仍然会产生冲突。同时，二次色作为原色的混合色和它的原色也很难搭配。所以在配色的时候可以规避二次色和其相邻的原色配合使用。比如紫色是红色和蓝色的混合，就避免和红色或蓝色搭配；绿色是蓝色和黄色的混合，就避免和蓝色或黄色搭配；橙色是黄色和红色的混合，就避免和黄色或红色搭配。

红配绿和蓝配红的效果

对比度过低的组合

避免强烈对比的颜色并不意味着应该只使用色调和数值几乎相同的颜色，矫枉过正同样也是不可取的。浅色与浅色搭配，或者深色与深色搭配，导致对比度过低，影响了可读性，同样也会导致不好的用户体验。

比如，浅色的文字放置在白色或浅色背景中，就会让访问者难以弄清文本所说的内容。深色背景配上深色文字也是如此。除此之外，还有一些特定的糟糕组合，比如黄色文字配绿色背景、绿色文字配黄色背景、红色背景配黑色、蓝色和品红文字，等等。

浅色文字放在浅色背景上的效果

多颜色背景

选择纹理背景的时候要小心。要避免使用刺眼的颜色，这类颜色通常是通过重复使用一些色彩明亮的、尺寸很小的图案来构成。这种背景过于鲜亮且色彩冲突性强，很容易让文字被忽略。通常的法则是在背景里使用不超过三种颜色；如果超过了，绝对不能超过四种颜色。

同样的道理也适用于渐变色的使用。避免在有多个文字块的页面使用渐变色块，也不要使用包含了文字颜色的渐变色块作为背景，这样文字就不会因为背景色的影响而被读者忽略。在使用纹理背景的时候，必要时可以把文字放在一个能区别于背景的干净区域，比如给文字框设置背景或者在文字图层的下面放一个配合文字的颜色图层。同时切记让文字和其他的视觉元素保持距离，这样文字才能脱颖而出。

正确背景与文字示范

在注重色彩的时候不要忘记：颜色并不是唯一一个影响设计效果的因素，也不是一个孤立的存在，在配色的时候要综合考量排版、插图，内容和目标受众等各个方面再进行选择。很多时候，需要多次尝试才能得到理想的效果，因此，不要害怕改动，每一次改动，必然都是为了得到更好的结果。

编 辑｜龙 一 刘佳婧

责 编｜圆 圆