设计师必须了解的色彩理论终极指南

版权申明：本文原创作者“HiBonie”，感谢“HiBonie”的原创教程分享！

如果一幅图所表达的内容就可以胜过数千文字的叙述，那么一张界面又有多少内容可以让我们探讨呢？事实证明，这里有许多不同的主题值得我们去讨论，其中一个主题就是色彩理论，它包含挑选一个匹配颜色色系的基本技巧。

当你在设计网站时，采用的颜色会传达出截然不同的思想和情感，所以为你的品牌选择合适的颜色非常的重要。例如，如果你给美国的顶级沙滩设计网站，和你创造一个像Groppon一样的在线商城，你肯定希望用不同的配色设计它们，因为它们传达的是不同的信息——一个网站传达的是让人心情放松，而另一网站传达的是由于做了一次非常棒的交易而让心跳加速兴奋。

本指南探讨的主题是关于网站和平面设计的色彩。学习先进的色彩理论最好的方法，是通过实践，而不是理论。但是为了提高，你必须有一个起点。除了有用的配色技巧和观点，你还可以发现许多宝贵的资源散落在整片文章中。

颜色的目的

从艺术的角度来探索色彩，它可以使主题更加鲜明。这就是一张绘图和一幅绘画主要的区别，尽管它们能传达相似的信息。这个道理适用于任何设计包括网页设计。

将色彩添加到设计中使画面的表达更加丰富。图形、字体、按钮和超链接，一切都可以在某种程度上匹配总体的基调。例如，葡萄园网站的颜色和水族馆网站的颜色是不同的。为什么呢？因为这是两种完全不同类型的网站，它们试图传达不同意义、目的或者感情给自己的目标受众。

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

因此，当在考虑颜色时，记住，颜色很少用来做页面的结构的区分和搭建。你应该用灰色来构建一个布局，就可以让人了解到界面的整体结构关系。访问者在浏览网站界面时，色彩可以带给访问者更加丰富的信息内容。

HSV色彩模型

大多数色彩理论文章讨论的观点是，每种色彩背后的思想和它们表现出的情感。我觉得感情的话题太主观，虽然它是准确的。选择一个配色方案，不仅仅是凭情感，相反，我要研究颜色是如何工作的，以及如何开始自己练习。

一个良好的开端是色相(Hue)、饱和度(Saturation)、明度(Value)（或HSV）。你可能理解这些测量颜色的术语，但是我想告诉你这些值确实非常重要。明度是你在黑白照片上获得的信息——就是不同色度的灰色。把一个网站截图,将它转换为灰度图，你就会看到它的原始值。

这就是说，明度是明暗程度，表示颜色的明与暗，也被称作亮度。色相是最基本的颜色术语，通常用来衡量实际的颜色，如蓝色、红色或黄色。色相是相当简单的，你可以通过记传统的色轮来记住它的规律。

饱和度（或纯度）与一个颜色的纯度和鲜艳度相关。可以把饱和度看成是色调的强与弱、浊与清。大多数人识别饱和度就是通过对比香蕉黄和粉笔黄的区别。粉笔色更为"发白"，似乎缺少鲜艳度，因为它的饱和度更低。从下图的Munsell color system（孟塞尔颜色系统）图表中，可以获得更好的理解：

这个图是值得我们去理解的，因为颜色都是相对的。所以，一个"冷"色，像蓝色用在浅色中就不那么冷了，同样的"暖"色，在暗色中也就不那么暖了。颜色系统是一个奇怪的话题，因为它常常与其它颜色相互作用。这样听起来好像是没有意义的，但你可以把它作为学习的例子，在实际的项目中不断练习。

Harmonic模式

当选择一个配色方案时，你有很多不同的模式可以遵循。诚然不是每个人都懂得如何挑选颜色，幸好网络上有很多方便的资源，来帮助我们完成这个任务。我认为这些色彩调和的网页做的很出色，但是让我们讨论一些更有趣的选择吧。

互补色是色轮上相对的两个颜色，它们之间的色彩对比非常强烈。例如，紫色按钮在黄色背景上非常的突出，因为它们是高对比度的配色。当然，这还取决于每一种颜色的饱和度，通过实践来理解是最好的。请记住：对立对比！

相近色在色轮上紧邻彼此。很显然这样的配色方案不会产生高对比度。但在设计图形、banner、纹理或者背景，这些需要匹配整个网页色系的元素时，这是非常实用的。毕竟在总体布局上，并非一切都应该是需要高对比度。

三色式是在色轮上等距隔开三个独立的颜色，三种颜色在色轮上要呈正三角分布。当要摆弄这种配色方案时，一定要选出一种色彩作为主色，另外两种作为辅助色，平衡色彩，决定它们应该如何融入整体布局。饱和度在其中扮演重要的角色，但是整体的配色方案任然不会因此发生大的变化。

分裂互补色非常像前面的互补色方案，但稍微有些变化。该配色方案是从色轮上的一个点开始，搭配与它相对的两个相邻色，使用相近色来代替互补色中的一个。分裂互补色的对比依然非常强烈，但它并不会像互补色搭配那样刺目，使人感觉不舒服，它给色彩的选择提供了一点回旋余地。