设计师色彩理论终极指南

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

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

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

颜色的目的

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

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

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

HSV色彩模型

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

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

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

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

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

Harmonic模式

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

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

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

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

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

四色式（矩形搭配）是最难以调和的，平衡的适当会使画面显得绚丽多彩。这种配色方案利用两对互补色，它们之间隔两个色格，这四种颜色在色环 上的连线形成一个矩形。在设计过程中若让一个颜色成为主色，效果会更加，同时要注意冷暖色的平衡。我不建议在一开始就采用这种配色方案，因为如果没有经 验，很难去控制它。但是它在较大的设计中使用会显得非常漂亮，所以它值得被牢记。

颜色对比

对比是网页设计的永恒话题。对比度是页面上的两个对象之间的清晰程度。最值得注意的包括段落、链接和标题文本。如果文本和背景颜色之间没有足够的对比，那么文字就很难阅读(太亮或太暗)。

最 安全的选择是始终退回到一个明暗尺度——灰色在白色上或白色在灰色上。深色的文字在亮色的背景上更加明显，反之亦然。然而，一些颜色经常产生一种不和谐的 效果，如红色和绿色。这种对比在某些情况下是精美的艺术，但不是任何情况下。在布局当中，如果遇到颜色丰富的地方，在给链接和按钮用色时要非常小心。

看Duplos的网页，你可以看到一些颜色不同的对话气泡，使用相同的白色文字。由于背景颜色够深，文字在各种颜色背景下都可读。这种不是单纯的基于文本的界面，值得我们在设计中去学习追求。

思考一下，图标或具有行为召唤能力的按钮，在设计中所需要的对比度级别。和谐的高对比度元素，自然能引起人们地关注。当某个按钮或者注册区域需要更多的关注，高对比度往往是一个很好的解决方案。颜色如果使用得当，能产生均衡的对比。

避免纯黑

从美学界获得一些建议，就是避免纯黑色。当你看到现实生活中的物体，你几乎看不到纯黑色。事情看起来很暗，但它的HEX色值（十六进制）不太可能是＃000。你甚至可以尝试拍摄照片，并在Photoshop中测试它的HEX色值。

最近我发现了Ian Storm Taylor写的一篇文章， ，题目叫做《不要使用黑色》。它指出，通过避免在界面上使用纯黑色，能更真实地反映现实世界。这可能是一个有偏见的说法，不过近些年来，我发现这是一个极好的建议。

为了实践这一观点，尽量避免在较亮的背景上使用＃000。取而代之，选择一个暗灰色，可能是混合色（深蓝色，深绿色，深橙色等）。我总是觉得，在白色背景上的深灰色文字，比纯黑色文字的可读性高出10倍。

纯黑色与其它颜色相比，反差非常大。这一点让我很苦恼，但即使是一点积极的差异，还是有区别的，所以我的建议是避免使用＃000。

提炼配色方案

入门色彩理论，最简单的方法可能是从一个单一的颜色开始入手，并使用在线指导工具。没有人与生俱来就理解色彩的选择。但随着不断的重复，它就变成了你的第二天性。

选择配色方案的时间，会在启动一个Web项目并收集想法（线框图，草图，页面元素）之后。这可能发生在设计一个简单的模型之前或者之后，但方法仍然是相同的。只需选择一种颜色，可以与基于内容、形式、风格或情感的布局很好地工作。

在线web应用，如Paletton是早期的方案设计中必不可少的。你输入一个单色，然后选择你喜欢的（相近色，三色式，四色式等）匹配方案。每种配色方案允许额外补充一个，与你选择的颜色相反的颜色。

Paletton是我个人最喜欢的，因为它提供了一系列基于调整饱和度的相对色。它还提供了基于你所选择的颜色，相同的颜色范围的预设方案。最重要的是，它是完全免费的！

另一个流行的选择是Adobe Color，它有非常相似的设置，但界面有些复杂。你依然需要基于输入一个单色，来选择配色方案。不过Adobe Color使用色轮展示匹配的颜，每一种颜色是灵活的，易于移动的，在维持颜色模式一致性之内。

当谈到提炼自己的配色方案，我强烈建议选择这两个中的一个。它们都是基于Web的免费工具，并提供足够的功能，让你开始构造可爱和丰富多彩的项目。

在线工具和Webapps

除了令人称奇的配色生产器，也有一些其它工具，值得保存以供将来参考。我觉得这些工具和资源，对数码设计，例如如图形或网站设计最有帮助。但你应该从中精选那些最有益于您的工作流的资源。

如果你正在寻找预建的配色方案，有很多可用的网站。一种选择是ColorSchemer，它有大量的附加功能，如移动应用程序和桌面软件。但该网站本身是免费的，并提供了用户生成的一个大型的配色方案展示库。

另一种选择是Colrd，它从图片照片和其它图形中提取颜色。这是一个奇怪的Web应用程序，因为它不一定总在网页设计领域颇有助益。但你可以通过研究图片，和它们相关的颜色学习到很多。一般来说，自然总是正确的，所以如果你认真观察生活和照中，你会从中获得配色的新思路。

但是，当涉及到数字设计，有许多其它网站，你可以前去学习。一个在线工具Check My Colours，可以将任何网站拉进来，检查文本和背景颜色之间的对比度。这是一个优质的资源，用来测试其它网站以及您自己的设计。

结果以表格形式列出来，说明了每个页面元素，在对比度和亮度方面的差别。这当然也不是完美的，但它确实为新的设计师，提供一个良好的开端。

浏览器扩展

我们大多数人都知道Adobe产品中有拾色器，如Photoshop或者Illustrator。这是一个迫切需要的工具，因为它提供整个色谱，以及一个RGB和HEX值。但现在大多数Web浏览器插件，可以复制一个类似的颜色选择器。

Chroma是谷歌Chrome浏览器为设计师和色彩爱好者，提供的一个免费扩展应用。它有一个正方形和圆形的颜色选择器，以及很广泛的不同明度的配色工具。 Mozilla Firefox浏览器有一个类似的扩展应用，叫做ColorZilla，它有吸管功能，可以从网页挑选颜色，并显示它的RGB及HEX色值。

如果你是一个Opera的用户，可以找到一个名叫Color Picker的扩展应用。你会发现它与Photoshop里的界面风格相同。

有了合适的扩展，所有这些浏览器都可以转换为颜色的资源，而不需要开启另一个程序。

颜色好看的网站

我喜欢用具体实例来阐明颜色的选择，而不是列一堆网站。这些例子可能不是颜色匹配的绝对典范，但它们确实为网页设计师提供了一个可靠的学习经验。

网站Barcamp Omaha 2014 在连续滚动的页面区域，采用了大量不同的颜色。最突出的一点是，文本设计很好地融入到每一个背景部分。页面上对比度最大的，往往是图形或按钮。你可以在整个网站中都看到这种效果。

虽然这种风格可能并非适用于每个站点，但他它却是混色的一个很好的例子。页面很容易阅读，但并不觉得对比度太强。找到一个甜美平衡的颜色是一个设计师的终极任务。

iForex Water 是一个视差网站，展示有关水资源消耗的信息。不像我最后一个例子，此网站在每一屏都使用相同的颜色，然而背景在不断变化。但是因为颜色都是深色，它们仍然能够作为背景正常工作。

这个例子是一个有趣的比较关系，同样还要注意不同部分滚动时，色彩关系的变化。在色彩理论的世界里，最好的效果是相对的。

Digimurai是一个更简单但典型的网站。显而易见，网站的设计布局主要集中在暗蓝色的色调中。这给人的印象是，蓝色占主导地位，并控制了大部分的设计。

但你会发现整个布局，还有其它的高亮色调。橙色和浅蓝色的出现非常突出，与暗色背景形成对比。要记住在选择一个配色方案时，使用2个或3个不同的色调，因为这样很可能会设计出一个非常棒的网站。

最后，我希望这个指南能提供可靠的起点给各位数字艺术家和网页设计师。色彩理论非常像音乐理论，其中主要的原理是通过实践得知，而不是传统的理论分析。但是在起步阶段，可能会感觉有些困难，等你积累了相当一部分资源和理论基础之后会感觉越来越顺畅。

如果你真的想了解配色方案的选择，那么就要坚持练习。刚开始的期望值不要太高，因为很有可能你在初始阶段的实践结果不会很成功，但是随着时间的推移，你会做得越来越好。