8个简单的规则来创建最好的网站配色方案

1.从你想表达的情绪开始

当你为你的网站选择一个调色板时，你不能只考虑事物的外观，你也必须考虑他们的感受。颜色会激起情绪是一个众所周知的事实。这些含义将直接影响您的用户感知您的产品的方式。因此，找出你想传达的感受。

“当你为你的网站选择一个调色板时，你不能只考虑事物的外观，你也必须考虑他们的感受。”

问问自己：我希望我的访问者与本网站关联什么样的情绪或感受？

为了让你开始，我编写了一个快速的参考指南，涵盖了每种颜色（在西方世界）的基本关联：

• 红色（激情，强大，危险，重要）：红色是一种非常刺激的颜色。它给人速度和力量的印象，传达重要意义或通知危险。已经证明了增加血液循环和提高新陈代谢的生理效果。
• 橙色（俏皮，充满活力，有吸引力，便宜）：橙色是温暖而鲜明的颜色。它有一个充满活力的光环，并能够为您的访客创造一个欢迎的感觉。
• 黄色（开朗，友善，刺激，注意力）：黄色可以是一种非常多才多艺的颜色，取决于你选择的颜色。淡黄色往往与太阳相关，因此传达积极性和温暖。黄色深色给人古老和年龄的印象。
• 绿色（自然，安全，新鲜）：绿色反映了环保和亲近自然的感觉。这也意味着增长，这就是为什么它往往与一个有利可图的业务。
• 蓝色（信任，平静，可靠）：蓝色往往与平静和放松的情绪相关。蓝色发出内心安全感。这就是为什么你会看到银行和技术企业使用这种颜色。
• 紫色（豪华，神秘，浪漫，精神）：从历史上来看，紫色暗示产品是高端的。
• 粉红色（女性，无罪，青春）：粉红色以其与女性的联想而闻名（许多人认为它是“女孩的颜色”）。尽管如此，粉红色并不是女性中最流行的颜色（根据Joe Hallock的研究）。粉红色经常用于浪漫的主题。
• 黑色（功能强大，复杂，神秘，锋利）：黑色是光谱中最强大的颜色 – 它比其他颜色（包括红色）更能吸引注意力。这就是为什么它最常用于文本和口音。黑色作为背景等配色方案的主要成分使用时，能够产生动力或奢华的感觉。
• 白色（纯度，健康，清洁，无辜）：白色配以其他颜色，使其成为次要颜色的流行选择。当用作主要颜色时，白色能够提供“干净”的感觉，并将访客的注意力集中在重要元素（例如对比号召性用语按钮）上。
• 灰色（中性，正式，高雅，不育）：灰色往往与中立性相关。以灰色作为主要色彩的色彩搭配，营造出形式感，这也是灰色在商业世界中如此受欢迎的原因。

网页设计

2.限制颜色的数量

将颜色应用于设计项目与平衡有很大关系。你使用的颜色越多，达到这种平衡就越困难。

如果限制设计中使用的颜色数量，将会得到更好的结果。根据经验，在您的配色方案中最多可以使用三种原色。事实证明，大多数用户喜欢简单的配色方案：根据多伦多大学关于人们如何使用Adobe Color CC的研究，大多数人表示，他们喜欢简单的颜色组合，只依靠两种或三种颜色。

提示：如果除了在调色板中定义的颜色之外，还需要其他颜色，请使用阴影和色调。

3.避免使用纯黑色

当我们看到现实生活中的黑暗事物时，我们经常认为它们是黑色的东西。事实上，纯黑几乎不存在。我们周围的所有“黑色”物体都有一些光线反射，这意味着它们并不是真正的黑色，它们是深灰色的。

当您将纯黑色放置在一组挑选的颜色旁边时，黑色将压倒一切。它脱颖而出，因为它不自然。我们使用的许多应用程序和我们每天访问的网站都有黑色，而不是真正的黑色，而是黑色的灰色。例如，苹果顶栏上最黑的颜色不是＃000000，是＃333333。所以要记得总是给你的颜色添加一点饱和度。

4.尽量遵循60-30-10规则

这是一个永恒的装饰规则，可以帮助你轻松地把一个配色方案。60％+ 30％+ 10％的比例是为了平衡任何空间的颜色。

这个概念使用起来非常简单：60％是主色，30％是次色，10％是重音色。这个想法是第二种颜色支持原色，但不同的是它们分开。你的10％是你的口音颜色。它可以是CTA或其他元素的颜色。

网页设计

5.先设计灰度

玩颜色很有趣。这就是为什么选择配色方案通常是我们在开始一个新项目时首先要做的事情之一。从一开始就使用不同的颜色组合真的很诱人，但我强烈建议您避免这种诱惑，而是首先关注灰度级设计。在添加颜色之前在灰度级中进行设计，强制您将重点放在页面结构和布局元素上。

因此，首先找出层次结构：

只有在那个颜色的实验之后：

6.使用颜色对比度设置重要性

对比度是两种颜色之间变化的量度。这是一个强大的工具，可以帮助引导眼睛。一般来说，高对比度是重要内容或关键要素的最佳选择。你想要脱颖而出的东西越多，就越需要依靠不同的颜色。

考虑下面的例子。在第一个例子中，由于背景和按钮的颜色几乎相同，因此几乎看不到主要呼叫操作按钮“Get Evernote，It’s Free”。

在第二个例子中，您可以轻松地找到CTA按钮。

遵循连续性的规则

考虑整个网站的颜色连续性。连续性并不意味着在每个页面上使用相同的颜色 – 这将是无聊的！但是，它意味着使用颜色从一个页面到另一个页面进行平滑的颜色转换。当访问者浏览您的网站时，这将会产生一种熟悉感。在大多数情况下，仅使用一种连接颜色就可能产生这种效果。例如，当访问者从主页移动到产品页面时，可以使用品牌颜色作为标题，以创造一致体验的感觉。

8.考虑设计的可访问性

辅助功能是使用颜色进行设计时的一个关键考虑因素 今天的产品必须适合每个人，不管一个人的能力如何。在考虑设计中的可访问性和颜色时，请注意以下几点策略：

避免单独使用颜色作为指标

大约8％的男性和0.5％的女性受到某种形式色盲的影响。那是十二个男人和一个二百个女人中的一个。虽然有多种形式的病症，红/绿色盲是最常见的。患有这种色盲形式的人通常会看到红色和绿色的变化。

我们设计的大多数网站都有一些元素可以让色盲成为真正困难的用户。我们来看一个常见的案例：当您在网站上填写注册表单时，是否收到过错误消息：“标有红色的字段是必需的”？尽管看起来不像是一件大事，但对于有色觉不足的人来说，这个错误信息与下面的例子中的一个表单相结合可能是一个非常令人沮丧的体验。

由于色盲具有不同的形式（包括红绿，蓝黄色和单色），因此使用多个视觉线索来传达 网站中的重要元素非常重要  。除了颜色之外，还可以使用笔划，指标，图案，纹理或文字等元素来描述动作和内容。

避免低对比度的文字

色彩对比是色彩理论对于设计的可用性至关重要的一个领域。当您在文本中使用颜色时，请注意，将两种颜色对比度较低的低对比度颜色可能会使您的副本难以阅读。

检查对比度，以确保背景和前景色以足够的对比度出现，以适应色盲或低视力人士的需求。这并不难 – 你只需要检查对比度。

对比度代表一种颜色与另一种颜色的差异（通常写为1：1或21：1）。两个数字之间的比值越高，颜色之间的相对亮度差异越大。的W3C推荐正文文本和图像的文字下面对比度：

• 小文本的背景对比度应至少为4.5：1。
• 大的文本（14pt粗体/ 18pt正常或更高）的背景对比度至少应为3：1。

网页设计

好消息，你不必手动检查。使用工具颜色对比度检查器，您只需点击几下就可以检查您的颜色组合。

网页设计